feat(angular): tos migrated to terms & service provider

Author: dackers86

packages/angular/projects/firebaseui-angular/src/lib/components/terms-and-privacy/terms-and-privacy.component.ts

@@ -1,52 +1,44 @@
 import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FirebaseUI } from '../../provider';
-import { map } from 'rxjs/operators';
+import { FirebaseUI, FirebaseUIPolicies } from '../../provider';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'fui-terms-and-privacy',
   standalone: true,
   imports: [CommonModule],
   template: `
-    <!-- <div class="text-text-muted text-xs text-start my-6" *ngIf="shouldShow | async">
+    <div class="text-text-muted text-xs text-start my-6" *ngIf="shouldShow">
       <ng-container *ngFor="let part of parts | async; let i = index">
-        <a 
-          *ngIf="part.type === 'tos' && (tosUrl | async)"
-          [href]="tosUrl | async"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-text-muted hover:underline text-xs"
+        <a
+          *ngIf="part.type === 'tos' && tosUrl"
+          (click)="handleUrl(tosUrl)"
+          class="text-text-muted hover:underline font-semibold cursor-pointer"
         >
           {{ termsText | async }}
         </a>
-        <a 
-          *ngIf="part.type === 'privacy' && (privacyPolicyUrl | async)"
-          [href]="privacyPolicyUrl | async"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-text-muted hover:underline text-xs"
+        <a
+          *ngIf="part.type === 'privacy' && privacyPolicyUrl"
+          (click)="handleUrl(privacyPolicyUrl)"
+          class="text-text-muted hover:underline font-semibold cursor-pointer"
         >
           {{ privacyText | async }}
         </a>
-        <ng-container *ngIf="part.type === 'text'">{{ part.content }}</ng-container>
+        <ng-container *ngIf="part.type === 'text'">
+          <span>{{ part.content }}</span>
+        </ng-container>
       </ng-container>
-    </div> -->
+    </div>
   `,
 })
 export class TermsAndPrivacyComponent {
   private ui = inject(FirebaseUI);
+  private policies = inject(FirebaseUIPolicies);
 
-  // tosUrl = this.ui.config().pipe(
-  //   map(config => config?.tosUrl)
-  // );
+  tosUrl = this.policies.termsOfServiceUrl;
+  privacyPolicyUrl = this.policies.privacyPolicyUrl;
 
-  // privacyPolicyUrl = this.ui.config().pipe(
-  //   map(config => config?.privacyPolicyUrl)
-  // );
-
-  // shouldShow = this.ui.config().pipe(
-  //   map(config => !!(config?.tosUrl || config?.privacyPolicyUrl))
-  // );
+  shouldShow = !!(this.tosUrl || this.privacyPolicyUrl);
 
   termsText = this.ui.translation('labels', 'termsOfService');
   privacyText = this.ui.translation('labels', 'privacyPolicy');
@@ -55,14 +47,16 @@ export class TermsAndPrivacyComponent {
     map((text) => {
       const parts = text.split(/({tos}|{privacy})/);
       return parts.map((part) => {
-        if (part === '{tos}') {
-          return { type: 'tos' };
-        }
-        if (part === '{privacy}') {
-          return { type: 'privacy' };
-        }
+        if (part === '{tos}') return { type: 'tos' };
+        if (part === '{privacy}') return { type: 'privacy' };
         return { type: 'text', content: part };
       });
     }),
   );
+
+  handleUrl(url: string) {
+    if (url) {
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  }
 }

packages/angular/src/app/app.config.ts

@@ -9,7 +9,10 @@ import {
 
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
-import { provideFirebaseUI } from '@firebase-ui/angular';
+import {
+  provideFirebaseUI,
+  provideFirebaseUIPolicies,
+} from '@firebase-ui/angular';
 import { initializeUI } from '@firebase-ui/core';
 
 const firebaseConfig = {
@@ -36,5 +39,9 @@ export const appConfig: ApplicationConfig = {
       return auth;
     }),
     provideFirebaseUI((apps) => initializeUI({ app: apps[0] })),
+    provideFirebaseUIPolicies(() => ({
+      termsOfServiceUrl: 'https://www.google.com',
+      privacyPolicyUrl: 'https://www.google.com',
+    })),
   ],
 };