-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
44 changed files
with
645 additions
and
288 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,21 @@ | ||
| import { test } from '@playwright/test'; | ||
|
|
||
| import { ROUTE_PATH } from '@/constants/routePath'; | ||
|
|
||
| test('이메일을 통해 로그인을 할 수 있다.', async ({ page }) => { | ||
| await page.goto(ROUTE_PATH.signIn); | ||
| await page.getByText('비밀번호를 잊으셨나요?').click(); | ||
| await page.getByLabel('이메일').click(); | ||
| await page.getByLabel('이메일').fill('[email protected]'); | ||
| await page.getByRole('button', { name: '전송' }).click(); | ||
| await page.getByLabel('다음').click(); | ||
| await page.getByLabel('검증 코드').click(); | ||
| await page.getByLabel('검증 코드').fill('[email protected]'); | ||
| await page.getByRole('button', { name: '확인' }).click(); | ||
| await page.getByLabel('다음').click(); | ||
| await page.getByLabel('새 비밀번호', { exact: true }).click(); | ||
| await page.getByLabel('새 비밀번호', { exact: true }).fill('wagd12'); | ||
| await page.getByLabel('새 비밀번호', { exact: true }).press('Tab'); | ||
| await page.getByLabel('새 비밀번호 확인').fill('wagd12'); | ||
| await page.getByRole('button', { name: '확인' }).click(); | ||
| }); |
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
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
94 changes: 94 additions & 0 deletions
94
frontend/src/components/ResetPassword/EnterVerificationCodeStep.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,94 @@ | ||
| import { useState } from 'react'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| import { BangBangIcon, BangGgoodTextIcon } from '@/assets/assets'; | ||
| import Button from '@/components/_common/Button/Button'; | ||
| import FlexBox from '@/components/_common/FlexBox/FlexBox'; | ||
| import FormField from '@/components/_common/FormField/FormField'; | ||
| import Header from '@/components/_common/Header/Header'; | ||
| import CS from '@/components/ResetPassword/style'; | ||
| import { ROUTE_PATH } from '@/constants/routePath'; | ||
| import usePostResetPasswordCode from '@/hooks/query/usePostResetPasswordCode'; | ||
| import useValidateInput from '@/hooks/useValidateInput'; | ||
| import { ResetPasswordArgs } from '@/types/user'; | ||
|
|
||
| interface Props { | ||
| args: Pick<ResetPasswordArgs, 'email'>; | ||
| onNext: (value: Pick<ResetPasswordArgs, 'email' | 'code'>) => void; | ||
| } | ||
|
|
||
| const EmailVerificationCodeStep = ({ args: { email }, onNext }: Props) => { | ||
| const [isComplete, setIsComplete] = useState(false); | ||
| const [postErrorMessage, setPostErrorMessage] = useState(''); | ||
| const { mutate: postResetCode } = usePostResetPasswordCode(); | ||
|
|
||
| const { | ||
| value: code, | ||
| getErrorMessage: getCodeErrors, | ||
| onChange: onChangeCode, | ||
| isValidated: isCodeValid, | ||
| } = useValidateInput({ | ||
| initialValue: '', | ||
| validates: [], | ||
| }); | ||
|
|
||
| const handleClickSubmit = () => | ||
| postResetCode( | ||
| { email, code }, | ||
| { | ||
| onSuccess: () => setIsComplete(true), | ||
| onError: error => setPostErrorMessage(error.message), | ||
| }, | ||
| ); | ||
|
|
||
| const handleClickNext = () => onNext({ code, email }); | ||
|
|
||
| const canMove = isCodeValid && isComplete; | ||
|
|
||
| const handleKeyDown = (event: React.KeyboardEvent) => { | ||
| if (event.key === 'Enter' && canMove) { | ||
| onNext({ code, email }); | ||
| } | ||
| }; | ||
|
|
||
| const navigate = useNavigate(); | ||
| const handleClickBackward = () => navigate(ROUTE_PATH.root); | ||
|
|
||
| return ( | ||
| <> | ||
| <Header left={<Header.Backward onClick={handleClickBackward} />} /> | ||
| <CS.Wrapper> | ||
| <CS.LogoBox> | ||
| <BangBangIcon /> | ||
| <BangGgoodTextIcon aria-label="방끗 로고" /> | ||
| </CS.LogoBox> | ||
| <CS.Box> | ||
| <CS.Label>비밀번호 찾기</CS.Label> | ||
| <FormField onKeyDown={handleKeyDown}> | ||
| <FormField.Label label="검증 코드" htmlFor="code" /> | ||
| <FlexBox.Horizontal justify="flex-start" align="center"> | ||
| <FormField.Input | ||
| maxLength={254} | ||
| value={code} | ||
| id="code" | ||
| name="code" | ||
| onChange={onChangeCode} | ||
| style={{ width: '25rem' }} | ||
| /> | ||
| <div> | ||
| <CS.SendButton onClick={handleClickSubmit} disabled={canMove}> | ||
| 확인 | ||
| </CS.SendButton> | ||
| </div> | ||
| </FlexBox.Horizontal> | ||
| {getCodeErrors() && <FormField.ErrorMessage value={getCodeErrors()} />} | ||
| </FormField> | ||
| {postErrorMessage && <FormField.ErrorMessage value={postErrorMessage} />} | ||
| <Button label="다음" size="full" isSquare={true} color="dark" onClick={handleClickNext} disabled={!canMove} /> | ||
| </CS.Box> | ||
| </CS.Wrapper> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default EmailVerificationCodeStep; |
102 changes: 102 additions & 0 deletions
102
frontend/src/components/ResetPassword/ResetPasswordStep.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,102 @@ | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| import { BangBangIcon, BangGgoodTextIcon } from '@/assets/assets'; | ||
| import Button from '@/components/_common/Button/Button'; | ||
| import FlexBox from '@/components/_common/FlexBox/FlexBox'; | ||
| import FormField from '@/components/_common/FormField/FormField'; | ||
| import Header from '@/components/_common/Header/Header'; | ||
| import CS from '@/components/ResetPassword/style'; | ||
| import { ROUTE_PATH } from '@/constants/routePath'; | ||
| import useValidateInput from '@/hooks/useValidateInput'; | ||
| import { ResetPasswordArgs } from '@/types/user'; | ||
| import { validatePassword, validatePasswordConfirm } from '@/utils/authValidation'; | ||
|
|
||
| interface Props { | ||
| args: Pick<ResetPasswordArgs, 'email' | 'code'>; | ||
| onNext: (value: ResetPasswordArgs) => void; | ||
| } | ||
|
|
||
| const SendVerificationEmailStep = ({ args: { email, code }, onNext }: Props) => { | ||
| const { | ||
| value: password, | ||
| getErrorMessage: getPasswordErrors, | ||
| onChange: onChangePassword, | ||
| isValidated: isPasswordValid, | ||
| } = useValidateInput({ | ||
| initialValue: '', | ||
| validates: [validatePassword], | ||
| }); | ||
|
|
||
| const { | ||
| value: passwordConfirm, | ||
| getErrorMessage: getPasswordConfirmError, | ||
| onChange: onChangePasswordConfirm, | ||
| isValidated: isPasswordConfirmValidad, | ||
| } = useValidateInput({ | ||
| initialValue: '', | ||
| validates: [(value: string) => validatePasswordConfirm(value, password)], | ||
| }); | ||
|
|
||
| const canMove = isPasswordValid && isPasswordConfirmValidad; | ||
|
|
||
| const handleClickNext = () => onNext({ email, code, newPassword: password }); | ||
| const handleKeyDown = (event: React.KeyboardEvent) => { | ||
| if (event.key === 'Enter' && canMove) { | ||
| handleClickNext(); | ||
| } | ||
| }; | ||
|
|
||
| const navigate = useNavigate(); | ||
| const handleClickBackward = () => navigate(ROUTE_PATH.root); | ||
|
|
||
| return ( | ||
| <> | ||
| <Header left={<Header.Backward onClick={handleClickBackward} />} /> | ||
| <CS.Wrapper> | ||
| <CS.LogoBox> | ||
| <BangBangIcon /> | ||
| <BangGgoodTextIcon aria-label="방끗 로고" /> | ||
| </CS.LogoBox> | ||
| <CS.Box> | ||
| <CS.Label>비밀번호 찾기</CS.Label> | ||
| <FormField onKeyDown={handleKeyDown}> | ||
| <FormField.Label label="새 비밀번호" htmlFor="password" /> | ||
| <FlexBox.Horizontal justify="flex-start" align="center"> | ||
| <FormField.Input | ||
| maxLength={254} | ||
| value={password} | ||
| id="password" | ||
| name="password" | ||
| onChange={onChangePassword} | ||
| /> | ||
| </FlexBox.Horizontal> | ||
| {getPasswordErrors() && <FormField.ErrorMessage value={getPasswordErrors()} />} | ||
| </FormField> | ||
| <FormField onKeyDown={handleKeyDown}> | ||
| <FormField.Label label="새 비밀번호 확인" htmlFor="passwordConfirm" /> | ||
| <FlexBox.Horizontal justify="flex-start" align="center"> | ||
| <FormField.Input | ||
| id="passwordConfirm" | ||
| maxLength={254} | ||
| value={passwordConfirm} | ||
| name="passwordConfirm" | ||
| onChange={onChangePasswordConfirm} | ||
| /> | ||
| </FlexBox.Horizontal> | ||
| {getPasswordConfirmError() && <FormField.ErrorMessage value={getPasswordConfirmError()} />} | ||
| </FormField> | ||
| <Button | ||
| label="확인" | ||
| size="full" | ||
| isSquare={true} | ||
| color={'dark'} | ||
| onClick={handleClickNext} | ||
| disabled={!canMove} | ||
| /> | ||
| </CS.Box> | ||
| </CS.Wrapper> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default SendVerificationEmailStep; |
Oops, something went wrong.