109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
import { useLocalStorage } from 'usehooks-ts'
|
|
|
|
import { axiosInstance } from '@/libs/axios'
|
|
import { useSessionStore } from '@/store/session'
|
|
|
|
export default function PwResetForm() {
|
|
const [pwShow01, setPwShow01] = useState<boolean>(false) //비밀번호 확인 보이기 숨기기
|
|
const [pwShow02, setPwShow02] = useState<boolean>(false) //비밀번호 재확인 보이기 숨기기
|
|
|
|
const [pwd01, setPwd01] = useState<string>('')
|
|
const [pwd02, setPwd02] = useState<string>('')
|
|
|
|
const router = useRouter()
|
|
|
|
const { session } = useSessionStore()
|
|
const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })
|
|
|
|
const validatePwd = () => {
|
|
if (pwd01 !== pwd02) {
|
|
alert('비밀번호가 일치하지 않습니다.')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
const handleReset = async () => {
|
|
if (validatePwd()) {
|
|
const { data } = await axiosInstance(null).post(`/api/auth/chg-pwd`, {
|
|
loginId: session.userId,
|
|
email: session.email,
|
|
pwd: value.indivisualData,
|
|
chgPwd: pwd01,
|
|
})
|
|
|
|
if (data.data.result.resultCode === 'S') {
|
|
setValue({ indivisualData: pwd01 })
|
|
}
|
|
|
|
window.neoAlert(data.data.result.resultMsg, () => {
|
|
router.back()
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="border-frame">
|
|
<div className="data-form-wrap">
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">
|
|
新規パスワード再入力 <i className="import">*</i>
|
|
</div>
|
|
<div className="data-input">
|
|
<div className="login-input pw change">
|
|
<input
|
|
type={`${pwShow01 ? 'text' : 'password'}`}
|
|
className="login-frame"
|
|
placeholder="●●●●"
|
|
onChange={(e) => setPwd01(e.target.value)}
|
|
/>
|
|
<button className={`login-icon ${pwShow01 ? 'act' : ''}`} onClick={() => setPwShow01(!pwShow01)}>
|
|
<i className="show-icon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="data-input-guide">10文字以内</div>
|
|
</div>
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">
|
|
新規パスワード入力 <i className="import">*</i>
|
|
</div>
|
|
<div className="data-input">
|
|
<div className="login-input pw change">
|
|
<input
|
|
type={`${pwShow02 ? 'text' : 'password'}`}
|
|
className="login-frame"
|
|
placeholder="●●●●"
|
|
onChange={(e) => setPwd02(e.target.value)}
|
|
/>
|
|
<button className={`login-icon ${pwShow02 ? 'act' : ''}`} onClick={() => setPwShow02(!pwShow02)}>
|
|
<i className="show-icon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="data-input-guide">10文字以内</div>
|
|
</div>
|
|
</div>
|
|
<div className="btn-flex-wrap">
|
|
<div className="btn-bx">
|
|
<button className="btn-frame n-blue icon" onClick={() => router.back()}>
|
|
戻る<i className="btn-arr"></i>
|
|
</button>
|
|
</div>
|
|
<div className="btn-bx">
|
|
<button className="btn-frame red icon" onClick={handleReset}>
|
|
リセットする<i className="btn-arr"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|