From 2b4420fb96e2c15a3d861c854f710a3676011ed5 Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Tue, 23 Jan 2024 11:21:21 -0500 Subject: [PATCH] style updates and increase to password max length --- .../confirm-email/confirm-email.component.html | 2 +- .../_components/confirm-email/confirm-email.component.ts | 2 +- .../confirm-reset-password.component.html | 2 +- .../confirm-reset-password.component.ts | 2 +- .../_components/register/register.component.html | 2 +- .../_components/register/register.component.ts | 2 +- .../splash-container/splash-container.component.scss | 6 +++--- .../registration/user-login/user-login.component.html | 2 +- .../registration/user-login/user-login.component.scss | 2 ++ .../app/registration/user-login/user-login.component.ts | 2 +- UI/Web/src/theme/themes/dark.scss | 9 ++++++--- 11 files changed, 19 insertions(+), 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 index dee657047e..c0295170d9 100644 --- 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')}} - +
{{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 index 0b86a8a2a6..a939bb8405 100644 --- 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/UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.html b/UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.html index 3631e9fffa..a5e971b45a 100644 --- a/UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.html +++ b/UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.html @@ -10,7 +10,7 @@ {{t('password-validation')}} - +
{{t('required-field')}} diff --git a/UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.ts b/UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.ts index ae1918184b..18b297a52e 100644 --- a/UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.ts +++ b/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, diff --git a/UI/Web/src/app/registration/_components/register/register.component.html b/UI/Web/src/app/registration/_components/register/register.component.html index dc169b7d3c..e7278b1ab6 100644 --- 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')}} -
diff --git a/UI/Web/src/app/registration/_components/register/register.component.ts b/UI/Web/src/app/registration/_components/register/register.component.ts index 1fd80461fc..9592a0d134 100644 --- 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 index 1e53160dc4..38bf1090a6 100644 --- 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 index cc5ee52498..95cded5fec 100644 --- 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 @@
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 index 0cd7257def..cd0218a3fa 100644 --- 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 index baf253d6f0..03f839aa0f 100644 --- 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 index 702b58ba9b..a115ed09c2 100644 --- 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; }