fix(console, login): label policy and privacy policy from authservice, login - remove double footer element, mobile (#3795)

fix: cnsl auth policy, lgn footer mobile

console/src/app/app.component.ts

@@ -17,9 +17,6 @@ import { AuthenticationService } from './services/authentication.service';
 import { GrpcAuthService } from './services/grpc-auth.service';
 import { KeyboardShortcutsService } from './services/keyboard-shortcuts/keyboard-shortcuts.service';
 import { ManagementService } from './services/mgmt.service';
-import { NavigationService } from './services/navigation.service';
-import { OverlayWorkflowService } from './services/overlay/overlay-workflow.service';
-import { StorageService } from './services/storage.service';
 import { ThemeService } from './services/theme.service';
 import { UpdateService } from './services/update.service';
 
@@ -70,9 +67,6 @@ export class AppComponent implements OnDestroy {
     update: UpdateService,
     keyboardShortcuts: KeyboardShortcutsService,
     private activatedRoute: ActivatedRoute,
-    private workflowService: OverlayWorkflowService,
-    private storageService: StorageService,
-    private navigationService: NavigationService,
     @Inject(DOCUMENT) private document: Document,
   ) {
     console.log(

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

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { LabelPolicy, PrivacyPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
-import { ManagementService } from 'src/app/services/mgmt.service';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 
 @Component({
   selector: 'cnsl-footer',
@@ -10,8 +10,8 @@ import { ManagementService } from 'src/app/services/mgmt.service';
 export class FooterComponent {
   public policy!: PrivacyPolicy.AsObject;
   @Input() public privateLabelPolicy!: LabelPolicy.AsObject;
-  constructor(mgmtService: ManagementService) {
+  constructor(authService: GrpcAuthService) {
-    mgmtService.getPrivacyPolicy().then((policyResp) => {
+    authService.getMyPrivacyPolicy().then((policyResp) => {
       if (policyResp.policy) {
         this.policy = policyResp.policy;
       }

console/src/app/services/grpc-auth.service.ts

@@ -5,82 +5,86 @@ import { BehaviorSubject, from, merge, Observable, of, Subject } from 'rxjs';
 import { catchError, filter, finalize, map, mergeMap, switchMap, take, timeout } from 'rxjs/operators';
 
 import {
-    AddMyAuthFactorOTPRequest,
+  AddMyAuthFactorOTPRequest,
-    AddMyAuthFactorOTPResponse,
+  AddMyAuthFactorOTPResponse,
-    AddMyAuthFactorU2FRequest,
+  AddMyAuthFactorU2FRequest,
-    AddMyAuthFactorU2FResponse,
+  AddMyAuthFactorU2FResponse,
-    AddMyPasswordlessLinkRequest,
+  AddMyPasswordlessLinkRequest,
-    AddMyPasswordlessLinkResponse,
+  AddMyPasswordlessLinkResponse,
-    AddMyPasswordlessRequest,
+  AddMyPasswordlessRequest,
-    AddMyPasswordlessResponse,
+  AddMyPasswordlessResponse,
-    GetMyEmailRequest,
+  GetMyEmailRequest,
-    GetMyEmailResponse,
+  GetMyEmailResponse,
-    GetMyPasswordComplexityPolicyRequest,
+  GetMyLabelPolicyRequest,
-    GetMyPasswordComplexityPolicyResponse,
+  GetMyLabelPolicyResponse,
-    GetMyPhoneRequest,
+  GetMyPasswordComplexityPolicyRequest,
-    GetMyPhoneResponse,
+  GetMyPasswordComplexityPolicyResponse,
-    GetMyProfileRequest,
+  GetMyPhoneRequest,
-    GetMyProfileResponse,
+  GetMyPhoneResponse,
-    GetMyUserRequest,
+  GetMyPrivacyPolicyRequest,
-    GetMyUserResponse,
+  GetMyPrivacyPolicyResponse,
-    GetSupportedLanguagesRequest,
+  GetMyProfileRequest,
-    GetSupportedLanguagesResponse,
+  GetMyProfileResponse,
-    ListMyAuthFactorsRequest,
+  GetMyUserRequest,
-    ListMyAuthFactorsResponse,
+  GetMyUserResponse,
-    ListMyLinkedIDPsRequest,
+  GetSupportedLanguagesRequest,
-    ListMyLinkedIDPsResponse,
+  GetSupportedLanguagesResponse,
-    ListMyMembershipsRequest,
+  ListMyAuthFactorsRequest,
-    ListMyMembershipsResponse,
+  ListMyAuthFactorsResponse,
-    ListMyPasswordlessRequest,
+  ListMyLinkedIDPsRequest,
-    ListMyPasswordlessResponse,
+  ListMyLinkedIDPsResponse,
-    ListMyProjectOrgsRequest,
+  ListMyMembershipsRequest,
-    ListMyProjectOrgsResponse,
+  ListMyMembershipsResponse,
-    ListMyUserChangesRequest,
+  ListMyPasswordlessRequest,
-    ListMyUserChangesResponse,
+  ListMyPasswordlessResponse,
-    ListMyUserGrantsRequest,
+  ListMyProjectOrgsRequest,
-    ListMyUserGrantsResponse,
+  ListMyProjectOrgsResponse,
-    ListMyUserSessionsRequest,
+  ListMyUserChangesRequest,
-    ListMyUserSessionsResponse,
+  ListMyUserChangesResponse,
-    ListMyZitadelPermissionsRequest,
+  ListMyUserGrantsRequest,
-    ListMyZitadelPermissionsResponse,
+  ListMyUserGrantsResponse,
-    RemoveMyAuthFactorOTPRequest,
+  ListMyUserSessionsRequest,
-    RemoveMyAuthFactorOTPResponse,
+  ListMyUserSessionsResponse,
-    RemoveMyAuthFactorU2FRequest,
+  ListMyZitadelPermissionsRequest,
-    RemoveMyAuthFactorU2FResponse,
+  ListMyZitadelPermissionsResponse,
-    RemoveMyAvatarRequest,
+  RemoveMyAuthFactorOTPRequest,
-    RemoveMyAvatarResponse,
+  RemoveMyAuthFactorOTPResponse,
-    RemoveMyLinkedIDPRequest,
+  RemoveMyAuthFactorU2FRequest,
-    RemoveMyLinkedIDPResponse,
+  RemoveMyAuthFactorU2FResponse,
-    RemoveMyPasswordlessRequest,
+  RemoveMyAvatarRequest,
-    RemoveMyPasswordlessResponse,
+  RemoveMyAvatarResponse,
-    RemoveMyPhoneRequest,
+  RemoveMyLinkedIDPRequest,
-    RemoveMyPhoneResponse,
+  RemoveMyLinkedIDPResponse,
-    RemoveMyUserRequest,
+  RemoveMyPasswordlessRequest,
-    RemoveMyUserResponse,
+  RemoveMyPasswordlessResponse,
-    ResendMyEmailVerificationRequest,
+  RemoveMyPhoneRequest,
-    ResendMyEmailVerificationResponse,
+  RemoveMyPhoneResponse,
-    ResendMyPhoneVerificationRequest,
+  RemoveMyUserRequest,
-    ResendMyPhoneVerificationResponse,
+  RemoveMyUserResponse,
-    SendMyPasswordlessLinkRequest,
+  ResendMyEmailVerificationRequest,
-    SendMyPasswordlessLinkResponse,
+  ResendMyEmailVerificationResponse,
-    SetMyEmailRequest,
+  ResendMyPhoneVerificationRequest,
-    SetMyEmailResponse,
+  ResendMyPhoneVerificationResponse,
-    SetMyPhoneRequest,
+  SendMyPasswordlessLinkRequest,
-    SetMyPhoneResponse,
+  SendMyPasswordlessLinkResponse,
-    UpdateMyPasswordRequest,
+  SetMyEmailRequest,
-    UpdateMyPasswordResponse,
+  SetMyEmailResponse,
-    UpdateMyProfileRequest,
+  SetMyPhoneRequest,
-    UpdateMyProfileResponse,
+  SetMyPhoneResponse,
-    UpdateMyUserNameRequest,
+  UpdateMyPasswordRequest,
-    UpdateMyUserNameResponse,
+  UpdateMyPasswordResponse,
-    VerifyMyAuthFactorOTPRequest,
+  UpdateMyProfileRequest,
-    VerifyMyAuthFactorOTPResponse,
+  UpdateMyProfileResponse,
-    VerifyMyAuthFactorU2FRequest,
+  UpdateMyUserNameRequest,
-    VerifyMyAuthFactorU2FResponse,
+  UpdateMyUserNameResponse,
-    VerifyMyPasswordlessRequest,
+  VerifyMyAuthFactorOTPRequest,
-    VerifyMyPasswordlessResponse,
+  VerifyMyAuthFactorOTPResponse,
-    VerifyMyPhoneRequest,
+  VerifyMyAuthFactorU2FRequest,
-    VerifyMyPhoneResponse,
+  VerifyMyAuthFactorU2FResponse,
+  VerifyMyPasswordlessRequest,
+  VerifyMyPasswordlessResponse,
+  VerifyMyPhoneRequest,
+  VerifyMyPhoneResponse,
 } from '../proto/generated/zitadel/auth_pb';
 import { ChangeQuery } from '../proto/generated/zitadel/change_pb';
 import { ListQuery } from '../proto/generated/zitadel/object_pb';
@@ -554,4 +558,12 @@ export class GrpcAuthService {
     req.setQuery(query);
     return this.grpcService.auth.listMyUserChanges(req, null).then((resp) => resp.toObject());
   }
+
+  public getMyLabelPolicy(): Promise<GetMyLabelPolicyResponse.AsObject> {
+    return this.grpcService.auth.getMyLabelPolicy(new GetMyLabelPolicyRequest(), null).then((resp) => resp.toObject());
+  }
+
+  public getMyPrivacyPolicy(): Promise<GetMyPrivacyPolicyResponse.AsObject> {
+    return this.grpcService.auth.getMyPrivacyPolicy(new GetMyPrivacyPolicyRequest(), null).then((resp) => resp.toObject());
+  }
 }

console/src/app/services/theme.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 
-import { ManagementService } from './mgmt.service';
+import { GrpcAuthService } from './grpc-auth.service';
 
 declare const tinycolor: any;
 
@@ -21,7 +21,7 @@ export class ThemeService {
   private warnColorPalette: Color[] = [];
   private backgroundColorPalette: Color[] = [];
 
-  constructor(private mgmtService: ManagementService) {
+  constructor(private authService: GrpcAuthService) {
     const theme = localStorage.getItem('theme');
     if (theme) {
       if (theme === 'light-theme') {
@@ -146,8 +146,8 @@ export class ThemeService {
     const isDark = (color: string) => this.isDark(color);
     const isLight = (color: string) => this.isLight(color);
 
-    this.mgmtService
+    this.authService
-      .getLabelPolicy()
+      .getMyLabelPolicy()
       .then((lpresp) => {
         const labelpolicy = lpresp.policy;
 

internal/api/ui/login/static/resources/themes/scss/styles/footer/footer.scss

@@ -3,44 +3,48 @@ $footer-height: 50px;
 $footer-padding: 0 1rem;
 
 footer {
-    width: 100%;
+  width: 100%;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    background: #00000020;
+  background: #00000020;
-    min-height: $footer-height;
+  min-height: $footer-height;
+  display: flex;
+  align-items: center;
+  padding: $footer-padding;
+
+  .fill-space {
+    flex: 1;
+  }
+
+  a {
+    font-size: 12px;
+    margin-left: 1rem;
+    display: block;
+  }
+
+  @media only screen and (min-width: 600px) {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .watermark {
     display: flex;
-    align-items: center;
-    padding: $footer-padding;
 
-    .fill-space {
+    .powered {
-        flex: 1;
+      font-size: 12px;
+      margin: auto 2px;
+      display: none;
+
+      @media only screen and (min-width: 600px) {
+        display: inline-block;
+      }
     }
 
-    a {
+    .lgn-logo-watermark {
-        font-size: 12px;
+      height: 40px;
-        margin-left: 1rem;
+      min-width: 125px;
-        display: block;
+      margin: auto 2px;
     }
-
+  }
-    @media only screen and (min-width: 600px) {
+}
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-
-    .watermark {
-        display: flex;
-
-        .powered {
-            font-size: 12px;
-            margin: auto 2px;
-        }
-
-        .lgn-logo-watermark {
-            height: 40px;
-            min-width: 125px;
-            margin: auto 2px;
-        }
-    }
-
-}

internal/api/ui/login/static/templates/main.html

@@ -35,7 +35,5 @@
     <script src="{{ resourceUrl "scripts/avatar.js" }}"></script>
     <script src="{{ resourceUrl "scripts/touched.js" }}"></script>
 </body>
-<footer>
+{{template "footer" .}}
-    {{template "footer" .}}
-</footer>
 {{end}}