Contoh penggunaan

Dalam contoh di atas, kita menggunakan useState untuk mengelola state dari email, password, dan error. Validasi dilakukan saat tombol Login ditekan dengan menggunakan yup. Jika ada kesalahan validasi, pesan kesalahan akan ditampilkan di dalam komponen Alert dari Chakra UI. Jika validasi berhasil, Anda dapat menambahkan logika login sesuai kebutuhan di dalam fungsi handleLogin.

import React, { useState } from 'react';
import {
  Input,
  Button,
  FormControl,
  FormLabel,
  FormErrorMessage,
  VStack,
  Alert,
  AlertIcon,
} from '@chakra-ui/react';
import * as yup from 'yup';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const schema = yup.object().shape({
    email: yup.string().email('Email tidak valid').required('Email diperlukan'),
    password: yup.string().required('Password diperlukan'),
  });

  const handleLogin = async () => {
    try {
      await schema.validate({ email, password }, { abortEarly: false });
      // Logika login akan ditempatkan di sini
      console.log('Login berhasil dengan email:', email);
      // Reset state setelah login berhasil
      setEmail('');
      setPassword('');
      setError('');
    } catch (err) {
      if (err instanceof yup.ValidationError) {
        const errors = err.errors.join(' ');
        setError(errors);
      }
    }
  };

  return (
    <VStack spacing={4} align="center">
      {error && (
        <Alert status="error">
          <AlertIcon />
          {error}
        </Alert>
      )}
      <FormControl isInvalid={!!error}>
        <FormLabel>Email</FormLabel>
        <Input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </FormControl>

      <FormControl isInvalid={!!error}>
        <FormLabel>Password</FormLabel>
        <Input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </FormControl>

      <Button onClick={handleLogin} colorScheme="teal">
        Login
      </Button>
    </VStack>
  );
};

export default Login;