Skip to content

Commit 9fd666f

Browse files
priyam-03priyam-03
authored
Merge pull request #63 from RohithNair27/Login-and-signup-ui
Login and signup UI
2 parents dfe24bc + 22c87fd commit 9fd666f

File tree

4 files changed

+363
-257
lines changed

4 files changed

+363
-257
lines changed

‎frontend/src/screens/LoginScreen.js‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const LoginScreen = () => {
1212
const dispatch = useDispatch();
1313
const { register, handleSubmit } = useForm();
1414
const navigate = useNavigate();
15-
15+
1616
useEffect(() => {
1717
if (userInfo) {
1818
navigate("/");
@@ -25,14 +25,22 @@ const LoginScreen = () => {
2525

2626
return (
2727
<div className={styles.loginBody}>
28+
<section className={styles.registerWelcome}>
29+
<div className={styles.registerWelcomeHeader}>
30+
<h1>Welcome back</h1>
31+
<span>Ready to get back into the job market?</span>
32+
</div>
33+
</section>
2834
<div className={styles.loginContainer}>
2935
<form onSubmit={handleSubmit(submitForm)} className={styles.loginForm}>
30-
<h2 className={styles.loginHeading}>Login</h2>
31-
{error && <Error>{error}</Error>}
3236
<div className={styles.formGroup}>
33-
<label htmlFor="email" className={styles.formLabel}>
34-
Email
35-
</label>
37+
{error ? (
38+
<Error>{error}</Error>
39+
) : (
40+
<label htmlFor="email" className={styles.formLabel}>
41+
Email
42+
</label>
43+
)}
3644
<input
3745
type="email"
3846
className={styles.formInput}
@@ -53,7 +61,11 @@ const LoginScreen = () => {
5361
id="password"
5462
/>
5563
</div>
56-
<button type="submit" className={styles.loginButton} disabled={loading}>
64+
<button
65+
type="submit"
66+
className={styles.loginButton}
67+
disabled={loading}
68+
>
5769
{loading ? <Spinner /> : "Login"}
5870
</button>
5971
<Link to="/forgotpassword" className={styles.forgotPassword}>
@@ -68,4 +80,4 @@ const LoginScreen = () => {
6880
);
6981
};
7082

71-
export default LoginScreen;
83+
export default LoginScreen;

‎frontend/src/screens/RegisterScreen.js‎

Lines changed: 71 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const RegisterScreen = () => {
3333
setCustomError("Password mismatch");
3434
return;
3535
}
36-
36+
3737
const formData = new FormData();
3838
formData.append("name", data.name);
3939
formData.append("email", data.email.toLowerCase());
@@ -48,15 +48,27 @@ const RegisterScreen = () => {
4848

4949
return (
5050
<div className={styles.registerContainer}>
51+
<section className={styles.registerWelcome}>
52+
<div className={styles.registerWelcomeHeader}>
53+
<h1>Job searching</h1>
54+
<h1>made easy</h1>
55+
<h1>and fun.</h1>
56+
</div>
57+
<span>Create account in minutes</span>
58+
</section>
5159
<form onSubmit={handleSubmit(submitForm)} className={styles.registerForm}>
5260
<div className={styles.formWrapper}>
53-
{error && <Error>{error}</Error>}
5461
{customError && <Error>{customError}</Error>}
55-
62+
5663
<div className={styles.formGroup}>
57-
<label htmlFor="name" className={styles.label}>
58-
First Name
59-
</label>
64+
{error ? (
65+
<Error>{error}</Error>
66+
) : (
67+
<label htmlFor="name" className={styles.label}>
68+
First Name
69+
</label>
70+
)}
71+
6072
<input
6173
type="text"
6274
id="name"
@@ -66,56 +78,70 @@ const RegisterScreen = () => {
6678
</div>
6779

6880
<div className={styles.formGroup}>
69-
<label htmlFor="email" className={styles.label}>
70-
Email
71-
</label>
81+
{error ? (
82+
<Error>{error}</Error>
83+
) : (
84+
<label htmlFor="email" className={styles.label}>
85+
Email
86+
</label>
87+
)}
88+
7289
<input
7390
type="email"
7491
id="email"
7592
className={styles.formInput}
76-
{...register("email", {
93+
{...register("email", {
7794
required: true,
78-
pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
95+
pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
7996
})}
8097
/>
8198
{errors.email && (
82-
<span className={styles.error}>Please enter a valid email address</span>
83-
)}
84-
</div>
85-
86-
<div className={styles.formGroup}>
87-
<label htmlFor="password" className={styles.label}>
88-
Password
89-
</label>
90-
<input
91-
type="password"
92-
id="password"
93-
className={styles.formInput}
94-
{...register("password", { required: true, minLength: 6 })}
95-
/>
96-
{errors.password && (
9799
<span className={styles.error}>
98-
Password must be at least 6 characters long
100+
Please enter a valid email address
99101
</span>
100102
)}
101103
</div>
104+
<section className={styles.formGroupPasswords}>
105+
<div className={styles.formGroup}>
106+
{errors.password ? (
107+
<span className={styles.error}>
108+
Password must be at least 6 characters long
109+
</span>
110+
) : (
111+
<label htmlFor="password" className={styles.label}>
112+
Password
113+
</label>
114+
)}
102115

103-
<div className={styles.formGroup}>
104-
<label htmlFor="confirmPassword" className={styles.label}>
105-
Confirm Password
106-
</label>
107-
<input
108-
type="password"
109-
id="confirmPassword"
110-
className={styles.formInput}
111-
{...register("confirmPassword", { required: true })}
112-
/>
113-
</div>
116+
<input
117+
type="password"
118+
id="password"
119+
className={styles.formInput}
120+
{...register("password", { required: true, minLength: 6 })}
121+
/>
122+
</div>
123+
124+
<div className={styles.formGroup}>
125+
<label htmlFor="confirmPassword" className={styles.label}>
126+
Confirm Password
127+
</label>
128+
<input
129+
type="password"
130+
id="confirmPassword"
131+
className={styles.formInput}
132+
{...register("confirmPassword", { required: true })}
133+
/>
134+
</div>
135+
</section>
114136

115137
<div className={styles.formGroup}>
116-
<label htmlFor="fileupload" className={styles.label}>
117-
Profile Photo
118-
</label>
138+
{errors.file ? (
139+
<span className={styles.error}>{errors.file.message}</span>
140+
) : (
141+
<label htmlFor="fileupload" className={styles.label}>
142+
Profile Photo
143+
</label>
144+
)}
119145
<input
120146
id="fileupload"
121147
type="file"
@@ -124,14 +150,11 @@ const RegisterScreen = () => {
124150
accept="image/*"
125151
required
126152
/>
127-
{errors.file && (
128-
<span className={styles.error}>{errors.file.message}</span>
129-
)}
130153
</div>
131154

132-
<button
133-
type="submit"
134-
className={styles.registerButton}
155+
<button
156+
type="submit"
157+
className={styles.registerButton}
135158
disabled={loading}
136159
>
137160
{loading ? <Spinner /> : "Register"}
@@ -142,4 +165,4 @@ const RegisterScreen = () => {
142165
);
143166
};
144167

145-
export default RegisterScreen;
168+
export default RegisterScreen;

0 commit comments

Comments
 (0)