Merge pull request #64 from DarkFalc0n/main

Added Login/Register Page
2022-02-15 22:53:59 +05:30 · 2022-02-15 22:53:59 +05:30 · 71083a55a2
parent 4364a4dc3d d476c39720
commit 71083a55a2
14 changed files with 392 additions and 1800 deletions
--- a/frontend/components/Login/Login.jsx
+++ b/frontend/components/Login/Login.jsx
@ -0,0 +1,87 @@
+import React from 'react'
+import LoginStyle from './Login.style'
+import AccountCircleIcon from '@mui/icons-material/AccountCircle'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faUser,
+  faEnvelope,
+  faLock,
+  faClose,
+} from '@fortawesome/free-solid-svg-icons'
+import { UserContext } from '../../helpers/user/usercontext'
+import { useState } from 'react'
+import Link from 'next/link'
+import { useContext } from 'react'
+
+function Login() {
+  const [userData, setUserData] = useState({
+    email: '',
+    password: '',
+  })
+
+  const handleInput = (event) => {
+    const name = event.target.name
+    const value = event.target.value
+    setUserData({ ...userData, [name]: value })
+  }
+
+  return (
+    <LoginStyle>
+      <form className="form-wrapper">
+        <div className="reg-wide-container">
+          <FontAwesomeIcon icon={faClose} />
+        </div>
+
+        <p className="reg-title">Sign in</p>
+
+        <img
+          src="/images/user.png"
+          width={100}
+          height={100}
+          style={{ 'margin-bottom': 20 }}
+        ></img>
+
+        <div className="reg-field">
+          <div className="reg-label">
+            <FontAwesomeIcon icon={faEnvelope} />
+          </div>
+          <input
+            className="reg-input"
+            name="email"
+            autoComplete="off"
+            onChange={handleInput}
+            type="text"
+            value={userData.email}
+            placeholder="Email Address"
+          />
+        </div>
+        <div className="reg-field">
+          <div className="reg-label">
+            <FontAwesomeIcon icon={faLock} />
+          </div>
+          <input
+            className="reg-input"
+            name="password"
+            autoComplete="off"
+            onChange={handleInput}
+            type="password"
+            value={userData.password}
+            placeholder="Password"
+          />
+        </div>
+        <Link href="/">
+          <button type="submit" className="submit-button">
+            Submit
+          </button>
+        </Link>
+        <p className="foot-text">
+          New here?&nbsp;
+          <Link href="/signup" exact className="foot-text underline">
+            Create an account
+          </Link>
+        </p>
+      </form>
+    </LoginStyle>
+  )
+}
+export default Login
--- a/frontend/components/Login/Login.style.js
+++ b/frontend/components/Login/Login.style.js
@ -0,0 +1,13 @@
+import styled from "styled-components"
+
+export default styled.section`
+  display: flex;
+  justify-content:center;
+  align-items:center;
+  .content {
+    display: flex;
+    justify-content:center;
+    align-items:center;
+    flex-direction:column;
+  }
+`
--- a/frontend/components/NavBar/index.js
+++ b/frontend/components/NavBar/index.js
@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from 'react'
 import {
  Avatar,
  Box,
@ -11,48 +11,51 @@ import {
  Tooltip,
  Typography,
  alpha,
-} from "@mui/material";
-import GitHubIcon from "@mui/icons-material/GitHub";
-import MenuIcon from "@mui/icons-material/Menu";
-import NavbarStyle from "./Navbar.style";
-import Logo from "./Logo";
-
-const settings = ["Profile", "Account", "Dashboard", "Logout"];
+} from '@mui/material'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import MenuIcon from '@mui/icons-material/Menu'
+import NavbarStyle from './Navbar.style'
+import Logo from './Logo'
+import UserAuth, { UserContext } from 'helpers/user/usercontext'
+import Link from 'next/link'
+const settings = ['Profile', 'Account', 'Dashboard', 'Logout']

 function Index(props) {
-  const [anchorElNav, setAnchorElNav] = React.useState(null);
-  const [anchorElUser, setAnchorElUser] = React.useState(null);
+  const [anchorElNav, setAnchorElNav] = React.useState(null)
+  const [anchorElUser, setAnchorElUser] = React.useState(null)

  const handleOpenNavMenu = (event) => {
-    setAnchorElNav(event.currentTarget);
-  };
+    setAnchorElNav(event.currentTarget)
+  }
  const handleOpenUserMenu = (event) => {
-    setAnchorElUser(event.currentTarget);
-  };
+    setAnchorElUser(event.currentTarget)
+  }

  const handleCloseNavMenu = () => {
-    setAnchorElNav(null);
-  };
+    setAnchorElNav(null)
+  }

  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
+    setAnchorElUser(null)
+  }
+
+  const { user, login, logout } = useContext(UserAuth)

  return (
    <NavbarStyle
      position="relative"
-      sx={{ bgcolor: alpha("#000000", 0.5), m: "0px" }}
+      sx={{ bgcolor: alpha('#000000', 0.5), m: '0px' }}
    >
      <Container maxWidth="xl">
        <Toolbar disableGutters="false">
-          <Typography variant="h4" sx={{ fontWeight: "bold" }}>
+          <Typography variant="h4" sx={{ fontWeight: 'bold' }}>
            URL MINIFY
          </Typography>
          <Box
            sx={{
              flexGrow: 1,
-              flexDirection: "row-reverse",
-              display: { xs: "flex", md: "none" },
+              flexDirection: 'row-reverse',
+              display: { xs: 'flex', md: 'none' },
            }}
          >
            <IconButton
@ -69,34 +72,34 @@ function Index(props) {
              id="menu-appbar"
              anchorEl={anchorElNav}
              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "left",
+                vertical: 'bottom',
+                horizontal: 'left',
              }}
              keepMounted
              transformOrigin={{
-                vertical: "top",
-                horizontal: "left",
+                vertical: 'top',
+                horizontal: 'left',
              }}
              open={Boolean(anchorElNav)}
              onClose={handleCloseNavMenu}
              sx={{
-                display: { xs: "block", md: "none" },
+                display: { xs: 'block', md: 'none' },
              }}
            >
              <MenuItem onClick={handleCloseNavMenu}>
                <a
                  href="https://github.com/BRAVO68WEB/url-minify"
-                  target={"_blank"}
+                  target={'_blank'}
                >
-                  <Typography textAlign="center" sx={{ display: "flex" }}>
+                  <Typography textAlign="center" sx={{ display: 'flex' }}>
                    <GitHubIcon fontSize="small" />
                    GitHub
                  </Typography>
                </a>
              </MenuItem>
              <MenuItem onClick={handleCloseNavMenu}>
-                <Typography textAlign="center" sx={{ display: "flex" }}>
-                  CRIDITS
+                <Typography textAlign="center" sx={{ display: 'flex' }}>
+                  CREDITS
                </Typography>
              </MenuItem>
            </Menu>
@ -105,27 +108,27 @@ function Index(props) {
          <Box
            sx={{
              flexGrow: 1,
-              flexDirection: "row-reverse",
-              gap: "10px",
-              px: "20px",
-              display: { xs: "none", md: "flex" },
+              flexDirection: 'row-reverse',
+              gap: '10px',
+              px: '20px',
+              display: { xs: 'none', md: 'flex' },
            }}
          >
            <a
              href="https://github.com/BRAVO68WEB/url-minify"
-              target={"_blank"}
+              target={'_blank'}
            >
              <Button
                onClick={handleCloseNavMenu}
                sx={{
-                  color: "white",
-                  display: "flex",
-                  gap: "10px",
-                  fontSize: "h5.fontSize",
-                  fontFamily: "sans-serif",
-                  fontStyle: "bold",
-                  textTransform: "capitalize",
-                  fontWeight: "bold",
+                  color: 'white',
+                  display: 'flex',
+                  gap: '10px',
+                  fontSize: 'h5.fontSize',
+                  fontFamily: 'sans-serif',
+                  fontStyle: 'bold',
+                  textTransform: 'capitalize',
+                  fontWeight: 'bold',
                }}
              >
                <GitHubIcon fontSize="large" />
@ -134,49 +137,55 @@ function Index(props) {
            </a>
            <Button
              onClick={handleCloseNavMenu}
-              sx={{ color: "white", display: "block", fontSize: "h5.fontSize" }}
+              sx={{ color: 'white', display: 'block', fontSize: 'h5.fontSize' }}
            >
              CREDITS
            </Button>
          </Box>

-          <Box sx={{ flexGrow: 0 }}>
-            <Tooltip title="Open settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                <Avatar
-                  alt="Remy Sharp"
-                  src="/static/images/avatar/2.jpg"
-                  sx={{ width: 50, height: 50 }}
-                />
-              </IconButton>
-            </Tooltip>
-            <Menu
-              sx={{ mt: "45px" }}
-              id="menu-appbar"
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
-            >
-              {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">{setting}</Typography>
-                </MenuItem>
-              ))}
-            </Menu>
-          </Box>
+          {user ? (
+            <Box sx={{ flexGrow: 0 }}>
+              <Tooltip title="Open settings">
+                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                  <Avatar
+                    alt="Remy Sharp"
+                    src="/static/images/avatar/2.jpg"
+                    sx={{ width: 50, height: 50 }}
+                  />
+                </IconButton>
+              </Tooltip>
+              <Menu
+                sx={{ mt: '45px' }}
+                id="menu-appbar"
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
+              >
+                {settings.map((setting) => (
+                  <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                    <Typography textAlign="center">{setting}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+          ) : (
+            <Typography onClick={login}>
+              <Link href="./login">LOGIN</Link>
+            </Typography>
+          )}
        </Toolbar>
      </Container>
    </NavbarStyle>
-  );
+  )
 }

-export default Index;
+export default Index
--- a/frontend/components/Reg/Reg.jsx
+++ b/frontend/components/Reg/Reg.jsx
@ -1,29 +1,29 @@
-import React from "react";
-import RegStyle from "./Reg.style";
-import Image from "next/image";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from 'react'
+import RegStyle from './Reg.style'
+import Image from 'next/image'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
  faUser,
  faEnvelope,
  faLock,
  faClose,
-} from "@fortawesome/free-solid-svg-icons";
-import { useState } from "react";
-import { Link } from "@mui/material";
+} from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
+import { Link } from '@mui/material'

 function Reg() {
  const [userData, setUserData] = useState({
-    username: "",
-    email: "",
-    password: "",
-    repassword: "",
-  });
+    username: '',
+    email: '',
+    password: '',
+    repassword: '',
+  })

  const handleInput = (event) => {
-    const name = event.target.name;
-    const value = event.target.value;
-    setUserData({ ...userData, [name]: value });
-  };
+    const name = event.target.name
+    const value = event.target.value
+    setUserData({ ...userData, [name]: value })
+  }

  return (
    <RegStyle>
@ -94,12 +94,12 @@ function Reg() {
        </button>
        <p className="foot-text">
          Already registered? Login&nbsp;
-          <Link href="/" exact className="foot-text underline">
+          <Link href="/login" exact className="foot-text underline">
            here
          </Link>
        </p>
      </form>
    </RegStyle>
-  );
+  )
 }
-export default Reg;
+export default Reg
--- a/frontend/helpers/user/usercontext.js
+++ b/frontend/helpers/user/usercontext.js
@ -0,0 +1,24 @@
+import { createContext } from "react";
+import { useState } from "react";
+
+const UserAuth = createContext({
+  user: null,
+  login: () => {},
+  logout: () => {},
+});
+
+export const UserAuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const login = () => {
+    setUser("default");
+  };
+
+  const logout = () => {
+    setUser(null);
+  };
+  const context = { user, login, logout };
+
+  return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>;
+};
+
+export default UserAuth;
--- a/frontend/jsconfig.json
+++ b/frontend/jsconfig.json
@ -1,5 +1,6 @@
 {
  "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": { "@pages/*": ["pages/*"] }
  }
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -18,7 +18,7 @@
    "@mui/icons-material": "^5.3.1",
    "@mui/material": "^5.4.0",
    "@mui/styled-engine-sc": "^5.3.0",
-    "axios": "^0.25.0",
+    "axios": "^0.26.0",
    "nanoid": "^3.2.0",
    "next": "12.0.9",
    "react": "17.0.2",
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@ -1,9 +1,14 @@
-import "../styles/globals.css";
-import "../styles/logostyles.css";
-import "../components/Reg/styles.css";
+import '../styles/globals.css'
+import '../styles/logostyles.css'
+import '../styles/styles.css'
+import { UserAuthProvider } from '../helpers/user/usercontext'

 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <UserAuthProvider>
+      <Component {...pageProps} />
+    </UserAuthProvider>
+  )
 }

-export default MyApp;
+export default MyApp
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@ -1,20 +1,21 @@
-import React, { useState } from "react";
-import Head from "next/head";
-import HomeSection from "components/HomeSection/homeSection";
-import NavBar from "components/NavBar";
-import Features from "components/Features";
+import React, { useState } from 'react'
+import Head from 'next/head'
+import HomeSection from 'components/HomeSection/homeSection'
+import NavBar from 'components/NavBar'
+import Features from 'components/Features'

 export default function Home() {
-  const [shortUrl, setShortUrl] = useState(null);
-  const [longUrl, setLongUrl] = useState("");
+  const [shortUrl, setShortUrl] = useState(null)
+  const [longUrl, setLongUrl] = useState('')
+
  return (
-    <div className={""}>
+    <>
      <Head>
        <title>URL MiniFy</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

-      <main className={"main-bg"}>
+      <main className={'main-bg'}>
        <NavBar />
        <HomeSection
          shortUrl={shortUrl}
@ -24,6 +25,6 @@ export default function Home() {
        />
        <Features />
      </main>
-    </div>
-  );
+    </>
+  )
 }
--- a/frontend/pages/login.js
+++ b/frontend/pages/login.js
@ -0,0 +1,14 @@
+import { useState } from "react";
+import Head from "next/head";
+import NavBar from "components/NavBar";
+import Features from "components/Features";
+import Login from "components/Login/Login";
+
+export default function signup() {
+  return (
+    <div className="flex-column">
+      <NavBar />
+      <Login />
+    </div>
+  );
+}
--- a/frontend/public/images/user.png
+++ b/frontend/public/images/user.png
--- a/frontend/styles/styles.css
+++ b/frontend/styles/styles.css
@ -0,0 +1,107 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap");
+
+.reg-label {
+  font-size: 24px;
+  width: 30px;
+  color: #9134bd;
+  position: relative;
+}
+.reg-title {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  font-size: 36px;
+  text-align: center;
+  margin-bottom: 40px;
+  color: #9134bd;
+}
+.reg-wide-container {
+  width: 100%;
+  text-align: right;
+  color: #9134bd;
+  font-size: 24px;
+}
+.reg-input {
+  margin-left: 10px;
+  height: 35px;
+  width: 340px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  border-radius: 20px;
+  padding: 10px;
+  border: none;
+  justify-content: flex-end;
+  color: #9134bd;
+}
+.reg-input:active,
+.reg-input:focus {
+  outline: none;
+}
+.reg-input::placeholder {
+  color: #6babc7;
+}
+.reg-field {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.form-wrapper {
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 20px 30px 40px 30px;
+  border-radius: 20px;
+  font-size: 24px;
+  text-align: center;
+  backdrop-filter: blur(6px);
+  border-style: solid;
+  border-color: #f1faff;
+  border-width: 1px 0px 0px 1px;
+  margin-top: 0;
+}
+.submit-button {
+  width: 100px;
+  height: 40px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  border-radius: 10px;
+  border: none;
+  margin-top: 20px;
+  background-image: linear-gradient(135deg, #cc5fff, #7e3ee4, #0087ca, #2db9ff);
+  background-size: 200%;
+  background-position: left;
+  color: white;
+  transition: 0.5s;
+}
+.submit-button:hover {
+  background-position: right;
+}
+.submit-button:active {
+  transform: scale(0.95);
+  transition: 0.1s;
+}
+
+.icon {
+  fill: black;
+}
+
+.foot-text {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  margin-top: 50px;
+  color: black;
+  text-decoration: none;
+}
+
+.underline {
+  text-decoration: underline;
+  color: #9134bd;
+}
+
+.underline:hover {
+  color: #008ed4;
+  transition: 0.5s;
+}
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -501,12 +501,12 @@ ansi-styles@^3.2.1:
  dependencies:
    color-convert "^1.9.0"

-axios@^0.25.0:
-  version "0.25.0"
-  resolved "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz"
-  integrity sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==
+axios@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.0.tgz#9a318f1c69ec108f8cd5f3c3d390366635e13928"
+  integrity sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
  dependencies:
-    follow-redirects "^1.14.7"
+    follow-redirects "^1.14.8"

 babel-plugin-macros@^2.6.1:
  version "2.8.0"
@ -647,9 +647,9 @@ find-root@^1.1.0:
  resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==

-follow-redirects@^1.14.7:
+follow-redirects@^1.14.8:
  version "1.14.8"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
  integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==

 function-bind@^1.1.1: