forked from binary-com/deriv-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #77 from suisin-deriv/suisin/UPM822/create_email_v…
…erification_screen chore: add Email Verification for users
- Loading branch information
Showing
4 changed files
with
99 additions
and
3 deletions.
There are no files selected for viewing
65 changes: 65 additions & 0 deletions
65
packages/account/src/Sections/Profile/PhoneVerification/confirm-your-email.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import React, { useRef } from 'react'; | ||
import PhoneVerificationCard from './phone-verification-card'; | ||
import { CaptionText, Text } from '@deriv-com/quill-ui'; | ||
import { Localize, localize } from '@deriv/translations'; | ||
import { observer, useStore } from '@deriv/stores'; | ||
import { Input } from '@deriv/components'; | ||
|
||
const ConfirmYourEmail = observer(() => { | ||
const [timer, setTimer] = React.useState(60); | ||
const [startTimer, setStartTimer] = React.useState(false); | ||
|
||
const { client } = useStore(); | ||
const { account_settings } = client; | ||
const { email } = account_settings; | ||
|
||
const resendCodeText = useRef('Resend code'); | ||
|
||
React.useEffect(() => { | ||
let countdown: NodeJS.Timeout; | ||
if (startTimer && timer > 0) { | ||
countdown = setInterval(() => { | ||
setTimer(prevTime => prevTime - 1); | ||
resendCodeText.current = `Resend code in ${timer - 1}s`; | ||
}, 1000); | ||
} else { | ||
setStartTimer(false); | ||
resendCodeText.current = 'Resend code'; | ||
} | ||
|
||
return () => clearInterval(countdown); | ||
}, [timer, startTimer]); | ||
|
||
const resendCode = () => { | ||
setTimer(60); | ||
setStartTimer(true); | ||
}; | ||
|
||
return ( | ||
<PhoneVerificationCard is_small_card> | ||
<Text bold> | ||
<Localize i18n_default_text="Confirm it's you" /> | ||
</Text> | ||
<div className='phone-verification__card--email-verification-content'> | ||
<Text size='sm'> | ||
<Localize | ||
i18n_default_text="We've sent a verification code to <0>{{users_email}}</0>." | ||
values={{ users_email: email }} | ||
components={[<strong key={0} />]} | ||
/> | ||
</Text> | ||
<Text size='sm'> | ||
<Localize i18n_default_text='Enter the code or click the link in the email to verify that the account belongs to you.' /> | ||
</Text> | ||
</div> | ||
<div className='phone-verification__card--email-verification-otp-container'> | ||
<Input id='otp_code' type='text' name='otp_code' label={localize('OTP code')} data-lpignore='true' /> | ||
<CaptionText bold underlined onClick={resendCode}> | ||
<Localize i18n_default_text='{{resendCode}}' values={{ resendCode: resendCodeText.current }} /> | ||
</CaptionText> | ||
</div> | ||
</PhoneVerificationCard> | ||
); | ||
}); | ||
|
||
export default ConfirmYourEmail; |
11 changes: 9 additions & 2 deletions
11
packages/account/src/Sections/Profile/PhoneVerification/phone-verification-card.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,14 @@ | ||
import classNames from 'classnames'; | ||
import React from 'react'; | ||
|
||
const PhoneVerificationCard = ({ children }: React.PropsWithChildren) => ( | ||
<div className='phone-verification__card'>{children}</div> | ||
type TPhoneVerificationCard = { | ||
is_small_card?: boolean; | ||
}; | ||
|
||
const PhoneVerificationCard = ({ children, is_small_card }: React.PropsWithChildren<TPhoneVerificationCard>) => ( | ||
<div className={classNames('phone-verification__card', { 'phone-verification__card--small-card': is_small_card })}> | ||
{children} | ||
</div> | ||
); | ||
|
||
export default PhoneVerificationCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters