Skip to content

Commit 7244622

Browse files
katarina-calakresimir-coko
katarina-cala
authored and
kresimir-coko
committed
1695-improved styling, reinstated deleted useEffects in App.tsx and updated login error handling, updated tests for featureFlag implementation
1 parent 95689df commit 7244622

File tree

12 files changed

+124
-120
lines changed

12 files changed

+124
-120
lines changed

‎client/src/App.tsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
ZapIcon,
2727
} from 'lucide-react';
2828
import {useEffect, useState} from 'react';
29-
import {Outlet, useLocation} from 'react-router-dom';
29+
import {Outlet, useLocation, useNavigate, useSearchParams} from 'react-router-dom';
3030

3131
const user = {
3232
email: 'emily.selman@example.com',
@@ -106,8 +106,10 @@ function App() {
106106
account,
107107
authenticated,
108108
getAccount,
109+
loginError,
109110
reset: resetAuthentication,
110111
sessionHasBeenFetched,
112+
showLogin,
111113
} = useAuthenticationStore();
112114

113115
const {copilotPanelOpen} = useCopilotStore();
@@ -118,6 +120,11 @@ function App() {
118120

119121
const location = useLocation();
120122

123+
const navigate = useNavigate();
124+
125+
const [searchParams] = useSearchParams();
126+
const key = searchParams.get('key');
127+
121128
const queryClient = useQueryClient();
122129

123130
const ff_1023 = useFeatureFlagsStore()('ff-1023');
@@ -173,6 +180,26 @@ function App() {
173180
getApplicationInfo();
174181
}, [getApplicationInfo]);
175182

183+
useEffect(() => {
184+
if (showLogin && !key) {
185+
navigate('/login');
186+
}
187+
}, [showLogin, navigate, key]);
188+
189+
useEffect(() => {
190+
if (sessionHasBeenFetched && !authenticated && !key && !loginError) {
191+
navigate('/login');
192+
}
193+
}, [authenticated, sessionHasBeenFetched, key, navigate, loginError]);
194+
195+
useEffect(() => {
196+
if (loginError) {
197+
navigate('/account-error', {
198+
state: {error: 'Failed to sign in, please check your credentials and try again.'},
199+
});
200+
}
201+
}, [loginError, navigate]);
202+
176203
useEffect(() => {
177204
if (!authenticated) {
178205
analytics.reset();

‎client/src/pages/account/public/AccountErrorPage.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {Link, useLocation} from 'react-router-dom';
66

77
const AccountErrorPage = () => {
88
const location = useLocation();
9+
const errorMessage = location.state?.error || 'Something went wrong. Try again.';
910

1011
return (
1112
<PublicLayoutContainer>
@@ -16,7 +17,7 @@ const AccountErrorPage = () => {
1617
<CardTitle className="self-center text-xl font-bold text-content-neutral-primary">Error</CardTitle>
1718

1819
<CardDescription className="self-center text-center text-content-neutral-secondary">
19-
{location.state.error ? `${location.state.error}` : 'Something went wrong. Try again.'}
20+
{errorMessage}
2021
</CardDescription>
2122
</CardHeader>
2223

‎client/src/pages/account/public/Login.tsx‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import {useAuthenticationStore} from '@/shared/stores/useAuthenticationStore';
1010
import {useFeatureFlagsStore} from '@/shared/stores/useFeatureFlagsStore';
1111
import {zodResolver} from '@hookform/resolvers/zod';
1212
import {Eye, EyeOff} from 'lucide-react';
13-
import {useEffect, useState} from 'react';
13+
import {useState} from 'react';
1414
import {useForm} from 'react-hook-form';
15-
import {Link, Navigate, useLocation, useNavigate} from 'react-router-dom';
15+
import {Link, Navigate, useLocation} from 'react-router-dom';
1616
import {z} from 'zod';
1717

1818
import githubLogo from '../images/github-logo.svg';
@@ -27,14 +27,13 @@ const formSchema = z.object({
2727
const Login = () => {
2828
const [showPassword, setShowPassword] = useState(false);
2929

30-
const {authenticated, login, loginError, reset} = useAuthenticationStore();
30+
const {authenticated, login} = useAuthenticationStore();
3131

3232
const ff_1874 = useFeatureFlagsStore()('ff-1874');
3333

3434
const analytics = useAnalytics();
3535

3636
const pageLocation = useLocation();
37-
const navigate = useNavigate();
3837

3938
const form = useForm<z.infer<typeof formSchema>>({
4039
defaultValues: {
@@ -60,16 +59,6 @@ const Login = () => {
6059

6160
const {from} = pageLocation.state || {from: {pathname: '/', search: pageLocation.search}};
6261

63-
useEffect(() => {
64-
if (loginError) {
65-
navigate('/account-error', {
66-
state: {error: 'Failed to sign in, please check your credentials and try again.'},
67-
});
68-
69-
reset();
70-
}
71-
}, [loginError, navigate, reset]);
72-
7362
if (authenticated) {
7463
return <Navigate replace to={from} />;
7564
}
@@ -87,21 +76,15 @@ const Login = () => {
8776
{ff_1874 && (
8877
<>
8978
<div className="flex flex-col gap-4">
90-
<Button
91-
className="flex items-center gap-2 rounded-md px-4 py-5 shadow-md"
92-
variant="outline"
93-
>
79+
<Button className="flex items-center gap-2 rounded-md px-4 py-5" variant="outline">
9480
<img alt="Google logo" src={googleLogo} />
9581

9682
<span className="text-sm font-medium text-content-neutral-primary">
9783
Continue with Google
9884
</span>
9985
</Button>
10086

101-
<Button
102-
className="flex items-center gap-2 rounded-md px-4 py-5 shadow-md"
103-
variant="outline"
104-
>
87+
<Button className="flex items-center gap-2 rounded-md px-4 py-5" variant="outline">
10588
<img alt="Github logo" src={githubLogo} />
10689

10790
<span className="text-sm font-medium text-content-neutral-primary">

‎client/src/pages/account/public/PasswordResetEmailSent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const PasswordResetEmailSent = () => {
4444

4545
useEffect(() => {
4646
if (resetPasswordFailure) {
47-
navigate('/account-error', {state: {error: 'Something went wrong. Try again.'}});
47+
navigate('/account-error');
4848
}
4949

5050
reset();

‎client/src/pages/account/public/PasswordResetFinish.tsx‎

Lines changed: 25 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import {Button} from '@/components/ui/button';
2-
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
2+
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
33
import {Form, FormControl, FormField, FormItem, FormLabel} from '@/components/ui/form';
44
import {Input} from '@/components/ui/input';
55
import {usePasswordResetStore} from '@/pages/account/public/stores/usePasswordResetStore';
66
import PublicLayoutContainer from '@/shared/layout/PublicLayoutContainer';
77
import {zodResolver} from '@hookform/resolvers/zod';
88
import {CheckIcon, Eye, EyeOff, XIcon} from 'lucide-react';
9-
import React, {useEffect, useState} from 'react';
9+
import React, {useState} from 'react';
1010
import {useForm} from 'react-hook-form';
11-
import {useNavigate, useSearchParams} from 'react-router-dom';
11+
import {useSearchParams} from 'react-router-dom';
1212
import {twMerge} from 'tailwind-merge';
1313
import {z} from 'zod';
1414

15+
import PasswordResetSuccessful from './PasswordResetSuccessful';
16+
1517
const passwordLengthMessage = 'At least 8 characters';
1618
const passwordContainsNumberMessage = 'At least 1 number';
1719
const passwordContainsUppercaseMessage = 'At least 1 uppercase';
@@ -52,7 +54,7 @@ const formSchema = z
5254
const PasswordResetFinish = () => {
5355
const [showPassword, setShowPassword] = useState(false);
5456

55-
const {reset, resetPasswordFailure, resetPasswordFinish, resetPasswordSuccess} = usePasswordResetStore();
57+
const {resetPasswordFinish, resetPasswordSuccess} = usePasswordResetStore();
5658

5759
const [searchParams] = useSearchParams();
5860
const key = searchParams.get('key');
@@ -109,7 +111,7 @@ const PasswordResetFinish = () => {
109111
</div>
110112
</FormControl>
111113

112-
<ul>
114+
<ul className="space-y-1">
113115
{errors.newPassword?.message &&
114116
getValues('newPassword') !== '' &&
115117
Object.entries(JSON.parse(errors.newPassword.message)).map(([key, value]) => {
@@ -121,12 +123,12 @@ const PasswordResetFinish = () => {
121123
return (
122124
<li
123125
className={twMerge(
124-
'mt-2 flex items-center gap-1 text-base text-destructive',
126+
'flex items-center gap-1 text-sm text-destructive',
125127
validationPass && 'text-success'
126128
)}
127129
key={key}
128130
>
129-
{validationPass ? <CheckIcon size={20} /> : <XIcon size={20} />}
131+
{validationPass ? <CheckIcon size={15} /> : <XIcon size={15} />}
130132

131133
<p>{message}</p>
132134
</li>
@@ -135,20 +137,20 @@ const PasswordResetFinish = () => {
135137

136138
{getValues('newPassword') === '' && (
137139
<>
138-
<li className="mt-2 flex items-center gap-1 text-base text-content-neutral-secondary">
139-
<XIcon size={20} />
140+
<li className="flex items-center gap-1 text-sm text-content-neutral-secondary">
141+
<XIcon size={15} />
140142

141143
<p>{passwordLengthMessage}</p>
142144
</li>
143145

144-
<li className="mt-2 flex items-center gap-1 text-base text-content-neutral-secondary">
145-
<XIcon size={20} />
146+
<li className="flex items-center gap-1 text-sm text-content-neutral-secondary">
147+
<XIcon size={15} />
146148

147149
<p>{passwordContainsNumberMessage}</p>
148150
</li>
149151

150-
<li className="mt-2 flex items-center gap-1 text-base text-content-neutral-secondary">
151-
<XIcon size={20} />
152+
<li className="flex items-center gap-1 text-sm text-content-neutral-secondary">
153+
<XIcon size={15} />
152154

153155
<p>{passwordContainsUppercaseMessage}</p>
154156
</li>
@@ -157,20 +159,20 @@ const PasswordResetFinish = () => {
157159

158160
{!errors.newPassword && getValues('newPassword') !== '' && (
159161
<>
160-
<li className="mt-2 flex items-center gap-1 text-base text-success">
161-
<CheckIcon size={20} />
162+
<li className="flex items-center gap-1 text-sm text-success">
163+
<CheckIcon size={15} />
162164

163165
<p>{passwordLengthMessage}</p>
164166
</li>
165167

166-
<li className="mt-2 flex items-center gap-1 text-base text-success">
167-
<CheckIcon size={20} />
168+
<li className="flex items-center gap-1 text-sm text-success">
169+
<CheckIcon size={15} />
168170

169171
<p>{passwordContainsNumberMessage}</p>
170172
</li>
171173

172-
<li className="mt-2 flex items-center gap-1 text-base text-success">
173-
<CheckIcon size={20} />
174+
<li className="flex items-center gap-1 text-sm text-success">
175+
<CheckIcon size={15} />
174176

175177
<p>{passwordContainsUppercaseMessage}</p>
176178
</li>
@@ -197,31 +199,17 @@ const PasswordResetFinish = () => {
197199
resetPasswordFinish(key, newPassword);
198200
}
199201

200-
const navigate = useNavigate();
201-
202-
useEffect(() => {
203-
if (resetPasswordSuccess) {
204-
navigate('/password-reset/success');
205-
}
206-
207-
if (resetPasswordFailure) {
208-
navigate('/account-error', {state: {error: 'Something went wrong. Try again.'}});
209-
}
210-
211-
reset();
212-
}, [navigate, reset, resetPasswordSuccess, resetPasswordFailure]);
202+
if (resetPasswordSuccess) {
203+
return <PasswordResetSuccessful />;
204+
}
213205

214206
return (
215207
<PublicLayoutContainer>
216208
<Card className="mx-auto max-w-sm rounded-xl p-6 text-start shadow-none">
217-
<CardHeader className="p-0 pb-10 text-center">
209+
<CardHeader className="p-0 pb-8 text-center">
218210
<CardTitle className="text-xl font-bold text-content-neutral-primary">
219211
Create a new password
220212
</CardTitle>
221-
222-
<CardDescription className="text-content-neutral-secondary">
223-
Your password needs to be different from previously used passwords.
224-
</CardDescription>
225213
</CardHeader>
226214

227215
<CardContent className="flex flex-col gap-6 p-0">

‎client/src/pages/account/public/PasswordResetInit.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ export const PasswordResetInit = () => {
2828
const navigate = useNavigate();
2929

3030
useEffect(() => {
31-
if (resetPasswordSuccess) {
31+
if (form.getValues().email && resetPasswordSuccess) {
3232
navigate('/password-reset/email', {state: {email: form.getValues().email}});
3333
} else if (resetPasswordFailure) {
34-
navigate('/account-error', {state: {error: 'Something went wrong. Try again.'}});
34+
navigate('/account-error');
3535
}
3636

3737
reset();

0 commit comments

Comments
 (0)