Skip to content

Commit e6a4c46

Browse files
abhishekrathoreabhishekrathore
committed
Part 2 : Added Routing (Login/Signup done)
1 parent 1c5f2cd commit e6a4c46

File tree

9 files changed

+334
-1
lines changed

9 files changed

+334
-1
lines changed

‎package-lock.json‎

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
1616
"react-redux": "^8.0.5",
17+
"react-router-dom": "^6.10.0",
1718
"react-scripts": "5.0.1",
1819
"tailwindcss": "^3.3.2",
1920
"web-vitals": "^2.1.4"

‎src/App.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,35 @@
11
import { Counter } from './features/counter/Counter';
22
import './App.css';
33
import Home from './pages/Home';
4+
import LoginPage from './pages/LoginPage';
5+
import SignupPage from './pages/SignupPage';
6+
7+
import {
8+
createBrowserRouter,
9+
RouterProvider,
10+
Route,
11+
Link,
12+
} from 'react-router-dom';
13+
14+
const router = createBrowserRouter([
15+
{
16+
path: '/',
17+
element: <Home></Home>,
18+
},
19+
{
20+
path: '/login',
21+
element: <LoginPage></LoginPage>,
22+
},
23+
{
24+
path: '/signup',
25+
element: <SignupPage></SignupPage>,
26+
},
27+
]);
428

529
function App() {
630
return (
731
<div className="App">
8-
<Home></Home>
32+
<RouterProvider router={router} />
933
</div>
1034
);
1135
}

‎src/features/auth/authAPI.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export function fetchCount(amount = 1) {
2+
return new Promise(async (resolve) =>{
3+
const response = await fetch('http://localhost:8080')
4+
const data = await response.json()
5+
resolve({data})
6+
}
7+
);
8+
}

‎src/features/auth/authSlice.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
2+
import { fetchCount } from './authAPI';
3+
4+
const initialState = {
5+
value: 0,
6+
status: 'idle',
7+
};
8+
9+
export const incrementAsync = createAsyncThunk(
10+
'counter/fetchCount',
11+
async (amount) => {
12+
const response = await fetchCount(amount);
13+
// The value we return becomes the `fulfilled` action payload
14+
return response.data;
15+
}
16+
);
17+
18+
export const counterSlice = createSlice({
19+
name: 'counter',
20+
initialState,
21+
reducers: {
22+
increment: (state) => {
23+
state.value += 1;
24+
},
25+
},
26+
extraReducers: (builder) => {
27+
builder
28+
.addCase(incrementAsync.pending, (state) => {
29+
state.status = 'loading';
30+
})
31+
.addCase(incrementAsync.fulfilled, (state, action) => {
32+
state.status = 'idle';
33+
state.value += action.payload;
34+
});
35+
},
36+
});
37+
38+
export const { increment } = counterSlice.actions;
39+
40+
export const selectCount = (state) => state.counter.value;
41+
42+
export default counterSlice.reducer;

‎src/features/auth/components/Login.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React, { useState } from 'react';
2+
import { useSelector, useDispatch } from 'react-redux';
3+
import {
4+
increment,
5+
incrementAsync,
6+
selectCount,
7+
} from '../authSlice';
8+
import { Link } from 'react-router-dom';
9+
10+
export default function Login() {
11+
const count = useSelector(selectCount);
12+
const dispatch = useDispatch();
13+
14+
15+
return (
16+
<>
17+
18+
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
19+
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
20+
<img
21+
className="mx-auto h-10 w-auto"
22+
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
23+
alt="Your Company"
24+
/>
25+
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
26+
Log in to your account
27+
</h2>
28+
</div>
29+
30+
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
31+
<form className="space-y-6" action="#" method="POST">
32+
<div>
33+
<label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
34+
Email address
35+
</label>
36+
<div className="mt-2">
37+
<input
38+
id="email"
39+
name="email"
40+
type="email"
41+
autoComplete="email"
42+
required
43+
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
44+
/>
45+
</div>
46+
</div>
47+
48+
<div>
49+
<div className="flex items-center justify-between">
50+
<label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
51+
Password
52+
</label>
53+
<div className="text-sm">
54+
<a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500">
55+
Forgot password?
56+
</a>
57+
</div>
58+
</div>
59+
<div className="mt-2">
60+
<input
61+
id="password"
62+
name="password"
63+
type="password"
64+
autoComplete="current-password"
65+
required
66+
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
67+
/>
68+
</div>
69+
</div>
70+
71+
<div>
72+
<button
73+
type="submit"
74+
className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
75+
>
76+
Log in
77+
</button>
78+
</div>
79+
</form>
80+
81+
<p className="mt-10 text-center text-sm text-gray-500">
82+
Not a member?{' '}
83+
<Link to="/signup" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
84+
Create an Account
85+
</Link>
86+
</p>
87+
</div>
88+
</div>
89+
</>
90+
);
91+
}

‎src/features/auth/components/Signup.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React, { useState } from 'react';
2+
import { useSelector, useDispatch } from 'react-redux';
3+
import {
4+
increment,
5+
incrementAsync,
6+
selectCount,
7+
} from '../authSlice';
8+
import { Link } from 'react-router-dom';
9+
10+
export default function Signup() {
11+
const count = useSelector(selectCount);
12+
const dispatch = useDispatch();
13+
14+
15+
return (
16+
<>
17+
18+
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
19+
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
20+
<img
21+
className="mx-auto h-10 w-auto"
22+
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
23+
alt="Your Company"
24+
/>
25+
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
26+
Create a New Account
27+
</h2>
28+
</div>
29+
30+
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
31+
<form className="space-y-6" action="#" method="POST">
32+
<div>
33+
<label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
34+
Email address
35+
</label>
36+
<div className="mt-2">
37+
<input
38+
id="email"
39+
name="email"
40+
type="email"
41+
autoComplete="email"
42+
required
43+
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
44+
/>
45+
</div>
46+
</div>
47+
48+
<div>
49+
<div className="flex items-center justify-between">
50+
<label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
51+
Password
52+
</label>
53+
<div className="text-sm">
54+
<a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500">
55+
Forgot password?
56+
</a>
57+
</div>
58+
</div>
59+
<div className="mt-2">
60+
<input
61+
id="password"
62+
name="password"
63+
type="password"
64+
autoComplete="current-password"
65+
required
66+
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
67+
/>
68+
</div>
69+
</div>
70+
71+
<div>
72+
<div className="flex items-center justify-between">
73+
<label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
74+
Confirm Password
75+
</label>
76+
77+
</div>
78+
<div className="mt-2">
79+
<input
80+
id="confirm-password"
81+
name="confirm-password"
82+
type="password"
83+
required
84+
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
85+
/>
86+
</div>
87+
</div>
88+
89+
<div>
90+
<button
91+
type="submit"
92+
className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
93+
>
94+
Sign Up
95+
</button>
96+
</div>
97+
</form>
98+
99+
<p className="mt-10 text-center text-sm text-gray-500">
100+
Already a Member?{' '}
101+
<Link to="/login" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
102+
Log In
103+
</Link>
104+
</p>
105+
</div>
106+
</div>
107+
</>
108+
);
109+
}

‎src/pages/LoginPage.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Login from "../features/auth/components/Login";
2+
function LoginPage() {
3+
return ( <div>
4+
<Login></Login>
5+
</div> );
6+
}
7+
8+
export default LoginPage;

‎src/pages/SignupPage.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Signup from "../features/auth/components/Signup";
2+
3+
function SignupPage() {
4+
return (
5+
<div>
6+
<Signup></Signup>
7+
</div>
8+
);
9+
}
10+
11+
export default SignupPage;

0 commit comments

Comments
 (0)