Skip to content

Commit da51b48

Browse files
peintnermaxlivio-ahifabienne
authored
fix(console): apply labelpolicy if icon is provided, signout page (zitadel#4499)
* label policy as observable * signedout policy via state * add caching * disable loading spinner on signedout * cleanup * catch error * update deps * move policy to localstorage * handle labelpolicy for users without org Co-authored-by: Livio Spring <[email protected]> Co-authored-by: Fabi <[email protected]>
1 parent bb16852 commit da51b48

18 files changed

+352
-533
lines changed

‎console/package-lock.json

Lines changed: 122 additions & 364 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎console/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"codemirror": "^5.65.8",
3636
"cors": "^2.8.5",
3737
"file-saver": "^2.0.5",
38-
"google-proto-files": "^3.0.0",
38+
"google-proto-files": "^3.0.2",
3939
"google-protobuf": "^3.19.4",
4040
"grpc-web": "^1.4.1",
4141
"libphonenumber-js": "^1.10.6",
@@ -44,7 +44,7 @@
4444
"ng-qrcode": "^7.0.0",
4545
"ngx-color": "^8.0.3",
4646
"ngx-quicklink": "^0.3.0",
47-
"rxjs": "~7.5.2",
47+
"rxjs": "~7.5.7",
4848
"tinycolor2": "^1.4.2",
4949
"tslib": "^2.2.0",
5050
"uuid": "^9.0.0",
@@ -63,14 +63,14 @@
6363
"@types/jasmine": "~4.3.0",
6464
"@types/jasminewd2": "~2.0.10",
6565
"@types/jsonwebtoken": "^8.5.5",
66-
"@types/node": "^18.7.16",
67-
"@typescript-eslint/eslint-plugin": "5.38.1",
68-
"@typescript-eslint/parser": "5.36.1",
66+
"@types/node": "^18.8.1",
67+
"@typescript-eslint/eslint-plugin": "5.39.0",
68+
"@typescript-eslint/parser": "5.39.0",
6969
"codelyzer": "^6.0.0",
7070
"eslint": "^8.24.0",
7171
"jasmine-core": "~4.4.0",
7272
"jasmine-spec-reporter": "~7.0.0",
73-
"karma": "~6.4.0",
73+
"karma": "~6.4.1",
7474
"karma-chrome-launcher": "~3.1.0",
7575
"karma-coverage-istanbul-reporter": "~3.0.2",
7676
"karma-jasmine": "~5.1.0",
@@ -79,4 +79,4 @@
7979
"protractor": "~7.0.0",
8080
"typescript": "^4.8.4"
8181
}
82-
}
82+
}

‎console/src/app/app.component.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
[org]="org"
66
[user]="$any(user)"
77
[isDarkTheme]="componentCssClass === 'dark-theme'"
8-
[labelpolicy]="labelpolicy"
98
(changedActiveOrg)="changedOrg($event)"
109
></cnsl-header>
1110

@@ -17,7 +16,6 @@
1716
[org]="org"
1817
[user]="$any(user)"
1918
[isDarkTheme]="componentCssClass === 'dark-theme'"
20-
[labelpolicy]="labelpolicy"
2119
></cnsl-nav>
2220
</ng-container>
2321

@@ -27,5 +25,5 @@
2725
</div>
2826
</div>
2927
<span class="fill-space"></span>
30-
<cnsl-footer [privateLabelPolicy]="labelpolicy"></cnsl-footer>
28+
<cnsl-footer></cnsl-footer>
3129
</div>

‎console/src/app/app.component.ts

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import { DomSanitizer } from '@angular/platform-browser';
88
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
99
import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
1010
import { Observable, of, Subject } from 'rxjs';
11-
import { map, take, takeUntil } from 'rxjs/operators';
11+
import { map, takeUntil } from 'rxjs/operators';
1212

1313
import { accountCard, adminLineAnimation, navAnimations, routeAnimations, toolbarAnimation } from './animations';
1414
import { Org } from './proto/generated/zitadel/org_pb';
15-
import { LabelPolicy, PrivacyPolicy } from './proto/generated/zitadel/policy_pb';
15+
import { PrivacyPolicy } from './proto/generated/zitadel/policy_pb';
1616
import { AuthenticationService } from './services/authentication.service';
1717
import { GrpcAuthService } from './services/grpc-auth.service';
1818
import { KeyboardShortcutsService } from './services/keyboard-shortcuts/keyboard-shortcuts.service';
@@ -47,7 +47,6 @@ export class AppComponent implements OnDestroy {
4747
public showProjectSection: boolean = false;
4848

4949
private destroy$: Subject<void> = new Subject();
50-
public labelpolicy: LabelPolicy.AsObject | undefined = undefined;
5150

5251
public language: string = 'en';
5352
public privacyPolicy!: PrivacyPolicy.AsObject;
@@ -69,7 +68,6 @@ export class AppComponent implements OnDestroy {
6968
private activatedRoute: ActivatedRoute,
7069
@Inject(DOCUMENT) private document: Document,
7170
) {
72-
this.themeService.loadPrivateLabelling(true);
7371
console.log(
7472
'%cWait!',
7573
'text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #5469D4; font-size: 50px',
@@ -187,8 +185,10 @@ export class AppComponent implements OnDestroy {
187185
this.getProjectCount();
188186

189187
this.authService.activeOrgChanged.pipe(takeUntil(this.destroy$)).subscribe((org) => {
190-
this.org = org;
191-
this.getProjectCount();
188+
if (org) {
189+
this.org = org;
190+
this.getProjectCount();
191+
}
192192
});
193193

194194
this.authenticationService.authenticationChanged.pipe(takeUntil(this.destroy$)).subscribe((authenticated) => {
@@ -197,10 +197,7 @@ export class AppComponent implements OnDestroy {
197197
.getActiveOrg()
198198
.then(async (org) => {
199199
this.org = org;
200-
const policy = await this.themeService.loadPrivateLabelling();
201-
if (policy) {
202-
this.labelpolicy = policy;
203-
}
200+
204201
// TODO add when console storage is implemented
205202
// this.startIntroWorkflow();
206203
})
@@ -252,7 +249,6 @@ export class AppComponent implements OnDestroy {
252249
}
253250

254251
public changedOrg(org: Org.AsObject): void {
255-
this.themeService.loadPrivateLabelling();
256252
this.router.navigate(['/org']);
257253
}
258254

‎console/src/app/modules/accounts-card/accounts-card.component.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ export class AccountsCardComponent implements OnInit {
6464
}
6565

6666
public logout(): void {
67+
const lP = JSON.stringify(this.userService.labelpolicy.getValue());
68+
localStorage.setItem('labelPolicyOnSignout', lP);
69+
6770
this.authService.signout();
6871
this.closedCard.emit();
6972
}

‎console/src/app/modules/footer/footer.component.html

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,24 @@
1111
</a>
1212
</div>
1313

14-
<div class="footer-socials" *ngIf="!privateLabelPolicy || privateLabelPolicy?.disableWatermark === false">
15-
<a target="_blank" rel="noreferrer" href="https://github.com/zitadel">
16-
<i class="text-3xl lab la-github"></i>
17-
</a>
18-
<a target="_blank" rel="noreferrer" href="https://twitter.com/zitadel">
19-
<i class="text-3xl lab la-twitter"></i>
20-
</a>
21-
<a target="_blank" rel="noreferrer" href="https://www.linkedin.com/company/zitadel/">
22-
<i class="text-3xl lab la-linkedin"></i>
23-
</a>
24-
<a target="_blank" rel="noreferrer" href="https://zitadel.com/chat">
25-
<i class="text-3xl lab la-discord"></i>
26-
</a>
27-
<a target="_blank" rel="noreferrer" href="https://www.youtube.com/channel/UCUAWJUNYaRn1yIVrZxEfsuA">
28-
<i class="text-3xl lab la-youtube"></i>
29-
</a>
14+
<div class="footer-socials" *ngIf="authService.labelpolicy | async as lP">
15+
<ng-container *ngIf="lP?.disableWatermark === false">
16+
<a target="_blank" rel="noreferrer" href="https://github.com/zitadel">
17+
<i class="text-3xl lab la-github"></i>
18+
</a>
19+
<a target="_blank" rel="noreferrer" href="https://twitter.com/zitadel">
20+
<i class="text-3xl lab la-twitter"></i>
21+
</a>
22+
<a target="_blank" rel="noreferrer" href="https://www.linkedin.com/company/zitadel/">
23+
<i class="text-3xl lab la-linkedin"></i>
24+
</a>
25+
<a target="_blank" rel="noreferrer" href="https://zitadel.com/chat">
26+
<i class="text-3xl lab la-discord"></i>
27+
</a>
28+
<a target="_blank" rel="noreferrer" href="https://www.youtube.com/channel/UCUAWJUNYaRn1yIVrZxEfsuA">
29+
<i class="text-3xl lab la-youtube"></i>
30+
</a>
31+
</ng-container>
3032
</div>
3133

3234
<div class="theme">

‎console/src/app/modules/footer/footer.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
99
})
1010
export class FooterComponent {
1111
public policy?: PrivacyPolicy.AsObject;
12-
@Input() public privateLabelPolicy?: LabelPolicy.AsObject;
13-
constructor(authService: GrpcAuthService) {
12+
constructor(public authService: GrpcAuthService) {
1413
authService.getMyPrivacyPolicy().then((policyResp) => {
1514
if (policyResp.policy) {
1615
this.policy = policyResp.policy;

‎console/src/app/modules/header/header.component.html

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
<mat-toolbar class="header-wrapper">
22
<div class="header-content">
3-
<a
4-
class="title custom"
5-
[routerLink]="['/']"
6-
*ngIf="org && labelpolicy && labelpolicy.disableWatermark; else defaultHome"
7-
>
8-
<img
9-
class="logo"
10-
alt="home logo"
11-
*ngIf="isDarkTheme; else customlighttheme"
12-
[src]="labelpolicy.iconUrlDark ? labelpolicy.iconUrlDark : './assets/images/zitadel-logo-solo-light.svg'"
13-
(error)="errorHandler($event, './assets/images/zitadel-logo-solo-light.svg')"
14-
/>
15-
<ng-template #customlighttheme>
3+
<div *ngIf="authService.labelPolicyLoading$ | async; else logo" class="logo-placeholder">
4+
<mat-spinner [diameter]="20"></mat-spinner>
5+
</div>
6+
<ng-template #logo>
7+
<a class="title custom" [routerLink]="['/']" *ngIf="authService.labelpolicy | async as lP; else defaultHome">
168
<img
17-
alt="home logo"
189
class="logo"
19-
[src]="labelpolicy.iconUrl ? labelpolicy.iconUrl : './assets/images/zitadel-logo-solo-dark.svg'"
20-
(error)="errorHandler($event, './assets/images/zitadel-logo-solo-dark.svg')"
10+
alt="home logo"
11+
*ngIf="isDarkTheme; else customlighttheme"
12+
[src]="lP.iconUrlDark ? lP.iconUrlDark : './assets/images/zitadel-logo-solo-light.svg'"
13+
(error)="errorHandler($event, './assets/images/zitadel-logo-solo-light.svg')"
2114
/>
22-
</ng-template>
23-
</a>
15+
<ng-template #customlighttheme>
16+
<img
17+
alt="home logo"
18+
class="logo"
19+
[src]="lP.iconUrl ? lP.iconUrl : './assets/images/zitadel-logo-solo-dark.svg'"
20+
(error)="errorHandler($event, './assets/images/zitadel-logo-solo-dark.svg')"
21+
/>
22+
</ng-template>
23+
</a>
24+
</ng-template>
2425

2526
<ng-template #defaultHome>
2627
<a class="title" [routerLink]="authService.zitadelPermissions.getValue().length === 0 ? ['/users', 'me'] : ['/']">

‎console/src/app/modules/header/header.component.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,16 @@
181181
}
182182
}
183183

184+
.logo-placeholder {
185+
height: 40px;
186+
width: 40px;
187+
border-radius: 50%;
188+
background-color: if($is-dark-theme, #00000020, #00000010);
189+
display: flex;
190+
align-items: center;
191+
justify-content: center;
192+
}
193+
184194
.title {
185195
text-decoration: none;
186196
color: white;

‎console/src/app/modules/header/header.component.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export class HeaderComponent implements OnDestroy {
2222

2323
@Input() public isDarkTheme: boolean = true;
2424
@Input() public user?: User.AsObject;
25-
@Input() public labelpolicy?: LabelPolicy.AsObject;
2625
public showOrgContext: boolean = false;
2726

2827
public orgs$: Observable<Org.AsObject[]> = of([]);

0 commit comments

Comments
 (0)