Skip to content

Commit

Permalink
authentication
Browse files Browse the repository at this point in the history
  • Loading branch information
@zintarh
zintarh committed Apr 6, 2022
1 parent 1a67e0a commit 0c9265f
Show file tree
Hide file tree
Showing 9 changed files with 1,223 additions and 90 deletions.
731 changes: 730 additions & 1 deletion package-lock.json
View file

Large diffs are not rendered by default.

11 changes: 10 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,24 @@
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@reduxjs/toolkit": "^1.8.1",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"react": "^18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "^18.0.0",
"react-hook-form": "^7.29.0",
"react-loader-spinner": "^6.0.0-0",
"react-redux": "^7.2.8",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"react-tabs": "^4.2.0",
"web-vitals": "^2.1.4"
"react-toastify": "^8.2.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
Expand Down
6 changes: 5 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { BrowserRouter as Router, Routes, Route, } from "react-router-dom";
import SignUpAndSignUp from './pages/SignUpAndSignUp'
import UserDashboard from './pages/Dashboard'
import HomePage from './pages/HomePage'

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import './App.css';

Expand All @@ -19,6 +20,9 @@ function App() {
<Route path="/dashboard" element={<UserDashboard />} />
</Routes>
</Router>

<ToastContainer />

</>
);
}
Expand Down
10 changes: 8 additions & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import App from './App';

import configureStore from "./redux/store";

import './index.css';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
<React.StrictMode>
<App />
<Provider store={configureStore}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
Expand Down
271 changes: 194 additions & 77 deletions src/pages/Login.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,206 @@
import {React, useEffect, useState} from 'react';

import { useForm } from "react-hook-form";
import { useSelector, useDispatch } from "react-redux";
import { loginUser } from "../redux/auth/auth-comp";

import {toast} from 'react-toastify';

import 'react-toastify/dist/ReactToastify.css';

import { Spinner } from "react-bootstrap";

import authReducer from "../redux/auth/authSlice";

import * as Yup from "yup";

import { useNavigate } from "react-router-dom";

const LoginPage = () => {

toast.configure()

const navigate = useNavigate();

const {clearState} = authReducer.actions;


const { isLoading, isError, isSuccess, errorMessage } = useSelector(
(state) => state.user
);

const validationSchema = Yup.object().shape({
email: Yup.string().required("Email is required").email("Email is invalid"),
password: Yup.string().required("Password is required"),
});
const dispatch = useDispatch();
const { register, errors, handleSubmit } = useForm();

const onSubmit = async (data) => {

// try {
// let isAuth = await dispatch(loginUser(data));
// console.log(isAuth);
// const result = isAuth.payload.data.data;
// const { success } = isAuth.payload.data;
// if (success) {
// console.log(result.user);
// sessionStorage.setItem("token", result.token);
// localStorage.setItem("token", result.token);
// dispatch(loginSuccess(result.user));
// navigate("/dashboard");
// } else {
// console.log(isAuth);
// dispatch(loginFail(isAuth.payload.data));
// }
// } catch (e) {
// console.log(e);
// dispatch(loginFail(e));
// }

await dispatch(loginUser(data));

};

useEffect(() => {
if (isSuccess) {
navigate('/dashboard')
toast.success("Login Successfully");

}
if (isError) {
if(errorMessage.email){
toast.error(errorMessage.email);
dispatch(clearState());
}
if(errorMessage.password){
toast.error(errorMessage.password);
dispatch(clearState());

}
}
}, [isSuccess, isError]);



return (
<div className="form">
<form action="" className="w-full max-w-sm">
<div class="md:items-start mb-8">
<div class="">
<label
class="block text-white text-sm font-light mb-1 md:mb-0 pr-4 uppercase"
for="inline-full-name "
>
Email
</label>
</div>
<div class="w-full pt-4">
<input
class="bg-inputcolor appearance-none rounded-full border-2 border-inputcolor w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-inputcolor focus:border-secondary"
id="inline-full-name"
type="text"
/>
</div>
</div>
{console.log(errorMessage)}
<form
action=""
className="w-full max-w-sm"
onSubmit={handleSubmit(onSubmit)}
>
<div class="md:items-start mb-8">
<div class="">
<label
class="block text-white text-sm font-light mb-1 md:mb-0 pr-4 uppercase"
for="inline-full-name "
>
Email
</label>
</div>
<div class="w-full pt-4">
<input
class="bg-inputcolor appearance-none rounded-full
border-2 border-inputcolor w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-inputcolor focus:border-secondary"
id="inline-full-name"
name="emai"
{...register("email")}
type="text"
/>
</div>
</div>

<div class="md:items-start mb-8">
<div class="">
<label
class="block text-white text-sm font-light uppercase mb-1 md:mb-0 pr-4"
for="inline-full-name "
>
Password
</label>
</div>
<div class="w-full pt-4">
<input
class="bg-inputcolor appearance-none rounded-full border-2 border-inputcolor w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-inputcolor focus:border-secondary"
id="inline-full-name"
type="text"
/>
</div>
</div>
<div class="md:items-start mb-8">
<div class="">
<label
class="block text-white text-sm font-light uppercase mb-1 md:mb-0 pr-4"
for="inline-full-name "
>
Password
</label>
</div>
<div class="w-full pt-4">
<input
class="bg-inputcolor appearance-none rounded-full border-2 border-inputcolor w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-inputcolor focus:border-secondary"
id="inline-full-name"
name="password"
{...register("password")}
type="text"
/>
</div>
</div>

<div className="remember-section pt- flex justify-between">
<div className="remember-me flex justify-between">
<div className="bg-secondary h-4 w-4 rounded-sm mt-1">
<input
className="bg-secondary invisible rounded-md pt-4"
type="checkbox"
checked
name=""
id=""
/>
</div>
<p className="text-white pl-4 text-sm ">Remember me</p>
</div>
<div className="forg-pswd">
<p className="hover:underline hover:underline-offset-6">
<a href="" className="text-secondary text-sm font-light">
Forgot Password
</a>
</p>
</div>
</div>
<div className="submit-btn mt-14">
<button class="bg-secondary hover:bg-blue-700 text-white font-bold py-2 px-4 uppercase rounded-full w-full">
Sign in
</button>
</div>
</form>
<div className="divide-section flex mt-12"></div>
<div className="social-icons flex w-2/4 text-center mx-auto justify-between">
<div className="facebook border rounded-full border-secondary w-10 h-10">
<a href=" " className="text-secondary text-center mx-auto">

<i class="fa-brands fa-facebook-f text-center mx-auto py-2 px-3"></i>
</a>
</div>
<div className="google border rounded-full border-secondary w-10 h-10">
<a href="">
<i class="fa-brands fa-google text-secondary text-sm w- text-center mx-auto py-2 px-3"></i>
</a>
<div className="remember-section pt- flex justify-between">
<div className="remember-me flex justify-between">
<div className="bg-secondary h-4 w-4 rounded-sm mt-1">
<input
className="bg-secondary invisible rounded-md pt-4"
type="checkbox"
checked
name=""
id=""
/>
</div>
<p className="text-white pl-4 text-sm ">Remember me</p>
</div>
<div className="footer mt-8">
<h1 className="text-white text-center tracking-wide ">Don’t have an account? <a className="text-secondary">Register</a></h1>
<div className="forg-pswd">
<p className="hover:underline hover:underline-offset-6">
<a href="" className="text-secondary text-sm font-light">
Forgot Password
</a>
</p>
</div>
</div>


<div className="submit-btn mt-14">
<button
type="submit"
class="bg-secondary hover:bg-secondary text-white font-bold py-2 px-4 uppercase rounded-full w-full"
>
{isLoading ? (
<svg
role="status"
class="mr-2 w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-primary"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
) : (
"Sign in"
)}
</button>
</div>
</form>
<div className="divide-section flex mt-12"></div>
<div className="social-icons flex w-2/4 text-center mx-auto justify-between">
<div className="facebook border rounded-full border-secondary w-10 h-10">
<a href=" " className="text-secondary text-center mx-auto">
<i class="fa-brands fa-facebook-f text-center mx-auto py-2 px-3"></i>
</a>
</div>
<div className="google border rounded-full border-secondary w-10 h-10">
<a href="">
<i class="fa-brands fa-google text-secondary text-sm w- text-center mx-auto py-2 px-3"></i>
</a>
</div>
</div>
<div className="footer mt-8">
<h1 className="text-white text-center tracking-wide ">
Don’t have an account? <a className="text-secondary">Register</a>
</h1>
</div>
</div>
);
};

Expand Down
Loading

0 comments on commit 0c9265f

Please sign in to comment.