jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): show password reset error message

Browse source
This commit is contained in:
Shekar Siri 2024-11-15 16:42:01 +01:00
parent 5f40700de2
commit ba745ed2c9
3 changed files with 72 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/app/components/Client/ProfileSettings/ChangePassword.tsx
View file

@ -1,13 +1,12 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { Button, Message, Form, Input } from 'UI'; import { Button, Message, Form, Input } from 'UI';
import styles from './profileSettings.module.css'; import styles from './profileSettings.module.css';
import { toast } from 'react-toastify';
import { validatePassword } from 'App/validate'; import { validatePassword } from 'App/validate';
import { PASSWORD_POLICY } from 'App/constants'; import { PASSWORD_POLICY } from 'App/constants';
import { useStore } from 'App/mstore'; import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
const ERROR_DOESNT_MATCH = "Passwords don't match"; const ERROR_DOESNT_MATCH = 'Passwords don\'t match';
const MIN_LENGTH = 8; const MIN_LENGTH = 8;
const ChangePassword = () => { const ChangePassword = () => {
@ -18,11 +17,11 @@ const ChangePassword = () => {
const [oldPassword, setOldPassword] = useState<string>(''); const [oldPassword, setOldPassword] = useState<string>('');
const [newPassword, setNewPassword] = useState<{ value: string; error: boolean }>({ const [newPassword, setNewPassword] = useState<{ value: string; error: boolean }>({
value: '', value: '',
error: false, error: false
}); });
const [newPasswordRepeat, setNewPasswordRepeat] = useState<{ value: string; error: boolean }>({ const [newPasswordRepeat, setNewPasswordRepeat] = useState<{ value: string; error: boolean }>({
value: '', value: '',
error: false, error: false
}); });
const [show, setShow] = useState<boolean>(false); const [show, setShow] = useState<boolean>(false);
@ -53,16 +52,14 @@ const ChangePassword = () => {
updatePassword({ updatePassword({
oldPassword, oldPassword,
newPassword: newPassword.value, newPassword: newPassword.value
}).then((e: any) => { }).then(() => {
const success = !e || !e.errors || e.errors.length === 0; setShow(false);
setShow(!success); setOldPassword('');
if (success) { setNewPassword({ value: '', error: false });
toast.success(`Successfully changed password`); setNewPasswordRepeat({ value: '', error: false });
setOldPassword(''); }).catch((e) => {
setNewPassword({ value: '', error: false });
setNewPasswordRepeat({ value: '', error: false });
}
}); });
}, },
[isSubmitDisabled, oldPassword, newPassword, updatePassword] [isSubmitDisabled, oldPassword, newPassword, updatePassword]

51
frontend/app/mstore/userStore.ts
View file

@ -34,22 +34,22 @@ class UserStore {
errors: any[] = []; errors: any[] = [];
loginRequest = { loginRequest = {
loading: false, loading: false,
errors: [] as string[], errors: [] as string[]
}; };
fetchInfoRequest = { fetchInfoRequest = {
loading: false, loading: false,
errors: [] as string[], errors: [] as string[]
}; };
signUpRequest = { signUpRequest = {
loading: false, loading: false,
errors: [] as string[], errors: [] as string[]
}; };
updatePasswordRequest = { updatePasswordRequest = {
loading: false, loading: false,
errors: [] as string[], errors: [] as string[]
}; };
scopeState: number | null = null; scopeState: number | null = null;
client = new Client() client = new Client();
authStore: AuthStore; authStore: AuthStore;
constructor(authStore: AuthStore) { constructor(authStore: AuthStore) {
@ -74,13 +74,13 @@ class UserStore {
}, },
deserialize: (json) => { deserialize: (json) => {
return new Account(JSON.parse(json)); return new Account(JSON.parse(json));
}, }
}, }
], ],
storage: window.localStorage, storage: window.localStorage
}, },
{ {
delay: 200, delay: 200
} }
); );
} }
@ -306,7 +306,7 @@ class UserStore {
toast.promise(promise, { toast.promise(promise, {
pending: 'Generating an invite code...', pending: 'Generating an invite code...',
success: 'Invite code generated successfully', success: 'Invite code generated successfully'
}); });
return promise; return promise;
@ -323,7 +323,7 @@ class UserStore {
deleteCookie('jwt', '/', 'openreplay.com'); deleteCookie('jwt', '/', 'openreplay.com');
this.loginRequest = { this.loginRequest = {
loading: false, loading: false,
errors: errors || [], errors: errors || []
}; };
}; };
@ -344,7 +344,7 @@ class UserStore {
deleteCookie('jwt', '/', 'openreplay.com'); deleteCookie('jwt', '/', 'openreplay.com');
this.loginRequest = { this.loginRequest = {
loading: false, loading: false,
errors: error.errors || [], errors: error.errors || []
}; };
}); });
} }
@ -367,7 +367,7 @@ class UserStore {
runInAction(() => { runInAction(() => {
this.signUpRequest = { this.signUpRequest = {
loading: false, loading: false,
errors: error.response?.errors || [], errors: error.response?.errors || []
}; };
}); });
toast.error('Error signing up; please check your data and try again'); toast.error('Error signing up; please check your data and try again');
@ -428,15 +428,18 @@ class UserStore {
this.scopeState = data.data.scopeState; this.scopeState = data.data.scopeState;
this.updatePasswordRequest = { loading: false, errors: [] }; this.updatePasswordRequest = { loading: false, errors: [] };
}); });
return; toast.success(`Successfully changed password`);
} catch (error: any) { return data;
} catch (e: any) {
toast.error(e.message || 'Failed to updated password.');
throw e;
} finally {
runInAction(() => { runInAction(() => {
this.updatePasswordRequest = { this.updatePasswordRequest = {
loading: false, loading: false,
errors: error.response?.errors || [], errors: []
}; };
}); });
return error.response;
} }
}; };
@ -485,7 +488,7 @@ class UserStore {
Object.keys(params).forEach((key) => { Object.keys(params).forEach((key) => {
this.client[key] = params[key]; this.client[key] = params[key];
this.account[key] = params[key]; this.account[key] = params[key];
}) });
}); });
} catch (error) { } catch (error) {
// TODO error handling // TODO error handling
@ -593,7 +596,7 @@ class UserStore {
this.errors = []; this.errors = [];
this.loginRequest = { this.loginRequest = {
loading: false, loading: false,
errors: [], errors: []
}; };
this.scopeState = null; this.scopeState = null;
this.client = new Client(); this.client = new Client();
@ -624,7 +627,7 @@ class AuthStore {
sso: null, sso: null,
ssoProvider: null, ssoProvider: null,
enforceSSO: null, enforceSSO: null,
edition: 'foss', edition: 'foss'
}; };
constructor() { constructor() {
@ -640,13 +643,13 @@ class AuthStore {
return Object.keys(ad).length > 0 ? JSON.stringify(ad) : JSON.stringify({}); return Object.keys(ad).length > 0 ? JSON.stringify(ad) : JSON.stringify({});
}, },
deserialize: (json) => { deserialize: (json) => {
return JSON.parse(json) return JSON.parse(json);
}, }
}, }
], ],
expireIn: 60000 * 60, expireIn: 60000 * 60,
removeOnExpiration: true, removeOnExpiration: true,
storage: window.localStorage, storage: window.localStorage
}); });
} }

56
frontend/app/services/UserService.ts
View file

@ -153,16 +153,28 @@ export default class UserService {
const errorData = await error.response.json(); const errorData = await error.response.json();
return { errors: errorData.errors }; return { errors: errorData.errors };
} }
return { errors: ["An unexpected error occurred."] }; return { errors: ['An unexpected error occurred.'] };
} }
} }
updatePassword(data: any) { updatePassword = async (data: any) => {
return this.client try {
.post('/account/password', data) const response = await this.client.post('/account/password', data);
.then((response: { json: () => any }) => response.json()) const responseData = await response.json();
.then((response: { data: any }) => response || {}); if (responseData.errors) {
} throw new Error(responseData.errors[0] || 'An unexpected error occurred.');
}
return responseData || {};
} catch (error: any) {
if (error.response) {
const errorData = await error.response.json();
const errorMessage = errorData.errors ? errorData.errors[0] : 'An unexpected error occurred.';
throw new Error(errorMessage);
}
throw new Error('An unexpected error occurred.');
}
};
fetchTenants() { fetchTenants() {
return this.client return this.client
@ -192,21 +204,21 @@ export default class UserService {
.then((response: { data: any }) => response.data || {}); .then((response: { data: any }) => response.data || {});
} }
updateAccount(data: any) { updateAccount(data: any) {
return this.updateClient(data) return this.updateClient(data);
} }
resendEmailVerification(data: any) { resendEmailVerification(data: any) {
return this.client return this.client
.post('/re-validate', data) .post('/re-validate', data)
.then((response: { json: () => any }) => response.json()) .then((response: { json: () => any }) => response.json())
.then((response: { data: any }) => response.data || {}); .then((response: { data: any }) => response.data || {});
} }
changeScope(scope: 1 | 2) { changeScope(scope: 1 | 2) {
return this.client return this.client
.post('/account/scope', { scope }) .post('/account/scope', { scope })
.then((response: { json: () => any }) => response.json()) .then((response: { json: () => any }) => response.json())
.then((response: { data: any }) => response.data || {}); .then((response: { data: any }) => response.data || {});
} }
} }