Skip to content

Commit 88202ff

Browse files
signup ui+ login ui+ page telling to wait for emai
1 parent abf5a4d commit 88202ff

File tree

7 files changed

+251
-22
lines changed

7 files changed

+251
-22
lines changed

client/src/App.jsx

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1-
2-
31
import {BrowserRouter, Routes, Route} from "react-router-dom"
42
import Home from "./components/Home"
5-
import Login from "./components/Login"
63
import Dashboard from "./components/Dashboard"
74
import Navbar from "./components/Navbar";
85
import Landingpage from "./components/Landingpage";
96
import About from "./components/About";
107
import Team from "./components/Team";
118
import Studyplanner from "./components/Studyplanner";
129
import Features from "./components/Features";
13-
1410
import Uploadnote from "./components/Uploadnote";
15-
1611
import Anythingmore from "./components/Anythingmore";
1712
import Uploadn from "./components/Uploadn";
1813
import Aibot from "./components/Aibot";
@@ -21,6 +16,8 @@ import Uploads from "./components/Uploads";
2116
import Sortedpyq from "./components/Sortedpyq";
2217
import Generalpyq from "./components/Generalpyq";
2318
import Repetitivepyq from "./components/Repetitivepyq";
19+
import Auth from "./components/Auth";
20+
import Wait from "./components/Wait";
2421

2522
function App() {
2623
return (
@@ -29,31 +26,28 @@ function App() {
2926
<Routes>
3027
<Route path="/" element={<Landingpage/>} />
3128
<Route path="/home" element={<Home/>} />
32-
<Route path="/dashboard" element={<Dashboard/>} />
33-
29+
<Route path="/dashboard" element={<Dashboard/>} />
3430
<Route path="/Navbar" element={<Navbar/>} />
3531

3632
<Route path="/landing" element={<Landingpage/>} />
3733
<Route path="/about" element={<About/>} />
3834
<Route path="/team" element={<Team/>} />
3935
<Route path="/studyplanner" element={<Studyplanner/>} />
4036
<Route path="/features" element={<Features/>} />
41-
<Route path="/login" element={<Login/>} />
42-
43-
44-
45-
<Route path="/uploadnote" element={<Uploadnote/>} />
46-
37+
<Route path="/login" element={<Auth />} />
38+
39+
<Route path="/uploadnote" element={<Uploadnote/>} />
4740
<Route path="/anythingmore" element={<Anythingmore/>} />
4841
<Route path="/uploadn" element={<Uploadn/>} />
4942
<Route path="/uploadp" element={<Uploadp/>} />
5043
<Route path="/uploads" element={<Uploads/>} />
5144

52-
5345
<Route path="/aibot" element={<Aibot/>} />
5446
<Route path="/sortedpyq" element={<Sortedpyq/>} />
5547
<Route path="/generalpyq" element={<Generalpyq/>} />
5648
<Route path="/repetitivepyq" element={<Repetitivepyq/>} />
49+
<Route path="/signup" element={<Auth />} />
50+
<Route path="/wait" element={<Wait />} />
5751

5852
</Routes>
5953
</BrowserRouter>
1010 KB
Binary file not shown.

client/src/components/Anythingmore.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,10 @@ function Anythingmore() {
7676
Submit
7777
</button>
7878
{apiError && <p className="text-red-500"></p>}
79-
<Link to="/dashboard">
79+
<Link to="/wait">
8080
<button className="bg-violet-900 text-white py-2 px-6 rounded-lg">Finish</button>
8181
</Link>
82+
8283
</div>
8384
);
8485
}

client/src/components/Auth.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { useState } from 'react';
2+
import Login from './Login';
3+
import SignUp from './SignUp';
4+
5+
const Auth = () => {
6+
const [isLogin, setIsLogin] = useState(true);
7+
8+
const toggleAuthMode = () => {
9+
setIsLogin((prevMode) => !prevMode);
10+
};
11+
12+
return (
13+
<div>
14+
{isLogin ? (
15+
<Login toggleAuthMode={toggleAuthMode} />
16+
) : (
17+
<SignUp toggleAuthMode={toggleAuthMode} />
18+
)}
19+
</div>
20+
);
21+
};
22+
23+
export default Auth;

client/src/components/Login.jsx

Lines changed: 56 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,62 @@
1-
import React from 'react'
1+
import React, { useState } from 'react';
2+
3+
const Login = () => {
4+
const [email, setEmail] = useState('');
5+
const [password, setPassword] = useState('');
6+
7+
const handleLogin = (event) => {
8+
event.preventDefault();
9+
10+
// Perform login authentication here
11+
if (email && password) {
12+
alert(`Logging in with email: ${email}`);
13+
setEmail('');
14+
setPassword('');
15+
} else {
16+
alert('Please enter a valid email and password');
17+
}
18+
};
219

3-
function Login() {
420
return (
5-
<div>
6-
<h1 className='text-center'>Login</h1>
21+
<div className="flex flex-col items-center justify-center h-screen">
22+
<h1 className="text-3xl font-bold mb-8">Login</h1>
23+
<form
24+
onSubmit={handleLogin}
25+
className="flex flex-col items-center space-y-4"
26+
>
27+
<label htmlFor="email" className="text-lg">
28+
Email:
29+
</label>
30+
<input
31+
type="email"
32+
id="email"
33+
required
34+
value={email}
35+
onChange={(e) => setEmail(e.target.value)}
36+
className="border rounded-lg px-4 py-2 w-64"
37+
/>
738

39+
<label htmlFor="password" className="text-lg">
40+
Password:
41+
</label>
42+
<input
43+
type="password"
44+
id="password"
45+
required
46+
value={password}
47+
onChange={(e) => setPassword(e.target.value)}
48+
className="border rounded-lg px-4 py-2 w-64"
49+
/>
850

51+
<button
52+
type="submit"
53+
className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
54+
>
55+
Login
56+
</button>
57+
</form>
958
</div>
10-
)
11-
}
59+
);
60+
};
1261

13-
export default Login
62+
export default Login;

client/src/components/SignUp.jsx

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React, { useState } from 'react';
2+
import { motion } from 'framer-motion';
3+
4+
const SignUp = () => {
5+
const [email, setEmail] = useState('');
6+
const [password, setPassword] = useState('');
7+
const [confirmPassword, setConfirmPassword] = useState('');
8+
9+
const handleSignUp = (event) => {
10+
event.preventDefault();
11+
12+
if (password !== confirmPassword) {
13+
alert('Password and Confirm Password do not match');
14+
return;
15+
}
16+
17+
const user = {
18+
email,
19+
password
20+
};
21+
22+
saveUser(user);
23+
24+
alert('Sign up successful');
25+
26+
setEmail('');
27+
setPassword('');
28+
setConfirmPassword('');
29+
};
30+
31+
const saveUser = (user) => {
32+
console.log('User data:', user);
33+
};
34+
35+
return (
36+
<div className="flex flex-col items-center justify-center h-screen">
37+
<motion.h1
38+
className="text-3xl font-bold mb-8"
39+
initial={{ opacity: 0, y: -20 }}
40+
animate={{ opacity: 1, y: 0 }}
41+
transition={{ duration: 0.5 }}
42+
>
43+
Sign Up
44+
</motion.h1>
45+
<form
46+
onSubmit={handleSignUp}
47+
className="flex flex-col items-center space-y-4"
48+
>
49+
<label htmlFor="email" className="text-lg">
50+
Email:
51+
</label>
52+
<input
53+
type="email"
54+
id="email"
55+
required
56+
value={email}
57+
onChange={(e) => setEmail(e.target.value)}
58+
className="border rounded-lg px-4 py-2 w-64"
59+
/>
60+
61+
<label htmlFor="password" className="text-lg">
62+
Password:
63+
</label>
64+
<input
65+
type="password"
66+
id="password"
67+
required
68+
value={password}
69+
onChange={(e) => setPassword(e.target.value)}
70+
className="border rounded-lg px-4 py-2 w-64"
71+
/>
72+
73+
<label htmlFor="confirm-password" className="text-lg">
74+
Confirm Password:
75+
</label>
76+
<input
77+
type="password"
78+
id="confirm-password"
79+
required
80+
value={confirmPassword}
81+
onChange={(e) => setConfirmPassword(e.target.value)}
82+
className="border rounded-lg px-4 py-2 w-64"
83+
/>
84+
85+
<motion.button
86+
type="submit"
87+
className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
88+
whileHover={{ scale: 1.05 }}
89+
whileTap={{ scale: 0.95 }}
90+
>
91+
Sign Up
92+
</motion.button>
93+
</form>
94+
</div>
95+
);
96+
};
97+
98+
export default SignUp;

client/src/components/Wait.jsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
import Lottie from 'lottie-react';
4+
import animationData from '../assets/95241-uploading.json';
5+
6+
const Wait = () => {
7+
const quotes = [
8+
"Patience is not the ability to wait, but the ability to keep a good attitude while waiting.",
9+
"The two most powerful warriors are patience and time.",
10+
"Wait for the right moment.",
11+
"Good things come to those who wait.",
12+
"Trust the process.",
13+
];
14+
15+
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
16+
17+
const handleOpenGmail = () => {
18+
window.open('https://mail.google.com/', '_blank');
19+
};
20+
21+
return (
22+
<div className="flex flex-col items-center justify-center h-screen w-screen bg-gray-100">
23+
<motion.h1
24+
initial={{ opacity: 0, y: -20 }}
25+
animate={{ opacity: 1, y: 0 }}
26+
transition={{ duration: 0.8 }}
27+
className="text-4xl font-bold mb-4"
28+
>
29+
<Lottie animationData={animationData} className='h-16'/>
30+
Program is under process
31+
</motion.h1>
32+
33+
<motion.p
34+
initial={{ opacity: 0, y: 20 }}
35+
animate={{ opacity: 1, y: 0 }}
36+
transition={{ duration: 0.8 }}
37+
className="text-lg text-gray-600 text-center mb-8"
38+
>
39+
We will get back to you soon. Please check your email.
40+
</motion.p>
41+
42+
<motion.p
43+
initial={{ opacity: 0, y: 20 }}
44+
animate={{ opacity: 1, y: 0 }}
45+
transition={{ duration: 0.8 }}
46+
className="text-lg text-gray-600 text-center mb-8"
47+
>
48+
{randomQuote}
49+
</motion.p>
50+
51+
<motion.button
52+
initial={{ opacity: 0, scale: 0 }}
53+
animate={{ opacity: 1, scale: 1 }}
54+
transition={{ duration: 0.8, delay: 0.2 }}
55+
className="bg-blue-500 text-white rounded px-4 py-2 hover:bg-blue-600"
56+
onClick={handleOpenGmail}
57+
>
58+
Open Gmail
59+
</motion.button>
60+
</div>
61+
);
62+
};
63+
64+
export default Wait;

0 commit comments

Comments
 (0)