117 lines
4.4 KiB
TypeScript
Executable File
117 lines
4.4 KiB
TypeScript
Executable File
import React, { useState } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { Eye, EyeOff } from 'lucide-react';
|
|
|
|
const PasswordReset = () => {
|
|
const [password, setPassword] = useState('');
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [message, setMessage] = useState('');
|
|
const { uid, token } = useParams();
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
if (password !== confirmPassword) {
|
|
setMessage('パスワードが一致しません。');
|
|
return;
|
|
}
|
|
try {
|
|
const response = await fetch(`/api/reset-password/${uid}/${token}/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ new_password: password }),
|
|
});
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
setMessage('パスワードが正常にリセットされました。');
|
|
} else {
|
|
setMessage(data.message || 'パスワードのリセットに失敗しました。');
|
|
}
|
|
} catch (error) {
|
|
setMessage('エラーが発生しました。もう一度お試しください。');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
|
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
|
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|
パスワードのリセット
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
|
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
|
|
<form className="space-y-6" onSubmit={handleSubmit}>
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
|
|
新しいパスワード
|
|
</label>
|
|
<div className="mt-1 relative">
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type={showPassword ? "text" : "password"}
|
|
autoComplete="new-password"
|
|
required
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="h-5 w-5 text-gray-400" />
|
|
) : (
|
|
<Eye className="h-5 w-5 text-gray-400" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="confirm-password" className="block text-sm font-medium text-gray-700">
|
|
パスワードの確認
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
id="confirm-password"
|
|
name="confirm-password"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
パスワードをリセット
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{message && (
|
|
<div className="mt-6 text-center text-sm text-gray-500">
|
|
{message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PasswordReset;
|