Skip to content

Commit

Permalink
feat: 비밀번호 리셋 api 로직 추가 (#7)
Browse files Browse the repository at this point in the history
  • Loading branch information
OpenS3same committed Dec 2, 2024
1 parent 326537b commit f0cdecc
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 39 deletions.
18 changes: 18 additions & 0 deletions src/api/loginApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,21 @@ export const postSignIn = async (body: { email: string; password: string }) => {

return response.data;
};

export const postFindPassword = async (body: { email: string }) => {
const response = await axiosInstance.post(`/users/find`, body);

return response.data;
};

export const postResetPassword = async (
body: { newPassword: string },
token: string
) => {
const response = await axiosInstance.post(
`/users/reset?token=${token}`,
body
);

return response.data;
};
77 changes: 38 additions & 39 deletions src/components/pages/login/ResetPasswordPage.tsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,58 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { styled } from 'styled-components';
import { postResetPassword } from '../../../api/loginApi';

const ResetPasswordPage = () => {
const navigate = useNavigate();
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [showModal, setShowModal] = useState(false);

const handleConfirm = () => {
const handleConfirm = async () => {
if (password === confirmPassword && password.length >= 8) {
await postResetPassword({ newPassword: password }, '1');
setShowModal(true);
} else {
alert('비밀번호가 일치하지 않거나 유효하지 않습니다.');
}
};

return (
<>
<Wrapper>
<LeftContent>
<img
src="/images/login6.jpg"
alt="Login background"
style={{
width: '100%',
height: '100%',
objectFit: 'contain',
}}
/>
</LeftContent>
<RightContent>
<Title>비밀번호 재설정</Title>
<Subtitle>password</Subtitle>
<StyledInput
type="password"
placeholder="비밀번호 입력 (8 ~ 16자리)"
value={password}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setPassword(e.target.value)
}
/>
<Subtitle>confirm password</Subtitle>
<StyledInput
type="password"
placeholder="비밀번호 확인"
value={confirmPassword}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setConfirmPassword(e.target.value)
}
/>
<LoginButton onClick={handleConfirm}>Confirm</LoginButton>
</RightContent>
</Wrapper>

<Wrapper>
<LeftContent>
<img
src="/images/login6.jpg"
alt="Login background"
style={{
width: '100%',
height: '100%',
objectFit: 'contain',
}}
/>
</LeftContent>
<RightContent>
<Title>비밀번호 재설정</Title>
<Subtitle>password</Subtitle>
<StyledInput
type="password"
placeholder="비밀번호 입력 (8 ~ 16자리)"
value={password}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setPassword(e.target.value)
}
/>
<Subtitle>confirm password</Subtitle>
<StyledInput
type="password"
placeholder="비밀번호 확인"
value={confirmPassword}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setConfirmPassword(e.target.value)
}
/>
<LoginButton onClick={handleConfirm}>Confirm</LoginButton>
</RightContent>
{showModal && (
<ModalOverlay>
<ModalContent>
Expand All @@ -68,7 +67,7 @@ const ResetPasswordPage = () => {
</ModalContent>
</ModalOverlay>
)}
</>
</Wrapper>
);
};

Expand Down

0 comments on commit f0cdecc

Please sign in to comment.