test(e2e): test login page

src/app/login/page.tsx

@@ -30,7 +30,9 @@ export default async function LoginPage() {
         <div>
           <Card className='w-[350px] max-w-screen'>
             <CardHeader>
-              <CardTitle className='text-lg text-center'>Login</CardTitle>
+              <CardTitle className='text-lg text-center' data-cy='login-header'>
+                Login
+              </CardTitle>
             </CardHeader>
             <CardContent className='gap-6 flex flex-col'>
               <LoginForm />
@@ -42,6 +44,7 @@ export default async function LoginPage() {
                   key={provider.id}
                   provider={provider.id}
                   providerDisplayName={provider.name}
+                  data-cy={'sso-login-button_' + provider.name.toLowerCase()}
                 />
               ))}
             </CardContent>

src/components/labeled-input.tsx

@@ -7,13 +7,14 @@ export default function LabeledInput({
   placeholder,
   value,
   name,
+  ...props
 }: {
   type: 'text' | 'email' | 'password';
   label: string;
   placeholder?: string;
+  name: string;
   value?: string;
-  name?: string;
-}) {
+} & React.InputHTMLAttributes<HTMLInputElement>) {
   return (
     <div className='flex flex-col gap-1'>
       <Label htmlFor={name}>{label}</Label>
@@ -24,6 +25,7 @@ export default function LabeledInput({
         defaultValue={value}
         id={name}
         name={name}
+        {...props}
       />
     </div>
   );

src/components/user/login-form.tsx

@@ -10,6 +10,7 @@ export default function LoginForm() {
   return (
     <form
       className='flex flex-col gap-5 w-full'
+      data-cy='login-form'
       action={async (formData) => {
         'use server';
         try {
@@ -27,17 +28,20 @@ export default function LoginForm() {
         label='E-Mail or Username'
         placeholder='What you are known as.'
         name='email'
+        data-cy='email-input'
       />
       <LabeledInput
         type='password'
         label='Password'
         placeholder="Let's hope you remember it."
         name='password'
+        data-cy='password-input'
       />
       <Button
         className='hover:bg-blue-600 hover:text-white'
         type='submit'
         variant='secondary'
+        data-cy='login-button'
       >
         Login
       </Button>

src/components/user/sso-login-button.tsx

@@ -5,10 +5,11 @@ import { faOpenid } from '@fortawesome/free-brands-svg-icons';
 export default function SSOLogin({
   provider,
   providerDisplayName,
+  ...props
 }: {
   provider: string;
   providerDisplayName: string;
-}) {
+} & React.HTMLProps<HTMLFormElement>) {
   return (
     <form
       className='flex flex-col items-center gap-4 w-full'
@@ -16,6 +17,7 @@ export default function SSOLogin({
         'use server';
         await signIn(provider);
       }}
+      {...props}
     >
       <IconButton
         className='w-full'