wedding-planner-frontend/app/ui/components/login-form.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import { FloatLabel } from 'primereact/floatlabel';
import { InputText } from 'primereact/inputtext';
import { login } from '../../api/authentication';
import { useState, useEffect } from 'react';
import { classNames } from './button';
import { useRouter } from 'next/navigation'
import { User } from '../../lib/definitions';
import { getSlug } from '@/app/lib/utils';

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const router = useRouter();

  const [currentUser, setCurrentUser] = useState<User | null>(null);

  useEffect(() => {
    localStorage.setItem('currentUser', JSON.stringify(currentUser));
  }, [currentUser]);

  return (
    <div className="card flex justify-evenly py-5">
      <FloatLabel>
        <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
        <label htmlFor="email">Email</label>
      </FloatLabel>
      <FloatLabel>
        <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
        <label htmlFor="password">Password</label>
      </FloatLabel>
      <button
        className={classNames('primary')}
        disabled={email.length == 0 || password.length == 0}
        onClick={() => login({
          email: email,
          password: password,
          onLogin: (user) => {
            setCurrentUser(user);
            router.push(`${getSlug()}/dashboard`)
          }
        })}>
        Sign in
      </button>
    </div>
  )
}