fixing login submit button

UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.html

@@ -42,7 +42,7 @@
             {{t('password-validation')}}
           </ng-template>
           <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
-          <input id="password" class="form-control" maxlength="32" minlength="6" pattern="^.{6,32}$" formControlName="password" type="password" aria-describedby="password-help">
+          <input id="password" class="form-control" maxlength="256" minlength="6" pattern="^.{6,256}$" formControlName="password" type="password" aria-describedby="password-help">
           <div id="inviteForm-password-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
             <div *ngIf="registerForm.get('password')?.errors?.required">
               {{t('required-field')}}

UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.ts

@@ -28,7 +28,7 @@ export class ConfirmEmailComponent implements OnDestroy {
   registerForm: FormGroup = new FormGroup({
     email: new FormControl('', [Validators.required]),
     username: new FormControl('', [Validators.required]),
-    password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6), Validators.pattern("^.{6,32}$")]),
+    password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6), Validators.pattern("^.{6,256}$")]),
   });
 
   /**

UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.html

@@ -10,7 +10,7 @@
             {{t('password-validation')}}
           </ng-template>
           <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
-          <input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
+          <input id="password" class="form-control" maxlength="256" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
           <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
             <div *ngIf="registerForm.get('password')?.errors?.required">
               {{t('required-field')}}

UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.ts

@@ -22,7 +22,7 @@ export class ConfirmResetPasswordComponent {
   token: string = '';
   registerForm: FormGroup = new FormGroup({
     email: new FormControl('', [Validators.required, Validators.email]),
-    password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
+    password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6)]),
   });
 
   constructor(private route: ActivatedRoute, private router: Router,

UI/Web/src/app/registration/_components/register/register.component.html

@@ -41,7 +41,7 @@
             {{t('password-validation')}}
           </ng-template>
           <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
-          <input id="password" class="form-control" maxlength="32" minlength="6" pattern="^.{6,32}$" formControlName="password" autocomplete="new-password"
+          <input id="password" class="form-control" maxlength="256" minlength="6" pattern="^.{6,256}$" formControlName="password" autocomplete="new-password"
                  type="password" aria-describedby="password-help" [class.is-invalid]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched">
           @if (registerForm.dirty || registerForm.touched) {
             <div id="password-validations" class="invalid-feedback">

UI/Web/src/app/registration/_components/register/register.component.ts

@@ -27,8 +27,8 @@ export class RegisterComponent {
   registerForm: FormGroup = new FormGroup({
     email: new FormControl('', [Validators.required]),
     username: new FormControl('', [Validators.required]),
-    password: new FormControl('', [Validators.required, Validators.maxLength(32),
+    password: new FormControl('', [Validators.required, Validators.maxLength(256),
-      Validators.minLength(6), Validators.pattern("^.{6,32}$")]),
+      Validators.minLength(6), Validators.pattern("^.{6,256}$")]),
   });
 
   private readonly navService = inject(NavService);

UI/Web/src/app/registration/_components/splash-container/splash-container.component.scss

@@ -11,13 +11,13 @@
 
     &::before {
         content: "";
-        background-image: url('../../../../assets/images/login-bg.jpg');
+        background-image: var(--login-background-url);
-        background-size: cover;
+        background-size: var(--login-background-size);
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
-        opacity: 0.1;
+        opacity: var(--login-background-opacity);
         width: 100%;
     }
 

UI/Web/src/app/registration/user-login/user-login.component.html

@@ -21,7 +21,7 @@
               <a routerLink="/registration/reset-password" style="color: white">{{t('forgot-password')}}</a>
             </div>
 
-            <div>
+            <div class="sign-in">
               <button class="btn btn-secondary alt" type="submit" [disabled]="isSubmitting">{{t('submit')}}</button>
             </div>
           </div>

UI/Web/src/app/registration/user-login/user-login.component.scss

@@ -11,8 +11,21 @@ a {
 }
 
 .custom-input {
-    background-color: #fff !important;
+    background-color: #343A40 !important;
-    color: black !important;
+    color: #fff !important;
+    border-color: var(--login-input-border-color);
+    font-family: "League Spartan", sans-serif;
+
+    &:focus {
+        border-color: var(--login-input-border-color-focus);
+        box-shadow: var(--login-input-box-shadow-focus);
+    }
+
+    &::placeholder {
+        opacity: 0.5;
+        color: #cecece;
+        font-family: "League Spartan", sans-serif;
+      }
 }
 
 .invalid-feedback {

UI/Web/src/app/registration/user-login/user-login.component.ts

@@ -24,7 +24,7 @@ export class UserLoginComponent implements OnInit {
 
   loginForm: FormGroup = new FormGroup({
       username: new FormControl('', [Validators.required]),
-      password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6), Validators.pattern("^.{6,32}$")])
+      password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6), Validators.pattern("^.{6,256}$")])
   });
 
   /**

UI/Web/src/theme/themes/dark.scss

@@ -7,7 +7,7 @@
     --primary-color-darker-shade: #338A67;
     --primary-color-darkest-shade: #25624A;
     --error-color: #BD362F;
-    --bs-body-bg: #343a40;
+    --bs-body-bg: #121212;
     --body-text-color: #efefef;
     --btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
     --primary-color-scrollbar: rgba(74,198,148,0.75);
@@ -262,7 +262,30 @@
     --review-spoiler-bg-color: var(--primary-color);
     --review-spoiler-text-color: var(--body-text-color);
 
+    /** Rating Star Color **/
+    --rating-star-color: var(--primary-color);
+
+    /** Login **/
+    --login-card-bg-color: #212121;
+    --login-logo-image: url("/assets/images/logo.png");
+    --login-logo-height: 55px;
+    --login-logo-width: 55px;
+    --login-logo-bg-size: contain;
+    --login-logo-bg-repeat: no-repeat;
+    --login-card-border-width: 3px 0px 0px 0px;
+    --login-card-border-style: solid;
+    --login-card-border-color: var(--primary-color);
+    --login-input-border-color: transparent;
+    --login-input-border-color-focus: transparent;
+    --login-input-box-shadow-focus: 0 0 0 1px rgba(74, 198, 148, 0.8);
+    --login-input-background-color: #353535;
+    --login-input-color: #fff;
+    --login-input-placeholder-color: #cecece;
+    --login-forgot-password-color: var(--primary-color);
+    --login-background-url: url('../../assets/images/login-bg.jpg');
+    --login-background-size: cover;
+    --login-background-opacity: 0.3;
+
     /** Badge **/
     --badge-text-color: var(--bs-badge-color);
-
+  }
-}