since3-portal/modules/loginPage/ui/views/login-view.tsx

"use client"

import { useActionState, useState } from "react"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Eye, EyeOff, Lock, User } from 'lucide-react';
import { Input } from "@/components/ui/input"
import Image from "next/image"
import { Button } from "@/components/ui/button";
import { login } from "../../actions/auth";

const LoginPageView = () => {
  const [showPassword, setShowPassword] = useState(false)
  const [state, formAction, pending] = useActionState(login, undefined);

  return (
    <div className="flex min-h-svh flex-col bg-background p-4 sm:p-6">
        <Image
            src="/pictures/since3-logo.svg" alt=""
            width={1617}
            height={332}
            loading="eager"
            className="h-5 w-auto self-start md:h-6 dark:hidden"/>
        <Image
            src="/pictures/since3-logo-weiss.svg" alt=""
            width={1617}
            height={332}
            loading="eager"
            className="hidden h-5 w-auto self-start md:h-6 dark:block"/>
        <div className="flex flex-1 flex-col items-center justify-center py-10">
            <h1 className="mb-6 text-2xl font-semibold sm:text-3xl">Login</h1>
            <form action={formAction} className="w-full max-w-sm ">
                <FieldGroup>
                    <Field>
                        <FieldLabel htmlFor="form-email"><User className="w-4 h-4"/> Email <span className="text-destructive">*</span></FieldLabel>
                        <Input
                            id="form-email"
                            name="email"
                            type="text"
                            className="focus-visible:ring-0"
                            required
                        />
                    </Field>
                    <Field>
                        <FieldLabel htmlFor="form-password"><Lock className="w-4 h-4"/> Password <span className="text-destructive">*</span></FieldLabel>
                        <div className="relative">
                            <Input
                                id="form-password"
                                name="password"
                                type={showPassword ? "text" : "password"}
                                className="focus-visible:ring-0 pr-10"
                                required
                            />
                            <button
                                type="button"
                                onClick={() => setShowPassword((prev) => !prev)}
                                className="absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground"
                                aria-label={showPassword ? "Passwort verbergen" : "Passwort anzeigen"}
                                tabIndex={-1}
                            >
                                {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                            </button>
                        </div>
                    </Field>
                    <Field>
                        {state?.error && (
                            <p className="text-sm text-destructive">{state.error}</p>
                        )} 
                        <Button type="submit" disabled={pending} className="cursor-pointer">
                            {pending ? "Bitte warten..." : "Login"}
                        </Button>
                    </Field>
                </FieldGroup>
            </form>
        </div>
        <div>
            <p className="text-center text-muted-foreground text-sm sm:text-left">Bei Fragen: <a href="mailto:info@since3.de" className="underline">info@since3.de</a></p>
        </div>
    </div>
  )
}

export default LoginPageView