-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/2fa' into mfa
- Loading branch information
Showing
9 changed files
with
184 additions
and
8 deletions.
There are no files selected for viewing
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,136 @@ | ||
| /* eslint-disable react/jsx-props-no-spreading */ | ||
| import React, { useState } from 'react'; | ||
| import ReactCodeInput from 'react-code-input'; | ||
| import { useTranslation } from 'next-i18next'; | ||
|
|
||
| import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail'; | ||
|
|
||
| import Button from '../basic/buttons/Button'; | ||
| import Error from '../basic/Error'; | ||
|
|
||
| // The style for the verification code input | ||
| const props = { | ||
| inputStyle: { | ||
| fontFamily: 'monospace', | ||
| margin: '4px', | ||
| MozAppearance: 'textfield', | ||
| width: '55px', | ||
| borderRadius: '5px', | ||
| fontSize: '24px', | ||
| height: '55px', | ||
| paddingLeft: '7', | ||
| backgroundColor: '#0d1117', | ||
| color: 'white', | ||
| border: '1px solid #2d2f33', | ||
| textAlign: 'center', | ||
| outlineColor: '#8ca542', | ||
| borderColor: '#2d2f33' | ||
| } | ||
| } as const; | ||
| const propsPhone = { | ||
| inputStyle: { | ||
| fontFamily: 'monospace', | ||
| margin: '4px', | ||
| MozAppearance: 'textfield', | ||
| width: '40px', | ||
| borderRadius: '5px', | ||
| fontSize: '24px', | ||
| height: '40px', | ||
| paddingLeft: '7', | ||
| backgroundColor: '#0d1117', | ||
| color: 'white', | ||
| border: '1px solid #2d2f33', | ||
| textAlign: 'center', | ||
| outlineColor: '#8ca542', | ||
| borderColor: '#2d2f33' | ||
| } | ||
| } as const; | ||
|
|
||
| interface CodeInputStepProps { | ||
| email: string; | ||
| incrementStep: () => void; | ||
| setCode: (value: string) => void; | ||
| codeError: boolean; | ||
| } | ||
|
|
||
| /** | ||
| * This is the second step of sign up where users need to verify their email | ||
| * @param {object} obj | ||
| * @param {string} obj.email - user's email to which we just sent a verification email | ||
| * @param {function} obj.incrementStep - goes to the next step of signup | ||
| * @param {function} obj.setCode - state updating function that set the current value of the emai verification code | ||
| * @param {boolean} obj.codeError - whether the code was inputted wrong or now | ||
| * @returns | ||
| */ | ||
| export default function TwoFAStep({ | ||
| email, | ||
| incrementStep, | ||
| setCode, | ||
| codeError | ||
| }: CodeInputStepProps): JSX.Element { | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [isResendingVerificationEmail, setIsResendingVerificationEmail] = useState(false); | ||
| const { t } = useTranslation(); | ||
|
|
||
| const resendVerificationEmail = async () => { | ||
| setIsResendingVerificationEmail(true); | ||
| setIsLoading(true); | ||
| sendVerificationEmail(email); | ||
| setTimeout(() => { | ||
| setIsLoading(false); | ||
| setIsResendingVerificationEmail(false); | ||
| }, 2000); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16"> | ||
| <p className="text-l flex justify-center text-bunker-300">{t('signup:step2-message')}</p> | ||
| <p className="text-l flex justify-center font-semibold my-2 text-bunker-300">{email} </p> | ||
| <div className="hidden md:block"> | ||
| <ReactCodeInput | ||
| name="" | ||
| inputMode="tel" | ||
| type="text" | ||
| fields={6} | ||
| onChange={setCode} | ||
| {...props} | ||
| className="mt-6 mb-2" | ||
| /> | ||
| </div> | ||
| <div className="block md:hidden"> | ||
| <ReactCodeInput | ||
| name="" | ||
| inputMode="tel" | ||
| type="text" | ||
| fields={6} | ||
| onChange={setCode} | ||
| {...propsPhone} | ||
| className="mt-2 mb-6" | ||
| /> | ||
| </div> | ||
| {codeError && <Error text={t('signup:step2-code-error')} />} | ||
| <div className="flex max-w-max min-w-28 flex-col items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2"> | ||
| <Button text={t('signup:verify') ?? ''} onButtonPressed={incrementStep} size="lg" /> | ||
| </div> | ||
| <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2"> | ||
| <div className="flex flex-row items-baseline gap-1 text-sm"> | ||
| <span className="text-bunker-400">{t('signup:step2-resend-alert')}</span> | ||
| <u | ||
| className={`font-normal ${ | ||
| isResendingVerificationEmail | ||
| ? 'text-bunker-400' | ||
| : 'text-primary-700 hover:text-primary duration-200' | ||
| }`} | ||
| > | ||
| <button disabled={isLoading} onClick={resendVerificationEmail} type="button"> | ||
| {isResendingVerificationEmail | ||
| ? t('signup:step2-resend-progress') | ||
| : t('signup:step2-resend-submit')} | ||
| </button> | ||
| </u> | ||
| </div> | ||
| <p className="text-sm text-bunker-400 pb-2">{t('signup:step2-spam-alert')}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
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
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
31 changes: 31 additions & 0 deletions
31
frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.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,31 @@ | ||
| import { Checkbox } from '@app/components/v2'; | ||
|
|
||
| type Props = { | ||
| isTwoFAEnabled?: boolean; | ||
| onIsTwoFAEnabledChange: (state: boolean) => void; | ||
| }; | ||
|
|
||
| export const SecuritySection = ({ | ||
| isTwoFAEnabled, | ||
| onIsTwoFAEnabledChange | ||
| }: Props) => { | ||
| return ( | ||
| <form> | ||
| <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2"> | ||
| <p className="mb-4 mt-2 text-xl font-semibold"> | ||
| Two-factor Authentication | ||
| </p> | ||
| <Checkbox | ||
| className="data-[state=checked]:bg-primary" | ||
| id="isTwoFAEnabled" | ||
| isChecked={isTwoFAEnabled} | ||
| onCheckedChange={(state) => { | ||
| onIsTwoFAEnabledChange(state as boolean); | ||
| }} | ||
| > | ||
| Enable 2-factor authentication via your personal email. | ||
| </Checkbox> | ||
| </div> | ||
| </form> | ||
| ); | ||
| }; |
1 change: 1 addition & 0 deletions
1
frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/index.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 @@ | ||
| export { SecuritySection } from './SecuritySection'; |
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