UI: Improved usaged autocomplete in login pages

ui-ngx/src/app/modules/login/pages/login/create-password.component.html

@@ -26,7 +26,7 @@
     <span style="height: 4px;" *ngIf="!isLoading"></span>
     <mat-card-content class="!p-6">
       <form [formGroup]="createPassword" (ngSubmit)="onCreatePassword()">
-        <mat-form-field class="mat-block" appearance="outline">
+        <mat-form-field class="mat-block tb-autofilled" appearance="outline">
           <mat-label translate>common.password</mat-label>
           <input matInput
                  type="password"
@@ -43,9 +43,9 @@
             {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field class="mat-block" style="margin-bottom: 18px" appearance="outline">
+        <mat-form-field class="mat-block tb-autofilled" style="margin-bottom: 18px" appearance="outline">
           <mat-label translate>login.password-again</mat-label>
-          <input matInput type="password" formControlName="newPassword2"/>
+          <input matInput type="password" formControlName="newPassword2" autocomplete="new-password"/>
           <mat-icon class="material-icons" matPrefix>lock</mat-icon>
           <tb-toggle-password matSuffix></tb-toggle-password>
           <mat-error *ngIf="createPassword.get('newPassword2').hasError('passwordsNotMatch')">

ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html

@@ -162,9 +162,10 @@
               <div tb-toast class="flex flex-col items-center justify-start">
                 <form [formGroup]="emailConfigForm" class="mb-8 w-full">
                   <p class="mat-body step-description input" translate>login.email-description</p>
-                  <mat-form-field class="mat-block input-container flex-1" appearance="outline">
+                  <mat-form-field class="mat-block input-container tb-autofilled flex-1" appearance="outline">
                     <input matInput formControlName="email"
                            type="email" required
+                           autocomplete="email"
                            placeholder="{{ 'login.email-label' | translate }}" />
                     <mat-error *ngIf="emailConfigForm.get('email').hasError('required')">
                       {{ 'login.email-required' | translate }}
@@ -259,11 +260,11 @@
         }
       </p>
       <form [formGroup]="configForm" class="flex flex-col items-center justify-start">
-        <mat-form-field class="mat-block w-full" appearance="outline">
+        <mat-form-field class="mat-block tb-autofilled w-full" appearance="outline">
           <input matInput formControlName="verificationCode"
                  maxlength="6" type="text" required
                  inputmode="numeric" pattern="[0-9]*"
-                 autocomplete="off"
+                 autocomplete="one-time-code"
                  placeholder="{{ 'login.verification-code' | translate }}">
           @if (configForm.get('verificationCode').getError('required') ||
           configForm.get('verificationCode').getError('minlength') ||

ui-ngx/src/app/modules/login/pages/login/login.component.html

@@ -58,7 +58,7 @@
           }
           <mat-form-field class="tb-autofilled" appearance="outline" hideRequiredMarker>
             <mat-label translate>login.username</mat-label>
-            <input id="username-input" matInput type="email" autofocus formControlName="username" autocomplete="username"/>
+            <input id="username-input" matInput type="email" autofocus formControlName="username" autocomplete="email"/>
             <mat-icon matPrefix>email</mat-icon>
             <mat-error *ngIf="loginFormGroup.get('username').invalid">
               {{ 'login.invalid-email-format' | translate }}

ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html

@@ -27,9 +27,9 @@
     <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
     <mat-card-content class="!p-6">
       <form [formGroup]="requestPasswordRequest" (ngSubmit)="sendResetPasswordLink()">
-        <mat-form-field class="mat-block" style="margin-bottom: 18px" appearance="outline" hideRequiredMarker>
+        <mat-form-field class="mat-block tb-autofilled" style="margin-bottom: 18px" appearance="outline" hideRequiredMarker>
           <mat-label translate>login.email</mat-label>
-          <input matInput type="email" autofocus formControlName="email"/>
+          <input matInput type="email" autofocus formControlName="email" autocomplete="email"/>
           <mat-icon class="material-icons" matPrefix>email</mat-icon>
           <mat-error *ngIf="requestPasswordRequest.get('email').invalid">
             {{ 'user.invalid-email-format' | translate }}

ui-ngx/src/app/modules/login/pages/login/reset-password.component.html

@@ -29,7 +29,7 @@
     <span style="height: 4px;" *ngIf="!isLoading"></span>
     <mat-card-content class="!p-6">
       <form [formGroup]="resetPassword" (ngSubmit)="onResetPassword()">
-        <mat-form-field class="mat-block" appearance="outline">
+        <mat-form-field class="mat-block tb-autofilled" appearance="outline">
           <mat-label translate>login.new-password</mat-label>
           <input matInput
                  type="password"
@@ -46,9 +46,9 @@
             {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field class="mat-block" appearance="outline" style="margin-bottom: 18px">
+        <mat-form-field class="mat-block tb-autofilled" appearance="outline" style="margin-bottom: 18px">
           <mat-label translate>login.new-password-again</mat-label>
-          <input matInput type="password" formControlName="newPassword2"/>
+          <input matInput type="password" formControlName="newPassword2" autocomplete="new-password"/>
           <mat-icon class="material-icons" matPrefix>lock</mat-icon>
           <tb-toggle-password matSuffix></tb-toggle-password>
           <mat-error *ngIf="resetPassword.get('newPassword2').hasError('passwordsNotMatch')">

ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html

@@ -41,11 +41,11 @@
           <div tb-toast class="flex flex-col">
             <p class="mat-body">{{ providerDescription }}</p>
             <div class="code-block flex flex-row gap-2">
-              <mat-form-field class="mat-block flex-1" appearance="outline">
+              <mat-form-field class="mat-block tb-autofilled flex-1" appearance="outline">
                 <input matInput formControlName="verificationCode"
                        required [maxlength]="maxLengthInput" type="text"
                        [attr.inputmode]="inputMode" [pattern]="pattern"
-                       autocomplete="off"
+                       autocomplete="one-time-code"
                        placeholder="{{ providersData.get(selectedProvider).placeholder | translate }}"/>
                 <mat-error *ngIf="verificationForm.get('verificationCode').getError('required') ||
                                   verificationForm.get('verificationCode').getError('minlength') ||