Merge pull request #14436 from vvlladd28/improvement/login/oauth2

Updated login page layout for social login buttons

ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html

@@ -136,7 +136,7 @@
               </mat-select>
             </mat-form-field>
           </div>
-          <div class="tb-form-row tb-standard-fields no-border no-padding column-xs" *ngIf="isCustomProvider()">
+          <div class="grid gt-xs:grid-cols-2 gt-xs:gap-4" *ngIf="isCustomProvider()">
             <mat-form-field class="flex" floatLabel="always">
               <mat-label translate>admin.oauth2.login-button-label</mat-label>
               <input matInput formControlName="loginButtonLabel"
@@ -145,10 +145,14 @@
                 {{ 'admin.oauth2.login-button-label-required' | translate }}
               </mat-error>
             </mat-form-field>
-            <mat-form-field class="flex">
-              <mat-label translate>admin.oauth2.login-button-icon</mat-label>
-              <input matInput formControlName="loginButtonIcon">
-            </mat-form-field>
+            <div class="tb-form-row justify-between" style="height: auto; margin-bottom: 22px;">
+              <div translate>admin.oauth2.login-button-icon</div>
+              <tb-material-icon-select asBoxInput
+                                       iconClearButton
+                                       allowedCustomIcon
+                                       formControlName="loginButtonIcon">
+              </tb-material-icon-select>
+            </div>
           </div>
           <section formGroupName="mapperConfig" style="margin-bottom: 22px">
             <div class="tb-form-row no-border no-padding">

ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain-table-config.resolver.ts

@@ -85,8 +85,8 @@ export class DomainTableConfigResolver  {
     this.config.loadEntity = id => this.domainService.getDomainInfoById(id.id);
     this.config.saveEntity = (domain, originalDomain) => {
       const clientsIds = domain.oauth2ClientInfos as Array<string> || [];
-      const shouldUpdateClients = domain.id && !isEqual(domain.oauth2ClientInfos?.sort(),
-        originalDomain.oauth2ClientInfos?.map(info => info.id ? info.id.id : info).sort());
+      const shouldUpdateClients = domain.id && !isEqual(domain.oauth2ClientInfos,
+        originalDomain.oauth2ClientInfos?.map(info => info.id ? info.id.id : info));
       delete domain.oauth2ClientInfos;
 
       return this.domainService.saveDomain(domain, domain.id ? null : clientsIds).pipe(

ui-ngx/src/app/modules/login/pages/login/login.component.html

@@ -28,19 +28,35 @@
           <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
           <div tb-toast class="layout-padding flex flex-col">
             <span style="height: 50px;"></span>
-            <div class="oauth-container tb-default flex flex-col gap-4" *ngIf="oauth2Clients?.length">
-              <ng-container *ngFor="let oauth2Client of oauth2Clients">
-                <a mat-raised-button class="login-with-button" href="{{ getOAuth2Uri(oauth2Client) }}">
-                  <mat-icon class="icon" svgIcon="{{ oauth2Client.icon }}"></mat-icon>
-                  {{ 'login.login-with' | translate: {name: oauth2Client.name} }}
-                </a>
-              </ng-container>
-              <div class="container-divider">
-                <div class="line"><mat-divider></mat-divider></div>
-                <div class="text mat-typography">{{ "login.or" | translate | uppercase }}</div>
-                <div class="line"><mat-divider></mat-divider></div>
+            @if(oauth2Clients?.length) {
+              <div class="oauth-container tb-default flex flex-col gap-4">
+                @if(oauth2Clients.length === 1) {
+                  <a mat-stroked-button class="login-with-button" [href]=getOAuth2Uri(oauth2Clients[0])>
+                    <tb-icon matButtonIcon class="tb-mat-20">{{ oauth2Clients[0].icon }}</tb-icon>
+                    {{ 'login.login-with' | translate: {name: oauth2Clients[0].name} }}
+                  </a>
+                } @else {
+                  <div class="login-button-container flex flex-wrap justify-center gap-4">
+                    @for(oauth2Client of oauth2Clients; track oauth2Client.url) {
+                      <a mat-stroked-button class="login-with-button multiple"
+                         [matTooltip]="('login.login-with' | translate: {name: oauth2Client.name})"
+                         [href]=getOAuth2Uri(oauth2Client)>
+                        @if(oauth2Client.icon) {
+                          <tb-icon class="tb-mat-20">{{ oauth2Client.icon }}</tb-icon>
+                        } @else {
+                          <span>{{ oauth2Client.name }}</span>
+                        }
+                      </a>
+                    }
+                  </div>
+                }
+                <div class="container-divider">
+                  <div class="line"><mat-divider></mat-divider></div>
+                  <div class="text">{{ "login.or" | translate | uppercase }}</div>
+                  <div class="line"><mat-divider></mat-divider></div>
+                </div>
               </div>
-            </div>
+            }
             <mat-form-field class="tb-appearance-transparent">
               <mat-label translate>login.username</mat-label>
               <input id="username-input" matInput type="email" autofocus formControlName="username"/>

ui-ngx/src/app/modules/login/pages/login/login.component.scss

@@ -59,8 +59,11 @@
         }
 
         .text {
-          padding-right: 10px;
-          padding-left: 10px;
+          padding-right: 8px;
+          padding-left: 8px;
+          font-size: 16px;
+          line-height: 24px;
+          letter-spacing: 0.15px;
         }
       }
 
@@ -72,14 +75,33 @@
       a.login-with-button {
         color: rgba(black, 0.87);
         background-color: map-get($tb-dark-theme-background, raised-button);
+      }
+
+      .login-button-container {
+        a.login-with-button {
+          --mdc-outlined-button-container-shape: 8px;
+          max-width: 123px;
+          min-width: 60px;
+          flex-grow: 1;
+          flex-basis: 120px;
+
+          .tb-mat-20 {
+            margin: 0;
+            vertical-align: text-top;
+          }
+        }
 
-        &:hover {
-          border-bottom: 0;
+        &:has(> :nth-child(2):last-child) {
+          a.login-with-button {
+            max-width: 180px;
+            flex-basis: 180px;
+          }
         }
 
-        .icon {
-          height: 20px;
-          width: 20px;
+        &:has(> :nth-child(3):last-child) {
+          a.login-with-button {
+            max-width: 180px;
+          }
         }
       }
     }