fix login utility for playwright

apps/app/playwright/utils/Login.ts

@@ -7,12 +7,15 @@ export const login = async (page: Page): Promise<void> => {
   // Perform authentication steps. Replace these actions with your own.
   await page.goto('/admin');
 
-  const loginForm = await page.getByRole('form');
+  const loginForm = await page.getByTestId('login-form');
 
   if (loginForm != null) {
-    await page.getByLabel('Username or E-mail').fill('admin');
-    await page.getByLabel('Password').fill('adminadmin');
-    await page.locator('[type=submit]').filter({ hasText: 'Login' }).click();
+    await loginForm.getByPlaceholder('Username or E-mail').fill('admin');
+    await loginForm.getByPlaceholder('Password').fill('adminadmin');
+    await loginForm
+      .locator('[type=submit]')
+      .filter({ hasText: 'Login' })
+      .click();
   }
 
   await page.waitForURL('/admin');

apps/app/src/client/components/LoginForm/LoginForm.tsx

@@ -213,7 +213,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           </div>
         )}
 
-        <form onSubmit={handleLoginWithLocalSubmit} id="login-form">
+        <form onSubmit={handleLoginWithLocalSubmit} data-testid="login-form">
           <div className="input-group">
             <label
               className="text-white opacity-75 d-flex align-items-center"
@@ -582,11 +582,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
 
   return (
     <div className={moduleClass}>
-      <div
-        className="nologin-dialog mx-auto rounded-4 rounded-top-0"
-        id="nologin-dialog"
-        data-testid="login-form"
-      >
+      <div className="nologin-dialog mx-auto rounded-4 rounded-top-0">
         <div className="row mx-0">
           <div className="col-12 px-md-4 pb-5">
             <ReactCardFlip