Migrate to latest Play version - addresses #92

Integrates the language switcher on the main and login pages
resamsel · Nov 9, 2020 · 7539564 · 7539564
1 parent 27d982f
commit 7539564
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 68 deletions.
diff --git a/conf/messages b/conf/messages
@@ -76,6 +76,7 @@ auth.keycloak=Keycloak
 auth.login=Sign in
 auth.logout=Logout {{name}}
 auth.twitter=Twitter
+authclients.title=Sign-in Services
 button.cancel=Cancel
 button.close=Close
 button.create=Create

diff --git a/conf/messages.de b/conf/messages.de
@@ -76,6 +76,7 @@ auth.keycloak=Keycloak
 auth.login=Anmelden
 auth.logout={{name}} abmelden
 auth.twitter=Twitter
+authclients.title=Anmeldedienste
 button.cancel=Abbrechen
 button.close=Schließen
 button.create=Anlegen

diff --git a/ui/apps/translatr-admin/src/assets/i18n/de.json b/ui/apps/translatr-admin/src/assets/i18n/de.json
@@ -77,6 +77,7 @@
   "auth.login" : "Anmelden",
   "auth.logout" : "{{name}} abmelden",
   "auth.twitter" : "Twitter",
+  "authclients.title" : "Anmeldedienste",
   "button.cancel" : "Abbrechen",
   "button.close" : "Schließen",
   "button.create" : "Anlegen",

diff --git a/ui/apps/translatr-admin/src/assets/i18n/en.json b/ui/apps/translatr-admin/src/assets/i18n/en.json
@@ -77,6 +77,7 @@
   "auth.login" : "Sign in",
   "auth.logout" : "Logout {{name}}",
   "auth.twitter" : "Twitter",
+  "authclients.title" : "Sign-in Services",
   "button.cancel" : "Cancel",
   "button.close" : "Close",
   "button.create" : "Create",

diff --git a/ui/apps/translatr/src/app/modules/pages/main-page/main-page.component.html b/ui/apps/translatr/src/app/modules/pages/main-page/main-page.component.html
@@ -1,6 +1,5 @@
 <app-navbar [elevated]="false" [overlay]="true" [showLogo]="false" [page]="'home.title' | transloco">
   <app-auth-bar-language-switcher
-    *featureFlag="Feature.LanguageSwitcher"
     [matTooltip]="'language.switcher' | transloco"
   ></app-auth-bar-language-switcher>
   <app-auth-bar-item [me]="me$ | async" [endpointUrl]="endpointUrl">

diff --git a/ui/apps/translatr/src/assets/i18n/de.json b/ui/apps/translatr/src/assets/i18n/de.json
@@ -77,6 +77,7 @@
   "auth.login" : "Anmelden",
   "auth.logout" : "{{name}} abmelden",
   "auth.twitter" : "Twitter",
+  "authclients.title" : "Anmeldedienste",
   "button.cancel" : "Abbrechen",
   "button.close" : "Schließen",
   "button.create" : "Anlegen",

diff --git a/ui/apps/translatr/src/assets/i18n/en.json b/ui/apps/translatr/src/assets/i18n/en.json
@@ -77,6 +77,7 @@
   "auth.login" : "Sign in",
   "auth.logout" : "Logout {{name}}",
   "auth.twitter" : "Twitter",
+  "authclients.title" : "Sign-in Services",
   "button.cancel" : "Cancel",
   "button.close" : "Close",
   "button.create" : "Create",

diff --git a/...b/modules/nav/navbar/auth-bar-language-switcher/auth-bar-language-switcher.component.html b/...b/modules/nav/navbar/auth-bar-language-switcher/auth-bar-language-switcher.component.html
@@ -1,5 +1,4 @@
 <button
-  *ngIf="active"
   [mat-menu-trigger-for]="languageSelector"
   mat-icon-button
 >

diff --git a/...lib/modules/nav/navbar/auth-bar-language-switcher/auth-bar-language-switcher.component.ts b/...lib/modules/nav/navbar/auth-bar-language-switcher/auth-bar-language-switcher.component.ts
@@ -9,7 +9,6 @@ import { LanguageSwicher } from '../language-swicher';
 })
 export class AuthBarLanguageSwitcherComponent {
   readonly availableLanguages = this.translocoService.getAvailableLangs();
-  readonly active = this.languageSwicher !== null;
   activeLang = this.translocoService.getActiveLang();
 
   constructor(
@@ -21,7 +20,9 @@ export class AuthBarLanguageSwitcherComponent {
     if (this.activeLang !== language) {
       this.translocoService.setActiveLang(language);
       this.activeLang = this.translocoService.getActiveLang();
-      this.languageSwicher.updatePreferredLanguage(language);
+      if (this.languageSwicher !== null) {
+        this.languageSwicher.updatePreferredLanguage(language);
+      }
     }
   }
 }
diff --git a/ui/libs/translatr-components/src/lib/modules/nav/navbar/navbar.component.scss b/ui/libs/translatr-components/src/lib/modules/nav/navbar/navbar.component.scss
@@ -19,6 +19,10 @@
 
 .mat-toolbar {
   z-index: 2;
+
+  .mat-toolbar-row {
+    color: white;
+  }
 }
 
 .elevated .mat-toolbar-row {

diff --git a/ui/libs/translatr-components/src/lib/modules/pages/login-page/login-page.component.html b/ui/libs/translatr-components/src/lib/modules/pages/login-page/login-page.component.html
@@ -1,24 +1,37 @@
 <ng-container *transloco="let t">
-  <app-navbar [page]="t('login.title')"></app-navbar>
+  <app-navbar [page]="t('login.title')" [overlay]="true" [elevated]="false">
+    <app-auth-bar-language-switcher></app-auth-bar-language-switcher>
+  </app-navbar>
 
-  <div class="wrapper">
-    <mat-card class="login">
-      <div class="info">
-        <mat-icon>account_circle</mat-icon>
-        <span transloco="login.text">Sign in with any of the given providers</span>
+  <div class="main-container">
+    <header class="header header-graphic">
+      <div class="container title">
+        <div class="content">
+          <mat-icon class="image">account_circle</mat-icon>
+          <div class="text">
+            <h1 class="page" transloco="login.title">Login Page</h1>
+            <p class="description" transloco="login.text">Sign in with any of the given providers</p>
+          </div>
+        </div>
       </div>
-      <div class="options">
-        <a
-          *ngFor="let provider of providers$ | async"
-          [ngClass]="'client-' + provider.key"
-          href="{{endpointUrl}}{{provider.url}}{{redirectUri$ | async}}"
-          mat-button
-          class="client"
-        >
-          <fa-icon [icon]="icons[provider.key]"></fa-icon>
-          {{names[provider.key]}}
-        </a>
-      </div>
-    </mat-card>
+    </header>
+
+    <div class="wrapper">
+      <mat-card class="login">
+        <mat-card-title transloco="authclients.title">Identity Providers</mat-card-title>
+        <mat-card-content class="options">
+          <a
+            *ngFor="let provider of providers$ | async"
+            [ngClass]="'client-' + provider.key"
+            href="{{endpointUrl}}{{provider.url}}{{redirectUri$ | async}}"
+            mat-button
+            class="client"
+          >
+            <fa-icon [icon]="icons[provider.key]"></fa-icon>
+            {{names[provider.key]}}
+          </a>
+        </mat-card-content>
+      </mat-card>
+    </div>
   </div>
 </ng-container>
diff --git a/ui/libs/translatr-components/src/lib/modules/pages/login-page/login-page.component.scss b/ui/libs/translatr-components/src/lib/modules/pages/login-page/login-page.component.scss
@@ -7,6 +7,35 @@
   flex-direction: column;
 }
 
+.header {
+  background-color: #1976d2;
+
+  &.header-graphic {
+    background-image: url(assets/headers/stripes.svg);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 16px 8px;
+
+    .text {
+      margin-left: 8px;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .image {
+      width: 40px;
+      height: 40px;
+      font-size: 40px;
+    }
+  }
+}
+
 .wrapper {
   justify-content: center;
   margin: 8px;
@@ -15,59 +44,31 @@
     display: flex;
     flex: 1 100%;
     align-items: center;
+
+    margin-top: 32px;
   }
+}
 
-  .login {
-    display: flex;
-    flex-direction: column;
+.mat-card {
+  display: flex;
+  flex-direction: column;
 
-    .options,
-    .info {
-      flex: 1 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
+  .options {
+    .mat-button {
+      display: block;
+      width: 100%;
       margin: 8px 0;
-    }
+      color: #fff;
 
-    .info {
-      color: rgba(0, 0, 0, 0.6);
-      text-align: center;
+      @include mat-elevation-transition;
 
-      .mat-icon {
-        font-size: 128px;
-        color: rgba(0, 0, 0, 0.3);
-        display: block;
-        height: 128px;
-        width: 128px;
-        margin: 0 auto;
+      &:hover {
+        @include mat-elevation(4);
       }
     }
+  }
 
-    .options {
-      .mat-button {
-        display: block;
-        width: 100%;
-        margin: 4px 8px;
-        color: #fff;
-
-        @include mat-elevation-transition;
-
-        &:hover {
-          @include mat-elevation(4);
-        }
-      }
-    }
-
-    @include medium {
-      flex-direction: row;
-      min-width: 500px;
-
-      .options,
-      .info {
-        margin: 16px;
-      }
-    }
+  @include medium {
+    min-width: 240px;
   }
 }