fix(auth): ability to manage role

src/Pages/Auth/Mobile/AccountBox.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { LoginForm } from "./loginForm";
+import { AccountContext } from "./accountContext";
+import { SignupForm } from "./signupForm";
+import {BoxContainer, TopContainer, HeaderContainer,
+        BackDrop, InnerContainer, HeaderText, SmallText} from "../../../Layout/Auth/styledAuth";
+
+const backdropVariants = {
+  expanded: {
+    width: "233%",
+    height: "1050px",
+    borderRadius: "20%",
+    transform: "rotate(60deg)",
+  },
+  collapsed: {
+    width: "160%",
+    height: "550px",
+    borderRadius: "50%",
+    transform: "rotate(60deg)",
+  },
+};
+
+const expandingTransition = {
+  type: "spring",
+  duration: 2.3,
+  stiffness: 30,
+};
+
+const AccountBox = () => {
+  const [isExpanded, setExpanded] = useState(false);
+  const [active, setActive] = useState("signin");
+
+  const playExpandingAnimation = () => {
+    setExpanded(true);
+    setTimeout(() => {
+      setExpanded(false);
+    }, expandingTransition.duration * 1000 - 1500);
+  };
+
+  const switchToSignup = () => {
+    playExpandingAnimation();
+    setTimeout(() => {
+      setActive("signup");
+    }, 400);
+  };
+
+  const switchToSignin = () => {
+    playExpandingAnimation();
+    setTimeout(() => {
+      setActive("signin");
+    }, 400);
+  };
+
+  const contextValue = { switchToSignup, switchToSignin };
+
+  return (
+    <AccountContext.Provider value={contextValue}>
+      <BoxContainer>
+        <TopContainer>
+          <BackDrop
+            initial={false}
+            animate={isExpanded ? "expanded" : "collapsed"}
+            variants={backdropVariants}
+            transition={expandingTransition}
+          />
+          {active === "signin" && (
+            <HeaderContainer>
+              <HeaderText>Welcome</HeaderText>
+              <HeaderText>Back</HeaderText>
+              <SmallText>Please sign-in to continue!</SmallText>
+            </HeaderContainer>
+          )}
+          {active === "signup" && (
+            <HeaderContainer>
+              <HeaderText>Create</HeaderText>
+              <HeaderText>Account</HeaderText>
+              <SmallText>Please sign-up to continue!</SmallText>
+            </HeaderContainer>
+          )}
+        </TopContainer>
+        <InnerContainer>
+          {active === "signin" && <LoginForm />}
+          {active === "signup" && <SignupForm />}
+        </InnerContainer>
+      </BoxContainer>
+    </AccountContext.Provider>
+  );
+}
+
+export default AccountBox;

src/Pages/Auth/Mobile/accountContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const AccountContext = createContext();

src/Pages/Auth/Mobile/loginForm.jsx

@@ -0,0 +1,35 @@
+import React, { useContext } from "react";
+import {
+  BoldLink,
+  BoxContainer,
+  FormContainer,
+  Input,
+  MutedLink,
+  SubmitButton,
+} from "../../../Layout/Auth/styledCommon";
+import { Marginer } from "./marginer";
+import { AccountContext } from "./accountContext";
+
+export function LoginForm() {
+  const { switchToSignup } = useContext(AccountContext);
+
+  return (
+    <BoxContainer>
+      <FormContainer>
+        <Input type="email" placeholder="Email" />
+        <Input type="password" placeholder="Password" />
+      </FormContainer>
+      <Marginer direction="vertical" margin={10} />
+      <MutedLink href="#">Forget your password?</MutedLink>
+      <Marginer direction="vertical" margin="1.6em" />
+      <SubmitButton type="submit">Signin</SubmitButton>
+      <Marginer direction="vertical" margin="1em" />
+      <MutedLink href="#">
+        Don't have an accoun?{" "}
+        <BoldLink href="#" onClick={switchToSignup}>
+          Signup
+        </BoldLink>
+      </MutedLink>
+    </BoxContainer>
+  );
+}

src/Pages/Auth/Mobile/marginer.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "styled-components";
+
+const HorizontalMargin = styled.span`
+  display: flex;
+  width: ${({ margin }) =>
+    typeof margin === "string" ? margin : `${margin}px`};
+`;
+
+const VerticalMargin = styled.span`
+  display: flex;
+  height: ${({ margin }) =>
+    typeof margin === "string" ? margin : `${margin}px`};
+`;
+
+function Marginer(props) {
+  const { direction } = props;
+
+  if (direction === "horizontal") return <HorizontalMargin {...props} />;
+  else {
+    return <VerticalMargin {...props} />;
+  }
+}
+
+Marginer.defaultProps = {
+  direction: "horizontal",
+};
+
+export { Marginer };

src/Pages/Auth/Mobile/signupForm.jsx

@@ -0,0 +1,35 @@
+import React, { useContext } from "react";
+import {
+  BoldLink,
+  BoxContainer,
+  FormContainer,
+  Input,
+  MutedLink,
+  SubmitButton,
+} from "../../../Layout/Auth/styledCommon";
+import { Marginer } from "./marginer";
+import { AccountContext } from "./accountContext";
+
+export function SignupForm() {
+  const { switchToSignin } = useContext(AccountContext);
+
+  return (
+    <BoxContainer>
+      <FormContainer>
+        <Input type="text" placeholder="Full Name" />
+        <Input type="email" placeholder="Email" />
+        <Input type="password" placeholder="Password" />
+        <Input type="password" placeholder="Confirm Password" />
+      </FormContainer>
+      <Marginer direction="vertical" margin={10} />
+      <SubmitButton type="submit">Signup</SubmitButton>
+      <Marginer direction="vertical" margin="1em" />
+      <MutedLink href="#">
+        Already have an account?
+        <BoldLink href="#" onClick={switchToSignin}>
+          Signin
+        </BoldLink>
+      </MutedLink>
+    </BoxContainer>
+  );
+}

src/Pages/Auth/login.css

@@ -9,7 +9,8 @@
   margin: auto;
   width: 100%;
   text-align: center;
-  height: auto;
+  /* height: auto; */
+  height: 100vh;
 }
 
 .login-page h2 {
@@ -40,7 +41,7 @@
 
 .login-page form input::placeholder {
   padding-left: 10px;
-  font-size: 0.75rem;
+  font-size: 1.75rem;
 }
 
 .login-page form .row {
@@ -79,7 +80,7 @@
   float: left;
   padding: 0;
   font-weight: bold;
-  font-size: 0.9rem;
+  font-size: 1.9rem;
 }
 
 #login-page-container .brand {
@@ -97,7 +98,7 @@
     width: 40%;
   }
   .login-page h2 {
-    font-size: 2rem;
+    font-size: 3rem;
     margin: 30px auto;
   }
 }

src/Pages/Auth/login.jsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 
 import { GlobalState } from '../../GlobalState';
 import "./login.css";
+import Logo from "../../Assets/Images/newLogo.png";
 
 const Login = () => {
   const state = useContext(GlobalState)
@@ -31,7 +32,8 @@ const Login = () => {
 		<div id="login-page-container">
 			<div className="login-page">
 				<Link to="/">
-                    <img className="brand" src="https://i.imgur.com/xycLsso.png" alt="brand-name" />
+                    <img className="brand" src={Logo} alt="brand-name" />
+                    {/* <img className="brand" src="https://i.imgur.com/xycLsso.png" alt="brand-name" /> */}
 				</Link>
 				<form onSubmit={loginSubmit}>
 					<h2 className="login-title">Sign in to your account</h2>

src/Pages/Auth/register.jsx

@@ -4,12 +4,16 @@ import axios from "axios";
 import { Link } from "react-router-dom";
 
 import "./login.css";
+import Logo from "../../Assets/Images/newLogo.png";
 
 const Register = () => {
+  const [showRole, setShowRole] = useState(false);
+  const [secret, setSecret] = useState("");
 	const [user, setUser] = useState({
 		name: "",
 		email: "",
 		password: "",
+		role: 0
 	});
 
 	const onChangeInput = (e) => {
@@ -30,13 +34,15 @@ const Register = () => {
 		}
 	};
 
-	const {name, email, password} = user
+  const updateRole = () => {
+      setShowRole(true);
+  }
+
+	const {name, email, password, role} = user;
 	return (
 		<div id="login-page-container">
 			<div className="login-page">
-				<Link to="/">
-					<img className="brand" src="https://i.imgur.com/xycLsso.png" alt="brand-name" />
-				</Link>
+        <img onClick={updateRole} className="brand" src={Logo} alt="brand-name" />
 				<form onSubmit={registerSubmit}>
 					<h2>Registration</h2>
 					<label htmlFor="name">Name</label>
@@ -70,6 +76,42 @@ const Register = () => {
 						value={password}
 						onChange={onChangeInput}
 					/>
+          {
+            showRole === true ?
+            <>
+              <label htmlFor="secret">Secret</label>
+              <input
+                type="text"
+                name="secret"
+                id="secret"
+                required
+                autoComplete="on"
+                placeholder="Shhh...."
+                value={secret}
+                onInput={e => setSecret(e.target.value)}
+                />
+              </>
+            :
+            null
+          }
+          {
+            secret === "ifyouknowyouknow" ?
+            <>
+            <label htmlFor="role">Role</label>
+            <input
+              type="number"
+              name="role"
+              id="role"
+              required
+              autoComplete="on"
+              placeholder="role"
+              value={role}
+              onChange={onChangeInput}
+              />
+            </>
+            :
+            null
+          }
 
 					<div className="row">
 						<button type="submit">Register</button>