Skip to content

Commit 87e7b42

Browse files
GuidoBRGuidoBR
committed
Create Verification page
1 parent f4a5df9 commit 87e7b42

File tree

7 files changed

+170
-40
lines changed

7 files changed

+170
-40
lines changed

‎frontend/src/common/i18n/en/auth.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"email-verification": {
3+
"title": "Email Verification",
4+
"message": "Please enter the verification code sent to your email address.",
5+
"success": "Your email has been successfully verified.",
6+
"code-resent": "A new verification code has been sent to your email."
7+
},
8+
"validation": {
9+
"required": "This field is required.",
10+
"numeric": "This field must contain only numbers.",
11+
"exact-length": "This field must be exactly {{length}} characters."
12+
},
13+
"error": {
14+
"no-email": "Email address not found. Please try again."
15+
},
16+
"label": {
17+
"verification-code": "Verification code",
18+
"email": "Email"
19+
},
20+
"confirm": "Confirm",
21+
"resend-code": "Request new code",
22+
"verification": {
23+
"loading": "Verifying your code...",
24+
"enter-code": "Please enter the verification code we sent to"
25+
},
26+
"confirm-account": {
27+
"title": "Confirm Account",
28+
"message": "Please enter the verification code we sent to",
29+
"submit": "Confirm Account"
30+
},
31+
"request-new-code": "Request new code",
32+
"back-to-login": "Back to Log in",
33+
"signin": "Log in",
34+
"logo-alt": "MEDReport AI Logo"
35+
}

‎frontend/src/common/i18n/en/common.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"logo-alt": "MEDReport AI Logo",
3+
"app": {
4+
"name": "MEDReport AI"
5+
},
6+
"confirm": "Confirm",
7+
"cancel": "Cancel",
8+
"loading": "Loading...",
9+
"error": "Error",
10+
"success": "Success",
11+
"back": "Back",
12+
"next": "Next"
13+
}

‎frontend/src/common/utils/i18n/resources/en/auth.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"or-signin-with": "Or sign in with",
4242
"submit": "Submit",
4343
"confirm": "Confirm",
44-
"resend-code": "Resend Code",
44+
"resend-code": "Request new code",
4545
"forgot-password": "Forgot Password?",
4646
"password-recovery": {
4747
"title": "Password Recovery",
@@ -62,6 +62,12 @@
6262
"success": "Email verified successfully!",
6363
"code-resent": "A new verification code has been sent to your email."
6464
},
65+
"confirm-account": {
66+
"title": "Confirm Account",
67+
"message": "Please enter the verification code we sent to",
68+
"submit": "Confirm Account"
69+
},
70+
"back-to-login": "Back to Log in",
6571
"registration": {
6672
"success": "Registration successful!",
6773
"verify-email": "Please verify your email to activate your account."

‎frontend/src/pages/Auth/Verify/VerificationPage.scss‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,53 @@
11
.ls-verification-page {
2-
.ls-verification-page__container {
3-
max-width: 32rem;
2+
--ion-background-color: transparent;
3+
4+
&__background {
5+
width: 100%;
46
height: 100%;
57
display: flex;
68
flex-direction: column;
9+
align-items: center;
10+
justify-content: flex-start;
11+
padding: 2rem 1.5rem;
12+
background-color: #1c1e2e;
13+
background-image: url('../../../assets/Splash.png');
14+
background-size: cover;
15+
background-position: center;
16+
position: relative;
17+
}
18+
19+
&__logo-container {
20+
display: flex;
21+
align-items: center;
722
justify-content: center;
23+
margin-bottom: 2.5rem;
24+
margin-top: 2rem;
25+
}
26+
27+
&__logo {
28+
width: 3.5rem;
29+
height: auto;
30+
margin-right: 0.75rem;
31+
}
32+
33+
&__logo-text {
34+
color: white;
35+
font-size: 1.75rem;
36+
font-weight: 600;
37+
}
38+
39+
&__card {
40+
width: 100%;
41+
max-width: 30rem;
42+
background-color: white;
43+
border-radius: 1.5rem;
44+
padding: 2.5rem 2rem;
45+
box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 15%);
46+
z-index: 1;
847
}
948

10-
.ls-verification-page__form {
49+
&__form {
1150
width: 100%;
51+
margin: 0;
1252
}
1353
}

‎frontend/src/pages/Auth/Verify/VerificationPage.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { IonContent, IonPage } from '@ionic/react';
1+
import { IonContent, IonPage, IonImg } from '@ionic/react';
22
import { useTranslation } from 'react-i18next';
33
import { useEffect, useState } from 'react';
44

55
import './VerificationPage.scss';
66
import { PropsWithTestId } from 'common/components/types';
77
import ProgressProvider from 'common/providers/ProgressProvider';
8-
import Header from 'common/components/Header/Header';
98
import VerificationForm from './components/VerificationForm';
10-
import Container from 'common/components/Content/Container';
9+
import logo from '../../../assets/logo_ls.png';
1110

1211
/**
1312
* Properties for the `VerificationPage` component.
@@ -34,12 +33,23 @@ const VerificationPage = ({ testid = 'page-verification' }: VerificationPageProp
3433
return (
3534
<IonPage className="ls-verification-page" data-testid={testid}>
3635
<ProgressProvider>
37-
<Header title={t('email-verification.title', { ns: 'auth' })} />
36+
<IonContent fullscreen className="ion-no-padding">
37+
<div className="ls-verification-page__background">
38+
<div className="ls-verification-page__logo-container">
39+
<IonImg
40+
src={logo}
41+
alt={t('verification.logo-alt', { ns: 'common' })}
42+
className="ls-verification-page__logo"
43+
/>
44+
<span className="ls-verification-page__logo-text">
45+
{t('app.name', { ns: 'common' })}
46+
</span>
47+
</div>
3848

39-
<IonContent fullscreen className="ion-padding">
40-
<Container className="ls-verification-page__container" fixed>
41-
<VerificationForm className="ls-verification-page__form" email={email} />
42-
</Container>
49+
<div className="ls-verification-page__card">
50+
<VerificationForm className="ls-verification-page__form" email={email} />
51+
</div>
52+
</div>
4353
</IonContent>
4454
</ProgressProvider>
4555
</IonPage>

‎frontend/src/pages/Auth/Verify/components/VerificationForm.scss‎

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,53 @@
11
.ls-verification-form {
2-
padding: 1rem;
2+
width: 100%;
33

4-
.ls-verification-form__message {
5-
margin: 1rem 0;
6-
display: flex;
7-
flex-direction: column;
8-
gap: 0.5rem;
4+
.ls-verification-form__title {
5+
font-size: 2rem;
6+
font-weight: 600;
7+
color: #333;
8+
margin-bottom: 1.25rem;
9+
margin-top: 0;
10+
text-align: center;
911
}
1012

11-
.ls-verification-form__email {
12-
display: block;
13-
margin-top: 0.5rem;
13+
.ls-verification-form__message {
14+
margin: 1rem 0 1.5rem;
15+
text-align: center;
16+
color: #666;
17+
font-size: 1rem;
18+
line-height: 1.5;
1419
}
1520

1621
.ls-verification-form__input {
17-
margin-bottom: 1rem;
22+
margin-bottom: 1.5rem;
1823
}
1924

2025
.ls-verification-form__button {
2126
margin-top: 1rem;
27+
margin-bottom: 0.75rem;
28+
height: 3rem;
29+
font-weight: 500;
30+
31+
--border-radius: 0.75rem;
32+
}
33+
34+
.ls-verification-form__resend-button {
35+
margin-bottom: 1.5rem;
36+
height: 3rem;
37+
font-weight: 500;
38+
39+
--border-radius: 0.75rem;
2240
}
2341

24-
.ls-verification-form__resend {
42+
.ls-verification-form__back-link {
2543
display: flex;
2644
justify-content: center;
2745
margin-top: 1rem;
46+
font-size: 0.9rem;
2847
}
2948

3049
.ls-verification-form__success {
31-
background-color: rgba(45, 211, 111, 0.1);
50+
background-color: rgb(45 211 111 / 10%);
3251
border-radius: 8px;
3352
padding: 12px;
3453
margin-bottom: 1rem;

‎frontend/src/pages/Auth/Verify/components/VerificationForm.tsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { AuthError } from 'common/models/auth';
1111
import { useAuth } from 'common/hooks/useAuth';
1212
import { useProgress } from 'common/hooks/useProgress';
1313
import Input from 'common/components/Input/Input';
14-
import HeaderRow from 'common/components/Text/HeaderRow';
1514
import { formatAuthError } from 'common/utils/auth-errors';
1615
import AuthErrorDisplay from 'common/components/Auth/AuthErrorDisplay';
1716
import AuthLoadingIndicator from 'common/components/Auth/AuthLoadingIndicator';
@@ -152,17 +151,14 @@ const VerificationForm = ({
152151
>
153152
{({ dirty, isSubmitting }) => (
154153
<Form data-testid={`${testid}-form`}>
155-
<HeaderRow border>
156-
<div>{t('email-verification.title', { ns: 'auth' })}</div>
157-
</HeaderRow>
154+
<h1 className="ls-verification-form__title">
155+
{t('confirm-account.title', { ns: 'auth' })}
156+
</h1>
158157

159158
<div className="ls-verification-form__message">
160-
<IonText>{t('email-verification.message', { ns: 'auth' })}</IonText>
161-
{email && (
162-
<IonText className="ls-verification-form__email">
163-
<strong>{email}</strong>
164-
</IonText>
165-
)}
159+
<IonText>
160+
{t('confirm-account.message', { ns: 'auth' })} {email && <strong>{email}</strong>}
161+
</IonText>
166162
</div>
167163

168164
<Input
@@ -184,18 +180,29 @@ const VerificationForm = ({
184180
disabled={isSubmitting || !dirty || isLoading}
185181
data-testid={`${testid}-button-submit`}
186182
>
187-
{t('confirm', { ns: 'auth' })}
183+
{t('confirm-account.submit', { ns: 'auth' })}
188184
</IonButton>
189185

190-
<div className="ls-verification-form__resend">
186+
<IonButton
187+
fill="outline"
188+
color="medium"
189+
className="ls-verification-form__resend-button"
190+
expand="block"
191+
onClick={handleResendCode}
192+
disabled={isSubmitting || isLoading}
193+
data-testid={`${testid}-button-resend`}
194+
>
195+
{t('resend-code', { ns: 'auth' })}
196+
</IonButton>
197+
198+
<div className="ls-verification-form__back-link">
191199
<IonButton
192200
fill="clear"
193201
color="medium"
194-
onClick={handleResendCode}
195-
disabled={isSubmitting || isLoading}
196-
data-testid={`${testid}-button-resend`}
202+
routerLink="/auth/signin"
203+
data-testid={`${testid}-button-back`}
197204
>
198-
{t('resend-code', { ns: 'auth' })}
205+
← {t('back-to-login', { ns: 'auth' })}
199206
</IonButton>
200207
</div>
201208
</Form>

0 commit comments

Comments
 (0)