login and signup page for admin dashboard

src/App.js

@@ -10,6 +10,8 @@ import Resources from "../src/views/resources/resources";
 import ForgotPassword from "./views/Auth/ForgotPassword";
 import ResetPassword from "./views/Auth/ResetPassword";
 import Admin from "./views/admin/joint";
+import AdminLogin from "./views/admin/LoginForm"
+import AdminSignup from "./views/admin/SignUpForm"
 
 import { ProtectedRoute, GuestRoute } from './components/routes';
 
@@ -20,6 +22,16 @@ function App() {
     <UserProvider>
       <BrowserRouter>
         <Switch>
+          <GuestRoute exact
+            path="/admin/login"
+            name="AdminLogin"
+            component={AdminLogin}
+          />
+          <GuestRoute exact
+            path="/admin/request_access"
+            name="AdminSignup"
+            component={AdminSignup}
+          />
           <GuestRoute exact
             path="/signup"
             name="SignUpForm"

src/styles/components/_textinput.scss

@@ -286,12 +286,22 @@ input{
 /* Text area - Init */
 
 .texta-init{
-    @include border;
-    @include border-radius;
-    @include padding-sm;
-    width: 40rem;
-    height: 12.8rem;
+    border: solid thin rgba(112, 112, 112, 0.48);
+    // @include padding-sm;
+    // height: 12.8rem;
     background: transparent;
+    padding:1rem;
+    margin-bottom: 2rem;
+    ::-webkit-input-placeholder{
+        color: #fff;
+        font-size: 1rem
+    }
+    background: rgba(63, 63, 63, 0.48) 0% 0% no-repeat padding-box !important;
+}
+
+.texta-init::placeholder {
+    color: rgb(209, 209, 209, 0.69);
+    font-size: 12px;
 }
 
 .texta-actv{

src/styles/views/_admin.scss

@@ -0,0 +1,46 @@
+.auth-logo{
+    height: 60px;
+}
+
+.admin-page{
+    background-position: 0 350px !important;
+    height: 100vh
+}
+
+.admin-form{
+    border-radius: 8px !important;
+    padding: 25px !important;
+    width: 400px !important;
+
+    form{
+        margin-top: 0 !important;
+    }
+
+    input{
+        border-radius: 0 !important;
+    }
+
+    button{
+        border-radius: 0 !important;
+    }
+}
+
+.admin{
+    display: flex;
+    justify-content: center;
+
+    .logo-box{
+        display: flex;
+        justify-content: center;
+    }
+}
+
+@media (max-width: 768px) {
+    .admin-form{
+        width: auto !important;
+    }
+
+    .auth-logo{
+        margin-bottom: 30px;
+    }
+}

src/styles/views/_index.scss

@@ -2,4 +2,4 @@
 @import "./form";
 @import "./dashboard";
 @import "./home";
-
+@import "./admin"

src/views/admin/AuthPage.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Logo from "../../assets/icons/Logo.png";
+
+function AuthPage({ children }) {
+  return (
+    <div className="main-container admin-page">
+      <div className="admin">
+        <div>
+          <div className="logo-box">
+            <a href="/">
+            <img src={Logo} alt="Logo" className="auth-logo" />
+          </a></div>
+          <div className="main-body">
+            <div>{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AuthPage;

src/views/admin/LoginForm.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import Auth from "./AuthPage";
+import {signin} from "../Auth/AuthService";
+import { useHistory } from "react-router-dom";
+import { useUserContext } from "../../context/AuthContext"
+
+const LoginForm = () => {
+  const initialState = {
+    email: "",
+    password: ""
+  }
+  const [state, setState] = useState(initialState);
+  const { setToken, setUser } = useUserContext()
+  const [errorMsg, setErrorMsg] = useState(" ")
+  const [loading, setLoading] = useState(false)
+  const history = useHistory();
+
+  const [showPassword, setShowPassword] = useState(false)
+
+  const togglePassword = () => {
+    setShowPassword(!showPassword)
+  }
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    console.log(state)
+    setState({ ...state, [name]: value });
+  };
+
+  const handleSubmit = (event) => {
+    setLoading(true)
+     event.preventDefault()
+      signin(state).then((response) => {
+        if(response.data){
+          const {data} = response?.data
+          if (data.message){
+            setToken(data.token)
+            setUser(data.user)
+            history.push(`/dashboard`);
+          }
+          setLoading(false)
+        }        
+        else{
+          setErrorMsg("Could not Sign User In, Check Credentials")
+          setLoading(false)
+        }
+      });
+  };
+
+  return (
+    <Auth>
+      <div className="form-outline admin-form">
+        <div className="form-text-box">
+          <h1>Log In</h1>
+          <p>Enter your assigned SCA email address to gain access to the platform.</p>
+        </div>
+        <form className="auth-form" >
+          <div className="error-message">{errorMsg}</div>
+          <input
+            type="text"
+            id="email"
+            name="email"
+            className="input-init aaa"
+            placeholder="Enter Email Address"
+            onChange ={handleChange}
+            required
+          />
+
+        {/* <div className="password-box">
+         <input
+            type={showPassword ? 'text' : 'password'}
+            id="password"
+            name="password"
+            className="input-init aaa"
+            placeholder="Choose Password"
+            onChange={handleChange}
+            required
+          />
+          <i  style={{margin:"auto", zIndex:"2", position:"relative"}}
+              onClick={togglePassword}
+              className={showPassword ? 'fa fa-eye-slash' : 'fa fa-eye'}
+            />
+         </div> */}
+
+          <button className="btn-xl-pry-in" onClick={handleSubmit}>{loading ? <i className="fa fa-circle-o-notch fa-spin" style={{display:`${loading}`}}></i> : "LOG IN"}</button>
+          <div className="signup">
+            <p className="prompt">
+              Don't have access?
+              <a href="/admin/request_access" className="signup-link">
+                Request Access
+              </a>
+            </p>
+          </div>
+        </form>
+      </div>
+    </Auth>
+  );
+};
+
+export default LoginForm;

src/views/admin/SignUpForm.jsx

@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import Auth from "./AuthPage";
+import {signup} from "../Auth/AuthService";
+import { useHistory } from "react-router-dom";
+
+import { useUserContext } from "../../context/AuthContext";
+
+const SignUpForm = () => {
+  const initialState = {
+    email: "",
+  }
+
+  const [state, setState] = useState(initialState);
+  const { setToken, setUser } = useUserContext()
+  const [errorMsg, setErrorMsg] = useState('')
+  const history = useHistory();
+  const [loading, setLoading] = useState(false)
+
+  const [showPassword, setShowPassword] = useState(false)
+
+  const togglePassword = () => {
+    setShowPassword(!showPassword)
+  }
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setState({ ...state, [name]: value });
+  };
+
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+      setLoading(true)
+      signup(state).then((response) => {
+        if(response.data){
+          const { data } = response.data
+          if (data.message) {
+            setToken(data.token)
+            setUser(data.user)
+            history.push(`/dashboard`);
+          }
+          setLoading(false)
+        }
+        else{
+          console.log(response)
+          setErrorMsg("Could not Create Account, Check Credentials")
+          setLoading(false)
+        }
+      })
+      .catch((error) => {
+          console.log(error);
+          setLoading(false)
+          setErrorMsg(error)
+      })
+  };
+  return (
+    <Auth>
+      <div className="form-outline sign-up admin-form">
+        <div className="form-text-box">
+          <h1>Request Access</h1>
+          <p>Enter your assigned SCA email address and why you’ll like to gain access to the platform.</p>
+        </div>
+        <div className="error-message">{errorMsg}</div>
+        <form className="auth-form" >
+          <input
+            type="email"
+            id="email"
+            name="email"
+            className="input-init aaa"
+            placeholder="Enter Email Address"
+            onChange={handleChange}
+            required
+          />
+
+         {/* <div className="password-box">
+         <input
+            type={showPassword ? 'text' : 'password'}
+            id="password"
+            name="password"
+            className="input-init aaa"
+            placeholder="Choose Password"
+            onChange={handleChange}
+            required
+          />
+          <i  style={{margin:"auto", zIndex:"2", position:"relative"}}
+              onClick={togglePassword}
+              className={showPassword ? 'fa fa-eye-slash' : 'fa fa-eye'}
+            />
+         </div> */}
+
+          <textarea className="texta-init aaa" name="access" rows="4" cols="50" placeholder="Why do you want access?" onChange={handleChange}>
+
+          </textarea>
+
+          <button className="btn-xl-pry-in" onClick={handleSubmit}>{loading ? <i className="fa fa-circle-o-notch fa-spin" style={{display:`${loading}`}}></i> : "Request Access"}</button>
+
+          <div className="signup">
+            <p className="prompt">
+              Already have an account ?
+              <a href="/admin/login" className="signup-link">
+                Login
+              </a>
+            </p>
+          </div>
+        </form>
+      </div>
+    </Auth>
+  );
+};
+
+export default SignUpForm;