Password Management

await gately.changePassword(currentPassword, newPassword)

try {
  await gately.changePassword('OldPass123!', 'NewSecurePass456!')
  alert('Password changed successfully!')
} catch (error) {
  alert('Failed to change password: ' + error.message)
}

import { useState } from 'react'
import { useGately } from '@gately/sdk'

function ChangePasswordForm() {
  const { changePassword } = useGately()
  const [formData, setFormData] = useState({
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
  const [error, setError] = useState('')
  const [success, setSuccess] = useState(false)
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError('')
    setSuccess(false)

    // Validate passwords match
    if (formData.newPassword !== formData.confirmPassword) {
      setError('New passwords do not match')
      return
    }

    setLoading(true)
    try {
      await changePassword(formData.currentPassword, formData.newPassword)
      setSuccess(true)
      setFormData({ currentPassword: '', newPassword: '', confirmPassword: '' })
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      {success && <div className="success">Password changed successfully!</div>}

      <label>
        Current Password
        <input
          type="password"
          value={formData.currentPassword}
          onChange={(e) => setFormData({ ...formData, currentPassword: e.target.value })}
          required
        />
      </label>

      <label>
        New Password
        <input
          type="password"
          value={formData.newPassword}
          onChange={(e) => setFormData({ ...formData, newPassword: e.target.value })}
          required
        />
      </label>

      <label>
        Confirm New Password
        <input
          type="password"
          value={formData.confirmPassword}
          onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
          required
        />
      </label>

      <button type="submit" disabled={loading}>
        {loading ? 'Changing...' : 'Change Password'}
      </button>
    </form>
  )
}

await gately.requestPasswordReset(email)

await gately.confirmPasswordReset(email, resetToken, newPassword)

function ForgotPasswordForm() {
  const { requestPasswordReset } = useGately()
  const [email, setEmail] = useState('')
  const [sent, setSent] = useState(false)
  const [error, setError] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      await requestPasswordReset(email)
      setSent(true)
    } catch (err) {
      setError(err.message)
    }
  }

  if (sent) {
    return (
      <div className="success">
        <h2>Check your email</h2>
        <p>We sent a password reset link to {email}</p>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      
      <h2>Forgot Password</h2>
      <p>Enter your email to receive a reset link.</p>
      
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email address"
        required
      />
      
      <button type="submit">Send Reset Link</button>
    </form>
  )
}

function ResetPasswordPage() {
  const { confirmPasswordReset } = useGately()
  const [searchParams] = useSearchParams()
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [error, setError] = useState('')
  const [success, setSuccess] = useState(false)

  const email = searchParams.get('email')
  const token = searchParams.get('token')

  const handleSubmit = async (e) => {
    e.preventDefault()
    
    if (password !== confirmPassword) {
      setError('Passwords do not match')
      return
    }

    try {
      await confirmPasswordReset(email, token, password)
      setSuccess(true)
    } catch (err) {
      setError(err.message)
    }
  }

  if (success) {
    return (
      <div className="success">
        <h2>Password Reset</h2>
        <p>Your password has been reset successfully.</p>
        <Link to="/login">Log In</Link>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      
      <h2>Set New Password</h2>
      
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="New password"
        required
      />
      
      <input
        type="password"
        value={confirmPassword}
        onChange={(e) => setConfirmPassword(e.target.value)}
        placeholder="Confirm password"
        required
      />
      
      <button type="submit">Reset Password</button>
    </form>
  )
}

function PasswordStrength({ password }) {
  const getStrength = (pwd) => {
    let score = 0
    if (pwd.length >= 8) score++
    if (pwd.length >= 12) score++
    if (/[A-Z]/.test(pwd)) score++
    if (/[a-z]/.test(pwd)) score++
    if (/\d/.test(pwd)) score++
    if (/[^A-Za-z0-9]/.test(pwd)) score++
    return score
  }

  const strength = getStrength(password)
  const labels = ['Weak', 'Fair', 'Good', 'Strong', 'Very Strong']

  return (
    <div className="password-strength">
      <div className="bar" data-strength={strength} />
      <span>{labels[Math.min(strength, 4)]}</span>
    </div>
  )
}

try {
  await gately.changePassword(current, newPass)
} catch (error) {
  switch (error.code) {
    case 'INVALID_PASSWORD':
      showError('Current password is incorrect')
      break
    case 'WEAK_PASSWORD':
      showError('New password does not meet requirements')
      break
    case 'SAME_PASSWORD':
      showError('New password must be different from current')
      break
    default:
      showError('Failed to change password')
  }
}