Skip to content

Commit 64e4f65

Browse files
Jadowacu1Jadowacu1
authored
Fx reset-password feature (#46)
1 parent faa9718 commit 64e4f65

File tree

5 files changed

+244
-214
lines changed

5 files changed

+244
-214
lines changed

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/styles/reset-password.scss

+65-70
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,17 @@ $button-font-family: Arial, sans-serif;
88
$button-text-color: #fff;
99
$text-color: #000000;
1010

11-
hr{
12-
color: #777777;
13-
height: 10px;
14-
}
1511
.resetPassword-Container {
1612
display: flex;
1713
flex-direction: column;
1814
gap: 70px;
1915
align-items: center;
2016
margin-top: 35px;
21-
22-
h1{
23-
color: $text-color;
24-
font-family: $text-family;
25-
font-size: 4rem;
17+
18+
h1 {
19+
color: $text-color;
20+
font-family: $text-family;
21+
font-size: 4rem;
2622
}
2723
.error {
2824
color: $red-color;
@@ -33,7 +29,7 @@ hr{
3329
.input-container {
3430
position: relative;
3531
margin: 1rem 0;
36-
32+
3733
.input-label {
3834
position: absolute;
3935
top: 50%;
@@ -42,12 +38,12 @@ hr{
4238
background: white;
4339
padding: 0 0.25rem;
4440
color: #6c6c6c;
45-
font-family: 'Georgia', serif;
41+
font-family: "Georgia", serif;
4642
font-weight: bold;
4743
font-size: 1rem;
4844
transition: all 0.3s ease;
4945
}
50-
46+
5147
.input-field {
5248
width: 25vw;
5349
height: 7vh;
@@ -58,7 +54,7 @@ hr{
5854
outline: none;
5955
font-family: inherit;
6056
font-weight: inherit;
61-
57+
6258
&:focus + .input-label,
6359
&:not(:placeholder-shown) + .input-label {
6460
top: 0;
@@ -69,11 +65,11 @@ hr{
6965
}
7066
}
7167

72-
.reset-Button {
68+
.reset-Button {
7369
background-color: $primary-color;
7470
color: $button-text-color;
7571
font-size: $button-font-size;
76-
width: 25vw;
72+
width: 26vw;
7773
height: 7vh;
7874
border: none;
7975
border-radius: $button-border-radius;
@@ -84,15 +80,14 @@ hr{
8480
font-weight: $button-font-weight;
8581
font-family: $button-font-family;
8682
&:hover {
87-
background-color: $button-hover-bg-color;
83+
background-color: $button-hover-bg-color;
8884
}
8985
.loading {
90-
cursor: not-allowed;
91-
}
92-
}
86+
cursor: not-allowed;
87+
}
88+
}
9389
}
9490

95-
9691
.resetPasswordForm {
9792
display: flex;
9893
flex-direction: column;
@@ -111,26 +106,29 @@ hr{
111106
flex-direction: column;
112107
gap: 9px;
113108

114-
.input-container1, .input-container2 {
109+
.input-container1,
110+
.input-container2 {
115111
position: relative;
116112
margin: 1rem 0;
117113

118-
.input-label1, .input-label2 {
114+
.input-label1,
115+
.input-label2 {
119116
position: absolute;
120117
top: 50%;
121118
left: 0.75rem;
122119
transform: translateY(-50%);
123120
background: white;
124121
padding: 0 0.25rem;
125122
color: #6c6c6c;
126-
font-family: 'Georgia', serif;
123+
font-family: "Georgia", serif;
127124
font-weight: bold;
128125
font-size: 1rem;
129126
transition: all 0.3s ease;
130127
}
131128

132-
.input-field1, .input-field2 {
133-
width: 25vw;
129+
.input-field1,
130+
.input-field2 {
131+
width: 27.5vw;
134132
height: 7vh;
135133
padding-left: 3%;
136134
border: 2px solid #f5a773;
@@ -152,7 +150,7 @@ hr{
152150
}
153151
}
154152
.error {
155-
color: $red-color;
153+
color: $red-color;
156154
font-size: 2rem;
157155
width: 25vw;
158156
font-family: $text-family;
@@ -162,7 +160,7 @@ hr{
162160
background-color: $primary-color;
163161
color: $button-text-color;
164162
font-size: $button-font-size;
165-
width: 25vw;
163+
width: 28.8vw;
166164
height: 7vh;
167165
border: none;
168166
border-radius: $button-border-radius;
@@ -173,76 +171,73 @@ hr{
173171
font-weight: $button-font-weight;
174172
font-family: $button-font-family;
175173
&:hover {
176-
background-color: $button-hover-bg-color;
174+
background-color: $button-hover-bg-color;
177175
}
178176
.loading {
179-
cursor: not-allowed;
180-
}
181-
}
177+
cursor: not-allowed;
178+
}
179+
}
182180
}
183181

184-
185182
.resetPasswordForm {
186183
.input-containers {
187184
.input-container1,
188185
.input-container2 {
189-
190186
position: relative;
191187
.toggle-password {
192188
position: absolute;
193189
color: #777777;
194190
top: 50%;
195-
right: 10px;
191+
right: 1.5rem;
196192
transform: translateY(-50%);
197193
background: none;
198194
border: none;
199195
cursor: pointer;
200196
outline: none;
201197
}
202198
}
203-
}
199+
}
204200
}
205201

206-
207-
.redirect-page{
202+
.redirect-page {
208203
display: flex;
209204
justify-content: center;
210-
211-
.success-page{
212-
margin-top: 60px;
213-
width: 50vw;
214-
display: flex;
215-
justify-content: center;
216-
align-items: center;
217-
flex-direction: column;
218-
background-color: $white-color;
219-
border-radius: 10px;
220-
padding: 2rem;
221-
border: none;
222-
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
223-
transition: all 0.3s ease-in-out;
224-
.isSuccess {
225-
p {
226-
display: flex;
227-
flex-direction: row;
228-
align-items: center;
229-
gap: 5px;
205+
206+
.success-page {
207+
margin-top: 60px;
208+
width: 50vw;
209+
display: flex;
210+
justify-content: center;
211+
align-items: center;
212+
flex-direction: column;
213+
background-color: $white-color;
214+
border-radius: 10px;
215+
padding: 2rem;
216+
border: none;
217+
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
218+
transition: all 0.3s ease-in-out;
219+
.isSuccess {
220+
p {
221+
display: flex;
222+
flex-direction: row;
223+
align-items: center;
224+
gap: 5px;
230225
span {
231-
color: $primary-color;
232-
font-weight: 700;
226+
color: $primary-color;
227+
font-weight: 700;
228+
text-decoration: underline;
229+
font-size: 1.9rem;
230+
line-height: 2.4rem;
231+
letter-spacing: 0.05rem;
232+
transition: all 0.3s ease-in-out;
233+
cursor: pointer;
234+
235+
&:hover {
233236
text-decoration: underline;
234-
font-size: 1.9rem;
235-
line-height: 2.4rem;
236-
letter-spacing: 0.05rem;
237237
transition: all 0.3s ease-in-out;
238-
cursor: pointer;
239-
240-
&:hover {
241-
text-decoration: underline;
242-
transition: all 0.3s ease-in-out;
243-
}
238+
}
244239
}
240+
}
245241
}
242+
}
246243
}
247-
}
248-
}

‎src/components/GoogleCallback.tsx

+66-49
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,77 @@
1-
/* eslint-disable */
2-
import React, { useEffect, useState } from 'react';
3-
import { useAppDispatch } from '../store/store';
4-
import { googleAuthCallback } from '../store/features/auth/authSlice';
5-
import { useNavigate } from 'react-router-dom';
6-
import { PuffLoader } from 'react-spinners';
1+
/* eslint-disable*/
2+
import React, { useEffect, useState } from "react";
3+
import { useAppDispatch, useAppSelector } from "../store/store";
4+
import { googleAuthCallback } from "../store/features/auth/authSlice";
5+
import { useNavigate } from "react-router-dom";
6+
import { HashLoader } from "react-spinners";
77

88
const GoogleCallback = () => {
99
const dispatch = useAppDispatch();
1010
const navigate = useNavigate();
11-
const [loading, setLoading] = useState(true);
1211
const [error, setError] = useState<string | null>(null);
12+
const { isLoading, isSuccess, isError, message, token } = useAppSelector(
13+
(state) => state.auth
14+
);
1315

14-
useEffect(() => {
15-
const urlParams = new URLSearchParams(window.location.search);
16-
const code = urlParams.get('code');
17-
const scope = urlParams.get('scope');
18-
const authuser = urlParams.get('authuser');
19-
const prompt = urlParams.get('prompt');
20-
21-
const authenticate = async () => {
22-
try {
23-
if (code && scope) {
24-
const response = await dispatch(
25-
googleAuthCallback({ code, scope, authuser, prompt })
26-
);
27-
const token = response.payload.data.token;
28-
localStorage.setItem('token', token);
29-
navigate('/');
30-
} else {
31-
console.error('Missing authentication parameters');
32-
setError('Missing authentication parameters');
33-
}
34-
} catch (error) {
35-
console.error('Authentication failed', error);
36-
setError('Authentication failed. Please try again.');
37-
} finally {
38-
setLoading(false);
39-
}
40-
};
41-
42-
authenticate();
43-
}, [dispatch, navigate]);
16+
const urlParams = new URLSearchParams(window.location.search);
17+
const code = urlParams.get("code");
18+
const scope = urlParams.get("scope");
19+
const authuser = urlParams.get("authuser");
20+
const prompt = urlParams.get("prompt");
4421

45-
if (loading) {
46-
return (
47-
<div className="loader">
48-
<PuffLoader color="#ff6d18" size={300} loading={loading} />
49-
</div>
50-
);
51-
}
22+
useEffect(() => {
23+
if (code && scope && authuser && prompt) {
24+
dispatch(googleAuthCallback({ code, scope, authuser, prompt }));
25+
} else {
26+
setError("Invalid authentication parameters.");
27+
}
28+
}, [code, scope, authuser, prompt, dispatch]);
5229

53-
if (error) {
54-
return <div className="error-message">{error}</div>;
55-
}
30+
useEffect(() => {
31+
if (isSuccess) {
32+
localStorage.setItem("token", token);
33+
navigate("/");
34+
}
35+
if (isError) {
36+
setError(message);
37+
}
38+
}, [isSuccess, isError, message, navigate]);
5639

57-
return <div>Authenticating....</div>;
40+
return (
41+
<div className="google-callback">
42+
{isLoading && (
43+
<div
44+
style={{
45+
display: "flex",
46+
justifyContent: "center",
47+
alignItems: "center",
48+
flexDirection: "column",
49+
height: "90vh",
50+
gap: "1rem",
51+
}}>
52+
<div className="btn-loading">
53+
<HashLoader size={150} color="#FF6D18" loading={true} />
54+
</div>
55+
<div style={{ fontSize: "1.8rem", fontWeight: "bold" }}>
56+
Authenticating....
57+
</div>
58+
</div>
59+
)}
60+
{isError && (
61+
<div
62+
className="error-message"
63+
style={{
64+
display: "flex",
65+
justifyContent: "center",
66+
alignItems: "center",
67+
height: "50vh",
68+
fontSize: "4rem",
69+
}}>
70+
{error}
71+
</div>
72+
)}
73+
</div>
74+
);
5875
};
5976

60-
export default GoogleCallback;
77+
export default GoogleCallback;

0 commit comments

Comments
 (0)