简柏林 / thingskit · Commits

Commit 054fcba46f58f6b12a9ed347fa4a9b8afecf3222

Authored by Vladyslav_Prykhodko
1 parent 1c2ec66f

UI: Change OAuth2 templated icon

Inline Side-by-side
Showing 5 changed files with 30 additions and 3 deletions
@@ -68,6 +68,27 @@ export class AppComponent implements OnInit { @@ -68,6 +68,27 @@ export class AppComponent implements OnInit {
68 ) 68 )
69 ); 69 );
70 70
  71 + this.matIconRegistry.addSvgIconLiteral(
  72 + 'google-logo',
  73 + this.domSanitizer.bypassSecurityTrustHtml(
  74 + '<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>'
  75 + )
  76 + );
  77 +
  78 + this.matIconRegistry.addSvgIconLiteral(
  79 + 'github-logo',
  80 + this.domSanitizer.bypassSecurityTrustHtml(
  81 + '<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>'
  82 + )
  83 + );
  84 +
  85 + this.matIconRegistry.addSvgIconLiteral(
  86 + 'facebook-logo',
  87 + this.domSanitizer.bypassSecurityTrustHtml(
  88 + '<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>'
  89 + )
  90 + );
  91 +
71 this.storageService.testLocalStorage(); 92 this.storageService.testLocalStorage();
72 93
73 this.setupTranslate(); 94 this.setupTranslate();
@@ -275,7 +275,7 @@ @@ -275,7 +275,7 @@
275 <mat-form-field fxFlex class="mat-block" floatLabel="always"> 275 <mat-form-field fxFlex class="mat-block" floatLabel="always">
276 <mat-label translate>admin.oauth2.login-button-label</mat-label> 276 <mat-label translate>admin.oauth2.login-button-label</mat-label>
277 <input matInput formControlName="loginButtonLabel" 277 <input matInput formControlName="loginButtonLabel"
278 - placeholder="{{ 'admin.oauth2.login-button-label-1' | translate }}" 278 + placeholder="{{ 'admin.oauth2.login-button-label-placeholder' | translate }}"
279 required> 279 required>
280 <mat-error *ngIf="registration.get('loginButtonLabel').hasError('required')"> 280 <mat-error *ngIf="registration.get('loginButtonLabel').hasError('required')">
281 {{ 'admin.oauth2.login-button-label-required' | translate }} 281 {{ 'admin.oauth2.login-button-label-required' | translate }}
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 <div class="oauth-container tb-default" fxLayout="column" fxLayoutGap="16px" *ngIf="oauth2Clients?.length"> 31 <div class="oauth-container tb-default" fxLayout="column" fxLayoutGap="16px" *ngIf="oauth2Clients?.length">
32 <ng-container *ngFor="let oauth2Client of oauth2Clients"> 32 <ng-container *ngFor="let oauth2Client of oauth2Clients">
33 <a mat-raised-button class="login-with-button" href="{{ oauth2Client.url }}"> 33 <a mat-raised-button class="login-with-button" href="{{ oauth2Client.url }}">
34 - <mat-icon svgIcon="{{ oauth2Client.icon }}"></mat-icon> 34 + <mat-icon class="icon" svgIcon="{{ oauth2Client.icon }}"></mat-icon>
35 {{ 'login.login-with' | translate: {name: oauth2Client.name} }} 35 {{ 'login.login-with' | translate: {name: oauth2Client.name} }}
36 </a> 36 </a>
37 </ng-container> 37 </ng-container>
@@ -74,6 +74,12 @@ @@ -74,6 +74,12 @@
74 &:hover { 74 &:hover {
75 border-bottom: 0; 75 border-bottom: 0;
76 } 76 }
  77 +
  78 + .icon{
  79 + height: 20px;
  80 + width: 20px;
  81 + vertical-align: sub;
  82 + }
77 } 83 }
78 84
79 .centered ::ng-deep .mat-button-wrapper { 85 .centered ::ng-deep .mat-button-wrapper {
@@ -158,7 +158,7 @@ @@ -158,7 +158,7 @@
158 "last-name-attribute-key": "Last name attribute key", 158 "last-name-attribute-key": "Last name attribute key",
159 "login-button-icon": "Login button icon", 159 "login-button-icon": "Login button icon",
160 "login-button-label": "Provider label", 160 "login-button-label": "Provider label",
161 - "login-button-label-1": "Login with $(Provider label)", 161 + "login-button-label-placeholder": "Login with $(Provider label)",
162 "login-button-label-required": "Label is required.", 162 "login-button-label-required": "Label is required.",
163 "login-provider": "Login provider", 163 "login-provider": "Login provider",
164 "mapper": "Mapper", 164 "mapper": "Mapper",