From 8a023bcab198939cb6cc9d6ca070fad49ed73389 Mon Sep 17 00:00:00 2001 From: Kirill Date: Tue, 11 Jan 2022 14:52:12 +0300 Subject: [PATCH 1/6] feat(auth): add "remember me" option to 2-step authentication (#156) --- public/src/api/httpClient.ts | 26 ++++++++++--- public/src/api/makeApiRequest.ts | 6 +-- public/src/interfaces/User.ts | 1 + public/src/pages/auth/AdminPage.tsx | 2 +- .../src/pages/auth/LoginNew/PasswordCheck.tsx | 37 ++++++++++++++++--- public/src/pages/main/Header/Sign.tsx | 10 ++--- public/src/pages/main/Userprofile.tsx | 12 +++++- .../Testimonials/TestimonialsForm.tsx | 2 +- public/src/router/Routes.tsx | 2 +- 9 files changed, 74 insertions(+), 24 deletions(-) diff --git a/public/src/api/httpClient.ts b/public/src/api/httpClient.ts index 455ee3bb..24d093d3 100644 --- a/public/src/api/httpClient.ts +++ b/public/src/api/httpClient.ts @@ -30,7 +30,10 @@ export function getProducts(): Promise { return makeApiRequest({ url: ApiUrl.Products, method: 'get', - headers: { authorization: sessionStorage.getItem('token') } + headers: { + authorization: + sessionStorage.getItem('token') || localStorage.getItem('token') + } }); } @@ -42,7 +45,10 @@ export function postTestimonials(data: Testimonial): Promise { return makeApiRequest({ url: ApiUrl.Testimonials, method: 'post', - headers: { authorization: sessionStorage.getItem('token') }, + headers: { + authorization: + sessionStorage.getItem('token') || localStorage.getItem('token') + }, data }); } @@ -132,7 +138,10 @@ export function getUserPhoto(email: string): Promise { return makeApiRequest({ url: `${ApiUrl.Users}/one/${email}/photo`, method: 'get', - headers: { authorization: sessionStorage.getItem('token') }, + headers: { + authorization: + sessionStorage.getItem('token') || localStorage.getItem('token') + }, responseType: 'arraybuffer' }); } @@ -141,7 +150,10 @@ export function getAdminStatus(email: string): Promise { return makeApiRequest({ url: `${ApiUrl.Users}/one/${email}/adminpermission`, method: 'get', - headers: { authorization: sessionStorage.getItem('token') } + headers: { + authorization: + sessionStorage.getItem('token') || localStorage.getItem('token') + } }); } @@ -151,7 +163,8 @@ export function putUserData(user: UserData): Promise { method: 'put', headers: { 'content-type': 'application/json', - 'authorization': sessionStorage.getItem('token') + 'authorization': + sessionStorage.getItem('token') || localStorage.getItem('token') }, data: user }); @@ -166,7 +179,8 @@ export function putPhoto(photo: File, email: string): Promise { method: 'put', headers: { 'content-type': 'image/png', - 'authorization': sessionStorage.getItem('token') + 'authorization': + sessionStorage.getItem('token') || localStorage.getItem('token') }, data }); diff --git a/public/src/api/makeApiRequest.ts b/public/src/api/makeApiRequest.ts index e2362d71..fa1c848e 100644 --- a/public/src/api/makeApiRequest.ts +++ b/public/src/api/makeApiRequest.ts @@ -12,14 +12,14 @@ export function makeApiRequest( .then((response) => { const token = response.headers.authorization; token && sessionStorage.setItem('token', token); + return response.data; }) .catch((error) => { switch (error.response.status) { case 401: - sessionStorage.removeItem('email'); - sessionStorage.removeItem('token'); - sessionStorage.removeItem('userName'); + sessionStorage.clear(); + localStorage.clear(); return { ...error, errorText: diff --git a/public/src/interfaces/User.ts b/public/src/interfaces/User.ts index 12ee7e68..cca77dc9 100644 --- a/public/src/interfaces/User.ts +++ b/public/src/interfaces/User.ts @@ -4,6 +4,7 @@ export interface LoginUser { csrf?: string; op?: LoginFormMode; fingerprint?: string; + rememberuser?: string; } export enum LoginFormMode { diff --git a/public/src/pages/auth/AdminPage.tsx b/public/src/pages/auth/AdminPage.tsx index 67b43cbd..710dc12c 100644 --- a/public/src/pages/auth/AdminPage.tsx +++ b/public/src/pages/auth/AdminPage.tsx @@ -3,7 +3,7 @@ import { getAdminStatus } from '../../api/httpClient'; import AuthLayout from './AuthLayout'; export const AdminPage: FC = () => { - const user = sessionStorage.getItem('email'); + const user = sessionStorage.getItem('email') || localStorage.getItem('email'); const [isAdmin, setIsAdmin] = useState(false); useEffect(() => { diff --git a/public/src/pages/auth/LoginNew/PasswordCheck.tsx b/public/src/pages/auth/LoginNew/PasswordCheck.tsx index 45fd8751..d49689ef 100644 --- a/public/src/pages/auth/LoginNew/PasswordCheck.tsx +++ b/public/src/pages/auth/LoginNew/PasswordCheck.tsx @@ -44,15 +44,32 @@ export const PasswordCheck: FC = () => { if (errorText) { setErrorText(errorText); } else { - sessionStorage.setItem('email', email); + if (form.rememberuser) { + localStorage.setItem( + 'email', + sessionStorage.getItem('email') || '' + ); + localStorage.setItem( + 'token', + sessionStorage.getItem('token') || '' + ); + sessionStorage.clear(); + } } return getUserData(email); }) .then((userData: UserData) => { - sessionStorage.setItem( - 'userName', - `${userData.firstName} ${userData.lastName}` - ); + if (form.rememberuser) { + localStorage.setItem( + 'userName', + `${userData.firstName} ${userData.lastName}` + ); + } else { + sessionStorage.setItem( + 'userName', + `${userData.firstName} ${userData.lastName}` + ); + } window.location.href = RoutePath.Home; }); }; @@ -79,6 +96,16 @@ export const PasswordCheck: FC = () => { value={password} onInput={onInput} /> +