M1_ProjetWeb/src/routes/+page.svelte

<script lang="ts">
    import { Label } from "$lib/components/ui/label";
    import { Button } from "$lib/components/ui/button";
    import { Input } from "$lib/components/ui/input";
    import * as Card from "$lib/components/ui/card";
    import { enhance } from '$app/forms';


</script>

<div class="w-full h-full flex justify-center items-center">
    <Card.Root class="w-[450px]">
        <Card.Header>
          <Card.Title>🌳</Card.Title>
          <Card.Description>Un chat collaboratif</Card.Description>
        </Card.Header>
        <form method="POST" action="?/login" use:enhance>
          <Card.Content>
              <div class="grid w-full max-w-sm items-center gap-1.5">
                <Label for="username">Nom d'utilisateur</Label>
                <Input type="text" name="username" id="username" />
              </div>
              <div class="pt-4 grid w-full max-w-sm items-center gap-1.5">
                <Label for="password">Mot de passe</Label>
                <Input type="password" name="password" id="password" />
              </div>
          </Card.Content>
          <Card.Footer>
            <Button type="submit">Se connecter</Button>
          </Card.Footer>
        </form>
      </Card.Root>
</div>