UI: Change OAuth2 templated icon

ui-ngx/src/app/app.component.ts

@@ -68,6 +68,27 @@ export class AppComponent implements OnInit {
       )
     );
 
+    this.matIconRegistry.addSvgIconLiteral(
+      'google-logo',
+      this.domSanitizer.bypassSecurityTrustHtml(
+        '<svg viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/><path fill="none" d="M0 0h48v48H0z"/></svg>'
+      )
+    );
+
+    this.matIconRegistry.addSvgIconLiteral(
+      'github-logo',
+      this.domSanitizer.bypassSecurityTrustHtml(
+        '<svg viewBox="0 0 32.7 32.7"><path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.2-.4-.7-2.1.2-4.3 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5s2.8.2 4.1.5c3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3v4.5c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill="#211c19"/></svg>'
+      )
+    );
+
+    this.matIconRegistry.addSvgIconLiteral(
+      'facebook-logo',
+      this.domSanitizer.bypassSecurityTrustHtml(
+        '<svg viewBox="0 0 263 263"><path d="M263 131.5C263 58.9 204.1 0 131.5 0S0 58.9 0 131.5c0 65.6 48.1 120 110.9 129.9v-91.9H77.5v-38h33.4v-29c0-33 19.6-51.2 49.7-51.2 14.4 0 29.4 2.6 29.4 2.6v32.4h-16.5c-16.3 0-21.4 10.1-21.4 20.5v24.7h36.4l-5.8 38h-30.6v91.9c62.8-9.9 110.9-64.3 110.9-129.9z" fill="#1877f2"/><path d="M182.7 169.5l5.8-38H152v-24.7c0-10.4 5.1-20.5 21.4-20.5H190V53.9s-15-2.6-29.4-2.6c-30 0-49.7 18.2-49.7 51.2v29H77.5v38h33.4v91.9c6.7 1.1 13.6 1.6 20.5 1.6s13.9-.5 20.5-1.6v-91.9h30.8z" fill="#fff"/></svg>'
+      )
+    );
+
     this.storageService.testLocalStorage();
 
     this.setupTranslate();

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

@@ -275,7 +275,7 @@
                                             <mat-form-field fxFlex class="mat-block" floatLabel="always">
                                               <mat-label translate>admin.oauth2.login-button-label</mat-label>
                                               <input matInput formControlName="loginButtonLabel"
-                                                     placeholder="{{ 'admin.oauth2.login-button-label-1' | translate }}"
+                                                     placeholder="{{ 'admin.oauth2.login-button-label-placeholder' | translate }}"
                                                      required>
                                               <mat-error *ngIf="registration.get('loginButtonLabel').hasError('required')">
                                                 {{ 'admin.oauth2.login-button-label-required' | translate }}

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

@@ -31,7 +31,7 @@
             <div class="oauth-container tb-default" fxLayout="column" fxLayoutGap="16px" *ngIf="oauth2Clients?.length">
               <ng-container *ngFor="let oauth2Client of oauth2Clients">
                 <a mat-raised-button class="login-with-button" href="{{ oauth2Client.url }}">
-                  <mat-icon svgIcon="{{ oauth2Client.icon }}"></mat-icon>
+                  <mat-icon class="icon" svgIcon="{{ oauth2Client.icon }}"></mat-icon>
                   {{ 'login.login-with' | translate: {name: oauth2Client.name} }}
                 </a>
               </ng-container>

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

@@ -74,6 +74,12 @@
         &:hover {
           border-bottom: 0;
         }
+
+        .icon{
+          height: 20px;
+          width: 20px;
+          vertical-align: sub;
+        }
       }
 
       .centered ::ng-deep .mat-button-wrapper {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -158,7 +158,7 @@
           "last-name-attribute-key": "Last name attribute key",
           "login-button-icon": "Login button icon",
           "login-button-label": "Provider label",
-          "login-button-label-1": "Login with $(Provider label)",
+          "login-button-label-placeholder": "Login with $(Provider label)",
           "login-button-label-required": "Label is required.",
           "login-provider": "Login provider",
           "mapper": "Mapper",