julienfroidefond/stripstream
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor UI components to utilize new Container, Section, and StatusBadge components for improved layout and styling consistency across the application

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-17 11:49:28 +02:00
parent 4f28df6818
commit 482bd9b0d2
23 changed files with 669 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/auth/LoginForm.tsx
View File

@@ -4,6 +4,10 @@ import { useState } from "react";
import { useRouter } from "next/navigation";
import { signIn } from "next-auth/react";
import { useTranslate } from "@/hooks/useTranslate";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
interface LoginFormProps {
from?: string;
@@ -49,66 +53,37 @@ export function LoginForm({ from }: LoginFormProps) {
return (
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<label
htmlFor="email"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{t("login.form.email")}
</label>
<input
<Label htmlFor="email">{t("login.form.email")}</Label>
<Input
id="email"
name="email"
type="email"
autoComplete="email"
required
defaultValue="demo@stripstream.local"
className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
<label
htmlFor="password"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{t("login.form.password")}
</label>
<input
<Label htmlFor="password">{t("login.form.password")}</Label>
<Input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
defaultValue="fft$VSD96dis"
className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="flex items-center space-x-2">
<input
id="remember"
name="remember"
type="checkbox"
defaultChecked
className="h-4 w-4 rounded border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
/>
<label
htmlFor="remember"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
<Checkbox id="remember" name="remember" defaultChecked />
<Label htmlFor="remember" className="cursor-pointer">
{t("login.form.remember")}
</label>
</Label>
</div>
{error && (
<div className="text-red-600 text-sm">
{error}
</div>
)}
<button
type="submit"
disabled={isLoading}
className="bg-[#4F46E5] inline-flex w-full items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{error && <div className="text-sm text-destructive">{error}</div>}
<Button type="submit" disabled={isLoading} className="w-full">
{isLoading ? t("login.form.submit.loading.login") : t("login.form.submit.login")}
</button>
</Button>
</form>
);
}