n3wt-school/Front-End/src/app/[locale]/parents/settings/page.js

'use client';
import React, { useState } from 'react';
import Button from '@/components/Form/Button';
import InputText from '@/components/Form/InputText';
import logger from '@/utils/logger';
import { useNotification } from '@/context/NotificationContext';

export default function SettingsPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const { showNotification } = useNotification();

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleConfirmPasswordChange = (e) => {
    setConfirmPassword(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      showNotification(
        'Les mots de passe ne correspondent pas',
        'error',
        'Erreur'
      );
      return;
    }
    // Logique pour mettre à jour l'email et le mot de passe
    logger.debug('Email:', email);
    logger.debug('Password:', password);
  };

  return (
    <div className="p-6">
      <h1 className="font-headline text-2xl font-bold text-gray-900 mb-6">
        Paramètres du compte
      </h1>
      <div className="bg-white rounded-md border border-gray-200 shadow-sm p-6 max-w-md">
        <form onSubmit={handleSubmit} className="space-y-4">
          <InputText
            type="email"
            id="email"
            label="Email"
            value={email}
            onChange={handleEmailChange}
            required
          />
          <InputText
            type="password"
            id="password"
            label="Nouveau mot de passe"
            value={password}
            onChange={handlePasswordChange}
            required
          />
          <InputText
            type="password"
            id="confirmPassword"
            label="Confirmer le mot de passe"
            value={confirmPassword}
            onChange={handleConfirmPasswordChange}
            required
          />
          <div className="flex items-center justify-between pt-2">
            <Button type="submit" primary text={'Mettre à jour'} />
          </div>
        </form>
      </div>
    </div>
  );
}