ResetPassword.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useSearchParams, Link } from 'react-router-dom';
import PublicLayout from '../components/Layout/PublicLayout';
import { apiFetch } from '../lib/api';
 
export default function ResetPassword() {
  const [params] = useSearchParams();
  const token = params.get('token') || '';
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [ok, setOk] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
 
  async function handleSubmit(e) {
    e.preventDefault();
    if (password !== confirm) { setError('Passwords do not match'); return; }
    setLoading(true);
    setError('');
    try {
  const res = await fetch('/users/reset-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token, password })
      });
      const ct = res.headers.get('content-type') || '';
      const data = ct.includes('json') ? await res.json() : { };
      if (!res.ok) throw new Error(data.error || 'Reset failed');
      setOk(true);
    } catch (err) {
      setError(err.message || 'Error');
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <PublicLayout>
      <div style={{ maxWidth: 480, margin: '3rem auto', padding: '2rem', background: '#fff', borderRadius: 12, boxShadow: '0 8px 24px rgba(0,0,0,0.08)' }}>
        <h1>Reset Password</h1>
        {ok ? (
          <div>
            <p>Your password has been reset. You can now <Link to="/login">log in</Link>.</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit}>
            <div style={{ marginBottom: 12 }}>
              <label>New Password</label>
              <input type="password" value={password} onChange={(e)=>setPassword(e.target.value)} required style={{ width: '100%', padding: 10, marginTop: 6 }} />
            </div>
            <div style={{ marginBottom: 12 }}>
              <label>Confirm Password</label>
              <input type="password" value={confirm} onChange={(e)=>setConfirm(e.target.value)} required style={{ width: '100%', padding: 10, marginTop: 6 }} />
            </div>
            {error && <div style={{ color: 'red', marginBottom: 8 }}>{error}</div>}
            <button disabled={loading} style={{ padding: '10px 16px' }}>{loading ? 'Resetting…' : 'Reset Password'}</button>
          </form>
        )}
      </div>
    </PublicLayout>
  );
}