feature: Add new authorize styling (#2182)

Co-authored-by: Daniel Palafox <[email protected]>

src/app/authorize/components/form-authorize/form-authorize.component.scss

@@ -60,3 +60,58 @@ app-info-drop-down {
   max-width: 100%;
   display: block;
 }
+
+mat-card-header.authorize-header {
+  mat-card-title {
+    margin: 0 0 32px 0 !important;
+  }
+
+  h1 {
+    margin-top: 0;
+  }
+
+  .orc-font-heading-small {
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  mat-icon.logo-icon {
+    height: 80px;
+    width: 64px;
+    img {
+      height: 64px;
+    }
+  }
+}
+
+mat-card-content.authorize-content {
+  margin: 0px !important;
+
+  div.profile-icon-wrapper {
+    padding: 0 !important;
+  }
+
+  div.user-wrapper {
+    padding: 0 !important;
+  }
+
+  div.deny-button-wrapper {
+    justify-content: center;
+  }
+
+  mat-icon.profile-icon {
+    height: 80px;
+    width: 64px;
+    img {
+      height: 64px;
+    }
+  }
+
+  mat-icon.scope {
+    width: 32px;
+  }
+
+  .user-links {
+    width: 100%;
+  }
+}

src/app/authorize/components/form-authorize/form-authorize.component.scss-theme.scss

@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin form-authorize-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .authorize-button {
+    color: $orcid-light-primary-text;
+    background: mat.get-color-from-palette($primary, 700);
+  }
+}
+
+@include form-authorize-theme($orcid-app-theme);

src/app/authorize/components/form-authorize/form-authorize.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core'
+import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { forkJoin, Observable, Subject } from 'rxjs'
 import { catchError, map, take, takeUntil } from 'rxjs/operators'
@@ -23,10 +23,14 @@ import { GoogleTagManagerService } from '../../../core/google-tag-manager/google
 @Component({
   selector: 'app-form-authorize',
   templateUrl: './form-authorize.component.html',
-  styleUrls: ['./form-authorize.component.scss'],
+  styleUrls: [
+    './form-authorize.component.scss',
+    './form-authorize.component.scss-theme.scss'
+  ],
   preserveWhitespaces: true,
 })
 export class FormAuthorizeComponent implements OnInit, OnDestroy {
+  @Input() signInUpdatesV1Togglz: boolean
   environment = environment
   $destroy: Subject<boolean> = new Subject<boolean>()
   orcidUrl: string
@@ -146,15 +150,21 @@ export class FormAuthorizeComponent implements OnInit, OnDestroy {
     }
 
     if (scope === '/person/update') {
-      return $localize`:@@authorize.personUpdate:Add/update other information about you (country, keywords, etc.)`
+      return !this.signInUpdatesV1Togglz ?
+        $localize`:@@authorize.personUpdate:Add/update other information about you (country, keywords, etc.)` :
+        $localize`:@@authorize.addUpdateInformation:Add/update information about your (country, keywords, etc.)`
     }
 
     if (scope === '/activities/update') {
-      return $localize`:@@authorize.activitiesUpdate:Add/update your research activities (works, affiliations, etc)`
+      return !this.signInUpdatesV1Togglz ?
+        $localize`:@@authorize.activitiesUpdate:Add/update your research activities (works, affiliations, etc)` :
+        $localize`:@@authorize.addUpdateReseachActivities:Add/update your research activities (works, affiliations, etc.)`
     }
 
     if (scope === '/read-limited') {
-      return $localize`:@@authorize.readLimited:Read your information with visibility set to Trusted Organizations`
+      return !this.signInUpdatesV1Togglz ?
+        $localize`:@@authorize.readLimited:Read your information with visibility set to Trusted Organizations` :
+        $localize`:@@authorize.readInfomationVisibilityTrustedParties:Read your information with visibility set to Trusted parties`
     }
 
     // For any unreconized scope just use the description  from the backend

src/app/authorize/pages/authorize/authorize.component.html

@@ -2,8 +2,18 @@
   <div class="container">
     <div class="row space-around">
       <div class="col l5 m6 s4">
-        <mat-card class="orcid-wizard-2">
+        <mat-card
+          class="orcid-wizard-2"
+          class="orcid-wizard"
+          [ngClass]="{
+            'orcid-wizard-2': !signInUpdatesV1Togglz,
+            'orcid-wizard': signInUpdatesV1Togglz,
+            'authorize-wrapper': signInUpdatesV1Togglz,
+            'mobile': !platform.columns12
+          }"
+          >
           <app-form-authorize
+            [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
             *ngIf="showAuthorizationComponent"
           ></app-form-authorize>
           <app-oauth-error

src/app/authorize/pages/authorize/authorize.component.scss

@@ -10,3 +10,38 @@
 .logo {
   width: 130px;
 }
+
+.authorize-wrapper {
+  padding: 64px;
+  margin-top: 0 !important;
+
+  h1 {
+    margin-top: 0;
+  }
+
+  .orc-font-heading-small {
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  mat-card-title {
+    margin: 0 0 32px 0 !important;
+  }
+
+  mat-card-content {
+    margin: 0px !important;
+  }
+
+  .icon {
+    margin-bottom: 32px !important;
+  }
+
+  mat-divider {
+    margin: 24px 0;
+  }
+
+}
+
+.authorize-wrapper.mobile {
+  padding: 0;
+}

src/app/authorize/pages/authorize/authorize.component.ts

@@ -1,22 +1,40 @@
 import { Component, OnInit } from '@angular/core'
+import { take } from 'rxjs/operators'
+import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { UserService } from 'src/app/core'
+import { TogglzService } from 'src/app/core/togglz/togglz.service'
 
 @Component({
   templateUrl: './authorize.component.html',
   styleUrls: ['./authorize.component.scss'],
   preserveWhitespaces: true,
 })
 export class AuthorizeComponent implements OnInit {
+  platform: PlatformInfo
   showAuthorizationComponent: boolean
-  constructor(_user: UserService) {
+  signInUpdatesV1Togglz = false
+
+  constructor(
+    _user: UserService,
+    private _platformInfo: PlatformInfoService,
+    private _togglz: TogglzService,
+    ) {
     _user.getUserSession().subscribe((session) => {
       if (session.oauthSession && session.oauthSession.error) {
         this.showAuthorizationComponent = false
       } else {
         this.showAuthorizationComponent = true
       }
     })
+    _platformInfo.get().subscribe((platformInfo) => {
+      this.platform = platformInfo
+    })
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+  this._togglz
+    .getStateOf('SIGN_IN_UPDATES_V1')
+    .pipe(take(1))
+    .subscribe((value) => (this.signInUpdatesV1Togglz = value))
+  }
 }

src/app/cdk/info-drop-down/info-drop-down.component.html

@@ -1,14 +1,37 @@
-<div
-  class="university-dropdown orc-font-body-large"
-  [ngClass]="{ active: show }"
-  (click)="show = !show"
->
-  <a class="mat-body-2 black-underline-url body-2 black-url" id="app-name">
+<ng-container *ngIf="!signInUpdatesV1Togglz">
+  <div
+    class="university-dropdown orc-font-body-large"
+    [ngClass]="{ active: show }"
+    (click)="show = !show"
+  >
+    <a class="mat-body-2 black-underline-url body-2 black-url" id="app-name">
+      {{ name }}
+    </a>
+    <mat-icon class="large-material-icon" role="presentation">help</mat-icon>
+  </div>
+
+  <div class="description-container" *ngIf="show">
+    {{ description }}
+  </div>
+
+</ng-container>
+
+<ng-container *ngIf="signInUpdatesV1Togglz">
+<div class="row">
+  <b class="orc-font-body m-b-16">
     {{ name }}
+  </b>
+  <a
+    class="underline "
+    [ngClass]="{ 'm-b-16': show }"
+    (click)="show = !show"
+  >
+    <ng-container i18n="@@shared.showDetails" *ngIf="!show">Show details</ng-container>
+    <ng-container i18n="@@shared.hideDetails" *ngIf="show">Hide details</ng-container>
   </a>
-  <mat-icon class="large-material-icon" role="presentation">help</mat-icon>
 </div>
-
-<div class="description-container" *ngIf="show">
+<div class="description-container description-client" *ngIf="show">
   {{ description }}
 </div>
+</ng-container>
+

src/app/cdk/info-drop-down/info-drop-down.component.scss

@@ -9,6 +9,9 @@
   word-break: break-word;
   box-sizing: border-box;
 }
+.description-client {
+  margin: 0 !important;
+}
 mat-icon {
   margin-top: 2px; // Compensates mat icon bottom with space
   margin-left: 4px;
@@ -28,6 +31,5 @@ mat-icon {
 }
 
 :host {
-  margin-bottom: 8px;
   display: block;
 }

src/app/cdk/info-drop-down/info-drop-down.component.ts

@@ -11,6 +11,7 @@ import { Component, OnInit, Input } from '@angular/core'
 export class InfoDropDownComponent implements OnInit {
   @Input() name
   @Input() description
+  @Input() signInUpdatesV1Togglz: boolean
   show = false
   constructor() {}
 

src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.html

@@ -1,6 +1,9 @@
 <a
   *ngIf="delegators?.length || switchToMeAccount"
-  class="mat-button-font"
+  [ngClass]="{
+    'mat-button-font': !signInUpdatesV1Togglz,
+    'underline': signInUpdatesV1Togglz
+  }"
   [matMenuTriggerFor]="menu"
   i18n="@@delegators.switchAccount"
   [attr.aria-label]="labelSwitchAccount"

src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.ts

@@ -28,6 +28,7 @@ export class TrustedIndividualsDropdownComponent implements OnInit {
   get trustedIndividuals() {
     return this._trustedIndividuals
   }
+  @Input() signInUpdatesV1Togglz: boolean
   @Output() changeUser = new EventEmitter<Delegator>()
   ngOnInit(): void {}