From 1105696623c4b691bf2d44489ad25a752cbd8cc7 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 15 Jun 2022 14:29:28 +0200 Subject: Improve login page UI --- client/src/app/+login/login.component.html | 75 +++++----- client/src/app/+login/login.component.scss | 155 ++++++++++----------- client/src/app/+login/login.component.ts | 4 + .../app/+signup/+register/register.component.html | 4 +- .../app/+signup/+register/register.component.scss | 5 +- client/src/index.html | 8 +- client/src/sass/class-helpers.scss | 14 +- 7 files changed, 136 insertions(+), 129 deletions(-) (limited to 'client') diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html index a2d8dae2a..10e25a936 100644 --- a/client/src/app/+login/login.component.html +++ b/client/src/app/+login/login.component.html @@ -1,15 +1,37 @@ -
-
- Login -
+

+ {{ instanceName }} + > + Login +

+
Sorry but there was an issue with the external login process. Please contact an administrator.
-
{{ error }} - Request new verification email. +
+ {{ error }} + + + Request new verification email. + +
+ +
@@ -18,16 +40,14 @@
- +
-
- {{ formErrors.username }} -
+
{{ formErrors.username }}
⚠️ Most email addresses do not include capital letters. @@ -36,40 +56,24 @@
+ -
- {{ formErrors.password }} -
+ +
{{ formErrors.password }}
-
- I forgot my password +
+ I forgot my password - -
- - @@ -86,6 +90,7 @@
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss index e59ae10f8..f46cbf2bc 100644 --- a/client/src/app/+login/login.component.scss +++ b/client/src/app/+login/login.component.scss @@ -6,6 +6,8 @@ label { display: block; + font-size: 18px; + margin-bottom: 5px; } input[type=text], @@ -21,7 +23,7 @@ input[type=email] { } } -@media screen and (max-width: #{map-get($container-max-widths, sm)}) { +@media screen and (max-width: $small-view) { .modal-body { #forgot-password-email { width: 100%; @@ -33,114 +35,103 @@ input[type=email] { } } -.create-an-account, -.forgot-password-button { - color: pvar(--mainForegroundColor); - cursor: pointer; - transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1); - - &:hover { - text-decoration: none !important; - opacity: .7 !important; - } -} - .wrapper { display: flex; - justify-content: space-around; + justify-content: space-between; flex-wrap: wrap; + margin: auto; > div { flex: 1 1; } - .login-form-and-externals { - @include margin-left(10px); - @include margin-right(10px); + form { + width: 100%; + } +} - display: flex; - flex-wrap: wrap; - font-size: 15px; - max-width: 450px; - margin-bottom: 40px; +.wrapper, +.pt-alert-primary { + max-width: 1200px; +} - form { - margin: 0; +.pt-alert-primary { + margin: 0 auto 30px; +} - &, - input { - width: 100%; - } +.login-form-and-externals { + @include margin-left(10px); + @include margin-right(10px); - .additionnal-links { - display: block; - text-align: center; - margin-top: 20px; - margin-bottom: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + font-size: 15px; + max-width: 450px; + margin-bottom: 40px; - .forgot-password-button, - .create-an-account { - padding: 4px; - display: inline-block; + form { + margin: 0; - color: var(--mainColor); + input[type=submit] { + width: 100%; + } - &:hover, - &:active { - color: var(--mainHoverColor); - } - } + .additional-links { + display: flex; + justify-content: center; + margin: 20px 0 30px; + + .link-orange { + margin: 0 15px; } } + } +} - .external-login-blocks { - min-width: 200px; +.external-login-blocks { + min-width: 200px; + text-align: center; - .block-title { - font-weight: $font-semibold; - } + .block-title { + font-weight: $font-semibold; + } - .external-login-block { - @include disable-default-a-behaviour; - - cursor: pointer; - border: 1px solid #d1d7e0; - border-radius: 5px; - color: pvar(--mainForegroundColor); - margin: 10px 10px 0 0; - display: flex; - justify-content: center; - align-items: center; - min-height: 35px; - min-width: 100px; - - &:hover { - background-color: rgba(209, 215, 224, 0.5); - } - } - } + .external-login-block { + @include disable-default-a-behaviour; - .signup-link { - display: inline-block; + cursor: pointer; + border: 1px solid #d1d7e0; + border-radius: 5px; + color: pvar(--mainForegroundColor); + margin: 10px 10px 0 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 35px; + min-width: 100px; + + &:hover { + background-color: rgba(209, 215, 224, 0.5); } } +} - .instance-information { - @include margin-left(10px); - @include margin-right(10px); +.instance-information { + @include margin-left(10px); + @include margin-right(10px); - max-width: 600px; - min-width: 350px; - margin-bottom: 40px; - } + max-width: 600px; + min-width: 350px; + margin-bottom: 40px; +} - .terms-anchor { - display: inline; - } +.terms-anchor { + display: inline; +} - .terms-link { - display: none; - } +.terms-link { + display: none; } @mixin column-reverse-display { diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts index 96754b782..2ed9be16c 100644 --- a/client/src/app/+login/login.component.ts +++ b/client/src/app/+login/login.component.ts @@ -59,6 +59,10 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni return this.serverConfig.signup.allowed === true } + get instanceName () { + return this.serverConfig.instance.name + } + onTermsClick (event: Event, instanceInformation: HTMLElement) { event.preventDefault() diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html index 76b145604..442c65e2d 100644 --- a/client/src/app/+signup/+register/register.component.html +++ b/client/src/app/+signup/+register/register.component.html @@ -1,11 +1,11 @@
-