107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { hot } from 'react-hot-loader/root'
|
|
import { t } from '@/scripts/i18n'
|
|
import * as fetch from '@/scripts/net'
|
|
import { toast } from '@/scripts/notify'
|
|
import urls from '@/scripts/urls'
|
|
import Alert from '@/components/Alert'
|
|
|
|
const Reset: React.FC = () => {
|
|
const [password, setPassword] = useState('')
|
|
const [confirmation, setConfirmation] = useState('')
|
|
const [warningMessage, setWarningMessage] = useState('')
|
|
const [isPending, setIsPending] = useState(false)
|
|
|
|
const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setPassword(event.target.value)
|
|
}
|
|
|
|
const handleConfirmationChange = (
|
|
event: React.ChangeEvent<HTMLInputElement>,
|
|
) => {
|
|
setConfirmation(event.target.value)
|
|
}
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault()
|
|
|
|
if (password !== confirmation) {
|
|
setWarningMessage(t('auth.invalidConfirmPwd'))
|
|
return
|
|
}
|
|
|
|
setIsPending(true)
|
|
const { code, message } = await fetch.post<fetch.ResponseBody>(
|
|
location.href.replace(blessing.base_url, ''),
|
|
{ password },
|
|
)
|
|
if (code === 0) {
|
|
toast.success(message)
|
|
setTimeout(() => {
|
|
window.location.href = blessing.base_url + urls.auth.login()
|
|
}, 2000)
|
|
} else {
|
|
setWarningMessage(message)
|
|
setIsPending(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="input-group mb-3">
|
|
<input
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
maxLength={32}
|
|
className="form-control"
|
|
placeholder={t('auth.password')}
|
|
value={password}
|
|
onChange={handlePasswordChange}
|
|
/>
|
|
<div className="input-group-append">
|
|
<div className="input-group-text">
|
|
<i className="fas fa-lock"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="input-group mb-3">
|
|
<input
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
maxLength={32}
|
|
className="form-control"
|
|
placeholder={t('auth.repeat-pwd')}
|
|
value={confirmation}
|
|
onChange={handleConfirmationChange}
|
|
/>
|
|
<div className="input-group-append">
|
|
<div className="input-group-text">
|
|
<i className="fas fa-sign-in-alt"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Alert type="warning">{warningMessage}</Alert>
|
|
|
|
<button
|
|
className="btn btn-primary float-right"
|
|
type="submit"
|
|
disabled={isPending}
|
|
>
|
|
{isPending ? (
|
|
<>
|
|
<i className="fas fa-spinner fa-spin mr-1"></i>
|
|
{t('auth.resetting')}
|
|
</>
|
|
) : (
|
|
t('auth.reset-button')
|
|
)}
|
|
</button>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default hot(Reset)
|