Skip to content

Commit

Permalink
Merge pull request #150 from PLADI-ALM/feat/PDW-98-resetPassword
Browse files Browse the repository at this point in the history 
[PDW-98/feat] 비밀번호 재설정
  • Loading branch information
@psyeon1120
psyeon1120 authored Nov 28, 2023
2 parents 26b9eab + 8eb6db5 commit e8d7c08
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 56 deletions.
4 changes: 3 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'App.css';
import {Outlet, Route, Routes} from 'react-router-dom';
import Sidebar from 'components/sidebar/Sidebar';
import Login from 'pages/basic/user/Login';
import EmailCheck from 'pages/basic/user/EmailCheck';
import ResetPassword from 'pages/basic/user/ResetPassword';
import SelectOffice from 'pages/basic/booking/office/SelectOffice';
import BookedList from 'pages/basic/myBookings/BookedList';
Expand Down Expand Up @@ -40,7 +41,8 @@ function App() {
<div className="App">
<Routes>
<Route path="/" element={<Login />} />
<Route path="/resetPassword" element={<ResetPassword />} />
<Route path="/email" element={<EmailCheck />} />
<Route path="/resetPW" element={<ResetPassword />} />
<Route element={<SidebarLayout />}>
<Route path="/officeBooking" element={<SelectOffice/>} />
<Route path="/officeBooking/:officeId" element={<OfficeBooking />} />
Expand Down
137 changes: 137 additions & 0 deletions src/pages/basic/user/EmailCheck.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import React, {useState} from 'react';
import styled from "styled-components"
import {useNavigate} from 'react-router-dom';
import LogoImg from "assets/images/imgNameLogo.svg"
import {UsersAxios} from 'api/AxiosApi';
import {notLogInError} from 'utils/ErrorHandlerUtil';

const Container = styled.div`
height: fit-content;
width: fit-content;
margin: auto;
`

const TitleBox = styled.div`
display: flex;
flex-direction: column;
`

const Logo = styled.img.attrs({src: `${LogoImg}`})`
height: 60px;
margin-right: 20px;
`

const NameBox = styled.div`
display: flex;
flex-direction: column;
justify-content: flex-end;
`

const TitleName = styled.h3`
font-size: 40px;
margin-top: 40px;
color: #000000;
`

const CheckEmailCodeForm = styled.form`
display: flex;
flex-direction: column;
margin-top: 50px;
width: 400px;
align-items: flex-end;
`

const CheckCodeFormInput = styled.input`
height: 50px;
width: inherit;
border: 1px solid #E1E0E2;
padding: 0 20px;
margin-bottom: 16px;
background-color: #F7F8F9;
border-radius: 20px;
box-sizing: border-box;
font-family: NanumSquare_ac;
font-size: 15px;
`
const SendEmailInput = styled.div`
width: inherit;
display: flex;
flex-direction: row;
align-items: baseline;
`
const SendEmailButton = styled.button`
height: 40px;
width: 150px;
font-size: 20px;
cursor: pointer;
color: white;
background-color: #640FAF;
box-shadow: 0px 4px 4px 0px #00000040;
border: none;
border-radius: 20px;
margin-left: 10px;
`

const VerifyCodeBtn = styled(CheckCodeFormInput)`
height: 40px;
width: 150px;
font-size: 20px;
cursor: pointer;
color: white;
background-color: #640FAF;
border: none;
box-shadow: 0px 4px 4px 0px #00000040;
margin-right: 0;
`

function EmailCheck() {
const navigate = useNavigate();
const [email, setEmail] = useState("");
const onSubmitHandler = (e) => {
const inputEmail = e.target.email.value
const inputCode = e.target.code.value
e.preventDefault()
UsersAxios.post("/email-code", {
email: inputEmail,
code: inputCode
}).then((res) => {
navigate('/resetPW', {state: {email: email}})
}).catch((error) => {
notLogInError(error)
})
}

const onSendEmailHandler = (e) => {
e.preventDefault();
UsersAxios.post("/email", {
email: email
}).then((res) => {
alert("인증번호를 전송하였습니다.")
}).catch((error) => {
notLogInError(error)
})
}

return (
<Container>
<TitleBox>
<Logo/>
<NameBox>
<TitleName>비밀번호 재설정</TitleName>
</NameBox>
</TitleBox>

<CheckEmailCodeForm method="post" id="emailCheck-form" onSubmit={onSubmitHandler}>
<SendEmailInput>
<CheckCodeFormInput type="email" placeholder={"이메일"} name="email" onChange={(e) => { setEmail(e.target.value); }}/>
<SendEmailButton onClick={onSendEmailHandler}>인증</SendEmailButton>
</SendEmailInput>
<CheckCodeFormInput type="text" id="inputCode" placeholder={"인증번호"} name="code"/>
<VerifyCodeBtn className="submitBtn" id="submitBtn" type="submit" value="완료"/>
</CheckEmailCodeForm>
</Container>
)
}

export default EmailCheck;
2 changes: 1 addition & 1 deletion src/pages/basic/user/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ function Login() {
<LoginInput type={"password"} id="inputPw" placeholder={"비밀번호"} name="password" />
<LoginBtn className="submitBtn" id="submitBtn" type="submit" value="로그인" />
</LoginForm>
<PWReset to={"/resetPassword"}>비밀번호 재설정</PWReset>
<PWReset to={"/email"}>비밀번호 재설정</PWReset>
</Container>
)
}
Expand Down
82 changes: 28 additions & 54 deletions src/pages/basic/user/ResetPassword.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useState } from 'react';
import React from 'react';
import styled from "styled-components"
import {Link} from 'react-router-dom';
import {useLocation} from 'react-router-dom';
import LogoImg from "assets/images/imgNameLogo.svg"
import {UsersAxios} from 'api/AxiosApi';
import {basicError, notLogInError} from 'utils/ErrorHandlerUtil';
import {notLogInError} from 'utils/ErrorHandlerUtil';

const Container = styled.div`
height: fit-content;
Expand Down Expand Up @@ -33,15 +33,15 @@ const TitleName = styled.h3`
color: #000000;
`

const ResetPWForm = styled.form`
const ResetPasswordCodeForm = styled.form`
display: flex;
flex-direction: column;
margin-top: 50px;
width: 400px;
align-items: flex-end;
`

const ResetPWInput = styled.input`
const ResetPasswordFormInput = styled.input`
height: 50px;
width: inherit;
border: 1px solid #E1E0E2;
Expand All @@ -53,29 +53,9 @@ const ResetPWInput = styled.input`
font-family: NanumSquare_ac;
font-size: 15px;
`
const ResetPWEmailInput = styled.div`
width: inherit;
display: flex;
flex-direction: row;
align-items: baseline;
`
const SendEmailButton = styled.button`
height: 40px;
width: 150px;
font-size: 20px;
cursor: pointer;
color: white;
background-color: #640FAF;
box-shadow: 0px 4px 4px 0px #00000040;
border: none;
border-radius: 20px;
margin-left: 10px;
`

const ResetPWBtn = styled(ResetPWInput)`
const ResetPasswordBtn = styled(ResetPasswordFormInput)`
height: 40px;
width: 150px;
font-size: 20px;
cursor: pointer;
color: white;
Expand All @@ -86,35 +66,32 @@ const ResetPWBtn = styled(ResetPWInput)`
`

function ResetPassword() {
const [email, setEmail] = useState("");
const [click, isClick] = useState(true);
const location = useLocation();
const email = location?.state?.email
if (email == null) {
alert("잘못된 접근입니다.")
window.location.replace('/')
}

const onSubmitHandler = (e) => {
if (!click) return
const inputEmail = e.target.email.value
const inputCode = e.target.code.value
const inputPw = e.target.password.value
const inputCheckPw = e.target.newPw.value
e.preventDefault()
UsersAxios.post("/email-code", {
email: inputEmail,
code: inputCode
if (inputPw !== inputCheckPw) {
alert("비밀번호가 일치하지 않습니다. 다시 확인해봐주세요.")
return
}
UsersAxios.patch("/password", {
email: email,
password: inputPw
}).then((res) => {
alert("비밀번호 재설정이 되었습니다.")
window.location.replace('/')
}).catch((error) => {
notLogInError(error)
})
}

const onSendEmailHandler = (e) => {
e.preventDefault();
UsersAxios.post("/email", {
email: email
}).then((res) => {
alert("인증번호를 전송하였습니다.")
isClick(true)
}).catch((error) => {
notLogInError(error)
})
}

return (
<Container>
<TitleBox>
Expand All @@ -124,14 +101,11 @@ function ResetPassword() {
</NameBox>
</TitleBox>

<ResetPWForm method="post" id="resetPassword-form" onSubmit={onSubmitHandler}>
<ResetPWEmailInput>
<ResetPWInput type="email" placeholder={"이메일"} name="email" onChange={(e) => { setEmail(e.target.value); }}/>
<SendEmailButton onClick={onSendEmailHandler}>인증</SendEmailButton>
</ResetPWEmailInput>
<ResetPWInput type="text" id="inputCode" placeholder={"인증번호"} name="code"/>
<ResetPWBtn className="submitBtn" id="submitBtn" type="submit" value="다음으로"/>
</ResetPWForm>
<ResetPasswordCodeForm method="post" id="resetPassword-form" onSubmit={onSubmitHandler}>
<ResetPasswordFormInput type="password" placeholder={"새 비밀번호"} name="password"/>
<ResetPasswordFormInput type="password" id="inputCheckPW" placeholder={"비밀번호 확인"} name="newPw"/>
<ResetPasswordBtn className="submitBtn" id="submitBtn" type="submit" value="완료"/>
</ResetPasswordCodeForm>
</Container>
)
}
Expand Down

0 comments on commit e8d7c08

Please sign in to comment.