style updates and increase to password max length

Kareadita · Jan 23, 2024 · 2b4420f · 2b4420f
1 parent d666484
commit 2b4420f
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 14 deletions.
diff --git a/UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.html b/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')}}

diff --git a/UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.ts b/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}$")]),
   });
 
   /**

diff --git a/...app/registration/_components/confirm-reset-password/confirm-reset-password.component.html b/...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')}}

diff --git a/...c/app/registration/_components/confirm-reset-password/confirm-reset-password.component.ts b/...c/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,

diff --git a/UI/Web/src/app/registration/_components/register/register.component.html b/UI/Web/src/app/registration/_components/register/register.component.html
@@ -39,7 +39,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 custom-input" maxlength="32" minlength="6" pattern="^.{6,32}$" formControlName="password"
+          <input id="password" class="form-control custom-input" maxlength="256" minlength="6" pattern="^.{6,256}$" formControlName="password"
                  type="password" aria-describedby="password-help" [class.is-invalid]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched">
           <div id="password-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
             <div *ngIf="registerForm.get('password')?.errors?.required">

diff --git a/UI/Web/src/app/registration/_components/register/register.component.ts b/UI/Web/src/app/registration/_components/register/register.component.ts
@@ -27,7 +27,7 @@ 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), Validators.minLength(6), Validators.pattern("^.{6,32}$")]),
+    password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6), Validators.pattern("^.{6,256}$")]),
   });
 
   private readonly navService = inject(NavService);

diff --git a/UI/Web/src/app/registration/_components/splash-container/splash-container.component.scss b/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-size: cover;
+        background-image: var(--login-background-url);
+        background-size: var(--login-background-size);
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
-        opacity: 0.1;
+        opacity: var(--login-background-opacity);
         width: 100%;
     }
 

diff --git a/UI/Web/src/app/registration/user-login/user-login.component.html b/UI/Web/src/app/registration/user-login/user-login.component.html
@@ -22,7 +22,7 @@
             </div>
 
             <div class="sign-in">
-              <button class="btn btn-primary" type="submit" [disabled]="isSubmitting">{{t('submit')}}</button>
+              <button class="btn btn-outline-primary" type="submit" [disabled]="isSubmitting">{{t('submit')}}</button>
             </div>
           </div>
         </form>

diff --git a/UI/Web/src/app/registration/user-login/user-login.component.scss b/UI/Web/src/app/registration/user-login/user-login.component.scss
@@ -14,6 +14,7 @@ a {
     background-color: #343A40 !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);
@@ -23,6 +24,7 @@ a {
     &::placeholder {
         opacity: 0.5;
         color: #cecece;
+        font-family: "League Spartan", sans-serif;
       }
 }
 

diff --git a/UI/Web/src/app/registration/user-login/user-login.component.ts b/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}$")])
   });
 
   /**

diff --git a/UI/Web/src/theme/themes/dark.scss b/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: #292F33;
+    --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);
@@ -257,7 +257,7 @@
     --rating-star-color: var(--primary-color);
 
     /** Login **/
-    --login-card-bg-color: #212328;
+    --login-card-bg-color: #212121;
     --login-logo-image: url("/assets/images/logo.png");
     --login-logo-height: 55px;
     --login-logo-width: 55px;
@@ -269,8 +269,11 @@
     --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: #343a40;
+    --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;
   }