x-server-mobile/frontend/src/pages/change-password/index.tsx

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Input, Button, Toast } from 'antd-mobile'
import { useTranslation } from 'react-i18next'
import { userApi } from '@/services/api'
import styles from './change-password.module.css'

export default function ChangePassword() {
  const navigate = useNavigate()
  const { t } = useTranslation()
  const [formData, setFormData] = useState({
    oldPassword: '',
    newPassword: '',
    confirmPassword: '',
  })
  const [loading, setLoading] = useState(false)

  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

  const validateForm = (): string | null => {
    if (!formData.oldPassword || !formData.newPassword || !formData.confirmPassword) {
      return t('changePassword.fillAllFields')
    }
    if (formData.newPassword.length < 6) {
      return t('changePassword.passwordTooShort')
    }
    if (formData.newPassword !== formData.confirmPassword) {
      return t('changePassword.passwordMismatch')
    }
    return null
  }

  const handleSubmit = async () => {
    const error = validateForm()
    if (error) {
      Toast.show(error)
      return
    }

    setLoading(true)
    try {
      await userApi.changePassword({
        old_password: formData.oldPassword,
        new_password: formData.newPassword,
        confirm_password: formData.confirmPassword,
      })
      Toast.show(t('changePassword.success'))
      setTimeout(() => {
        navigate(-1)
      }, 1500)
    } catch (error: any) {
      const message = error.message || t('error.unknownError')
      Toast.show(message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className={styles.page}>
      <div className={styles.container}>
        <h1 className={styles.title}>{t('changePassword.title')}</h1>

        <div className={styles.form}>
          <div className={styles.field}>
            <label className={styles.label}>{t('changePassword.oldPassword')}</label>
            <Input
              type="password"
              placeholder={t('changePassword.oldPasswordPlaceholder')}
              value={formData.oldPassword}
              onChange={(value) => handleChange('oldPassword', value)}
              clearable
            />
          </div>

          <div className={styles.field}>
            <label className={styles.label}>{t('changePassword.newPassword')}</label>
            <Input
              type="password"
              placeholder={t('changePassword.newPasswordPlaceholder')}
              value={formData.newPassword}
              onChange={(value) => handleChange('newPassword', value)}
              clearable
            />
          </div>

          <div className={styles.field}>
            <label className={styles.label}>{t('changePassword.confirmPassword')}</label>
            <Input
              type="password"
              placeholder={t('changePassword.confirmPasswordPlaceholder')}
              value={formData.confirmPassword}
              onChange={(value) => handleChange('confirmPassword', value)}
              clearable
            />
          </div>

          <Button
            block
            color="primary"
            size="large"
            loading={loading}
            onClick={handleSubmit}
            className={styles.submitBtn}
          >
            {t('changePassword.submit')}
          </Button>
        </div>
      </div>
    </div>
  )
}