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-4">
      <h2 className="text-xl mb-4">Paramètres du compte</h2>
      <form onSubmit={handleSubmit}>
        <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">
          <Button type="submit" primary text={' Mettre à jour'} />
        </div>
      </form>
    </div>
  );
}