DEV Community

Cover image for Slack Clone with React | Semantic UI | GraphQL | PostgresSQL (PART 7)
AjeaS
AjeaS

Posted on

2

Slack Clone with React | Semantic UI | GraphQL | PostgresSQL (PART 7)

In part 6 of this series, we set up the apollo client along with the folder structure. However, since I have changed my folder structure and routes a little bit, so let's correct those before diving into Register and Login UI with Semantic UI.

Refactor Folder Structure

Screen Shot 2020-09-27 at 12.36.35 PM.png

as you can see, I renamed Home.js to Slack.js. It is where our slack app will be (just as hello world text inside).

  • Private folder will have our private routes (will create later)
  • styled folder will have our styled-components (will create later)

*Inside our App.js file now looks like this. *

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";
import Slack from "./Slack";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Slack} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Register} />
        </Switch>
      </Router>
    </div>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

It is what it will look like for now until we get further in the series.

Register Page with Semantic UI

Inside our Register.js file

import React from "react";
import { Form, Header, Button } from "semantic-ui-react";
import { Link } from "react-router-dom";
import { Message } from "semantic-ui-react";
import "./auth.css";
const Register = () => {
  return (
    <div className="wrapper">
      <Header as="h2" textAlign="center">
        Join Slack{" "}
        <span>
          <i className="fab fa-slack" style={{ color: "#723975" }}></i>
        </span>
      </Header>
      <Form
        className="auth_form"
        size="large"
      >
        <Form.Group widths="equal">
          <Form.Input
            name="username"
            label="Username"
            type="text"
            placeholder="Username"
          />
          {/* END OF USERNAME FIELD */}
          <Form.Input
            name="email"
            label="Email"
            type="email"
            placeholder="Email"
          />
          {/* END OF EMIAL FIELD */}
          <Form.Input
            type="password"
            name="password"
            label="Password"
            placeholder="Password"
          />
          {/* END OF PASSWORD FIELD */}
        </Form.Group>
        <Button
          type="submit"
          formNoValidate
          style={{
            width: "100%",
            backgroundColor: "#5B2C5D",
            color: "white",
            marginBottom: "0.5em"
          }}
        >
          Submit
        </Button>
        <p style={{ textAlign: "center", fontSize: "0.8em" }}>
          <Link style={{ textDecoration: "none" }} to="/login">
            Already have an account? Log In
          </Link>
        </p>
      </Form>
    </div>
  );
};
export default Register;
Enter fullscreen mode Exit fullscreen mode

I added a link to toggle between the Login form and Register.

*Things to note: *

  • I go the icon from font awesome, so if you want the same, make sure to grab that CDN.
  • Be sure to create the auth.css file inside the auth folder.
.wrapper {
  margin: 4em auto;
  width: 100%;
}

.wrapper .auth_form {
  margin-top: 3em;
  margin: 3em 2em;
}
Enter fullscreen mode Exit fullscreen mode

Your design should look like this.

Register page UI

Login Page

inside our login.js file.

import React from "react";
import { Form, Header, Button, Input } from "semantic-ui-react";
import "./auth.css";
const Login = () => {
  return (
    <div className="wrapper">
      <Header as="h2" textAlign="center">
        Log into Slack{" "}
        <span>
          <i className="fab fa-slack" style={{ color: "#723975" }}></i>
        </span>
      </Header>
      <Form
        className="auth_form"
        size="large"
      >
        <Form.Group widths="equal">
          <Form.Input
            name="email"
            label="Email"     
            type="email"
            placeholder="Email"
          />
          {/* END OF EMIAL FIELD */}
          <Form.Input
            type="password"
            name="password"
            label="Password"
            placeholder="Password"
          />
        </Form.Group>
        <Button
          type="submit"
          formNoValidate
          style={{
            width: "100%",
            backgroundColor: "#5B2C5D",
            color: "white",
            marginBottom: "0.5em"
          }}
        >
          Submit
        </Button>
        <p style={{ textAlign: "center", fontSize: "0.8em" }}>
          <Link style={{ textDecoration: "none" }} to="/register">
            Don't have an account? Create one here
          </Link>
        </p>
      </Form>
    </div>
  );
};
export default Login;
Enter fullscreen mode Exit fullscreen mode

Finished UI
Screen Shot 2020-09-27 at 1.11.46 PM.png

That is all for this one, in the next ones we will start form validations on both, as there are just static at the moment. As always, let me know if you need any help. Enjoy.

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

Jetbrains image

Is Your CI/CD Server a Prime Target for Attack?

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. It makes sense—CI/CD servers have access to source code, a highly valuable asset. Is yours secure? Check out nine practical tips to protect your CI/CD.

Learn more

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay