Add terms of service page (#1970)

Co-authored-by: Gino Miceli <[email protected]>

web/src/app/components/header/header.component.html

@@ -70,7 +70,7 @@
     </button>
 
     <mat-menu #infoMenu="matMenu">
-      <a>
+      <a (click)="onTermsOfServiceClick()">
         <button mat-menu-item>Terms of service</button>
       </a>
 

web/src/app/components/header/header.component.ts

@@ -80,6 +80,10 @@ export class HeaderComponent {
     this.router.navigate([NavigationService.ABOUT]);
   }
 
+  onTermsOfServiceClick() {
+    this.navigationService.navigateToTermsOfService();
+  }
+
   onCancelEditSurveyClick() {
     if (!this.draftSurveyService.dirty) {
       this.navigationService.selectSurvey(this.surveyId);

web/src/app/components/sign-in-page/sign-in-page.component.ts

@@ -40,7 +40,7 @@ export class SignInPageComponent implements OnInit, OnDestroy {
       this.authService
         .isAuthenticated$()
         .pipe(filter(isAuth => isAuth || environment.useEmulators))
-        .subscribe(() => this.navigationService.navigateToSurveyList())
+        .subscribe(() => this.navigationService.navigateToTermsOfService())
     );
   }
 

web/src/app/pages/about/about.component.ts

@@ -23,9 +23,9 @@ import {Component} from '@angular/core';
   styleUrls: ['./about.component.scss'],
 })
 export class AboutComponent {
-  constructor(private _location: Location) {}
+  constructor(private location: Location) {}
 
   onBackButtonClick() {
-    this._location.back();
+    this.location.back();
   }
 }

web/src/app/pages/terms/_terms.component-theme.scss

@@ -0,0 +1,40 @@
+/**
+ * Copyright 2024 The Ground Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+  .terms-text-container {
+    background-color: mat.get-theme-color($theme, surface-container-low);
+    border: 1px solid mat.get-theme-color($theme, outline-variant);
+  }
+
+  .page ::-webkit-scrollbar-thumb {
+    background: mat.get-theme-color($theme, surface-dim);
+  }
+}
+
+@mixin typography($theme) {
+  .terms-text-container {
+    font: mat.get-theme-typography($theme, title-medium, font);
+  }
+}
+
+@mixin theme($theme) {
+  @include color($theme);
+  @include typography($theme);
+}

web/src/app/pages/terms/terms.component.html

@@ -0,0 +1,49 @@
+<!--
+  Copyright 2024 The Ground Authors.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<div class="page">
+  <ground-header></ground-header>
+  <div class="page-content">
+    <h1 class="page-title">Terms Of Service</h1>
+    <div class="terms-text-container">
+      {{termsOfServiceText}}
+    </div>
+    <div class="action-buttons">
+      @if(!hasAcceptedTos) {
+        <mat-checkbox [(ngModel)]="isTermsOfServiceChecked">
+          I have read and agree with terms of service.
+        </mat-checkbox>
+        <button
+          mat-flat-button
+          (click)="onContinueButtonClick()"
+          [disabled]="!isTermsOfServiceChecked"
+        >
+          Continue
+        </button>
+      }
+      @else {
+        <button
+          mat-button
+          color="primary"
+          (click)="onBackButtonClick()"
+        >
+          <mat-icon>arrow_back</mat-icon>
+          <span>Back</span>
+        </button>
+      }
+    </div>
+  </div>
+</div>

web/src/app/pages/terms/terms.component.scss

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2024 The Ground Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.page {
+  min-height: 100%;
+  padding-bottom: 40px;
+
+  .page-content {
+    display: flex;
+    flex-direction: column;
+    margin: 30px 160px 24px 160px;
+    height: calc(100vh - 220px);
+  }
+
+  .terms-text-container {
+    padding: 24px;
+    overflow-y: scroll;
+  }
+
+  .action-buttons {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 24px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    background: transparent;
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    width: 8px;
+  }
+}

web/src/app/pages/terms/terms.component.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright 2024 The Ground Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Location} from '@angular/common';
+import {Component, OnInit} from '@angular/core';
+
+import {AuthService} from 'app/services/auth/auth.service';
+import {DataStoreService} from 'app/services/data-store/data-store.service';
+import {NavigationService} from 'app/services/navigation/navigation.service';
+
+@Component({
+  selector: 'ground-terms-page',
+  templateUrl: './terms.component.html',
+  styleUrls: ['./terms.component.scss'],
+})
+export class TermsComponent implements OnInit {
+  hasAcceptedTos: boolean;
+  isTermsOfServiceChecked = false;
+  termsOfServiceText = '';
+
+  constructor(
+    private authService: AuthService,
+    private dataStore: DataStoreService,
+    private navigationService: NavigationService,
+    private location: Location
+  ) {
+    this.hasAcceptedTos = this.authService.getHasAcceptedTos();
+  }
+
+  async ngOnInit() {
+    this.termsOfServiceText = await this.dataStore.getTermsOfService();
+  }
+
+  onContinueButtonClick() {
+    this.authService.approveTos();
+    this.navigationService.navigateToSurveyList();
+  }
+
+  onBackButtonClick() {
+    this.location.back();
+  }
+}

web/src/app/pages/terms/terms.module.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright 2024 The Ground Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButton} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatIcon} from '@angular/material/icon';
+import {RouterModule} from '@angular/router';
+
+import {HeaderModule} from 'app/components/header/header.module';
+import {TermsComponent} from 'app/pages/terms/terms.component';
+
+@NgModule({
+  declarations: [TermsComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    HeaderModule,
+    RouterModule,
+    MatButton,
+    MatCheckboxModule,
+    MatIcon,
+  ],
+  exports: [TermsComponent],
+})
+export class TermsModule {}

web/src/app/routing.module.ts

@@ -37,6 +37,7 @@ import {EditSurveyModule} from './pages/edit-survey/edit-survey.module';
 import {SurveyJsonComponent} from './pages/edit-survey/survey-json/survey-json.component';
 import {ErrorComponent} from './pages/error/error.component';
 import {ErrorModule} from './pages/error/error.module';
+import {TermsComponent} from './pages/terms/terms.component';
 
 const routes: Routes = [
   {
@@ -90,6 +91,11 @@ const routes: Routes = [
     component: AboutComponent,
     canActivate: [AuthGuard],
   },
+  {
+    path: NavigationService.TERMS,
+    component: TermsComponent,
+    canActivate: [AuthGuard],
+  },
 ];
 const config = RouterModule.forRoot(routes, {});
 

web/src/app/services/auth/auth.guard.ts

@@ -56,6 +56,15 @@ export class AuthGuard {
       this.navigationService.navigateToSurveyList();
       return false;
     }
+
+    if (url.includes(NavigationService.TERMS)) {
+      if (user.isAuthenticated) {
+        return true;
+      }
+      this.navigationService.signIn();
+      return false;
+    }
+
     if (user.isAuthenticated) {
       return true;
     }

web/src/app/services/auth/auth.service.ts

@@ -53,6 +53,7 @@ export const ROLE_OPTIONS = [
 export class AuthService {
   private user$: Observable<User>;
   private currentUser!: User;
+  private hasAcceptedTos = false;
 
   constructor(
     private afAuth: AngularFireAuth,
@@ -119,6 +120,14 @@ export class AuthService {
     return this.currentUser;
   }
 
+  getHasAcceptedTos(): boolean {
+    return this.hasAcceptedTos;
+  }
+
+  approveTos(): void {
+    this.hasAcceptedTos = true;
+  }
+
   async signIn() {
     const provider = new GoogleAuthProvider();
     await this.afAuth.signInWithPopup(provider);

web/src/app/services/data-store/data-store.service.ts

@@ -554,6 +554,11 @@ export class DataStoreService {
     return getDownloadURL(ref(getStorage(), path));
   }
 
+  async getTermsOfService(): Promise<string> {
+    const tos = await this.db.collection('config').doc('tos').ref.get();
+    return tos.get('text');
+  }
+
   addOrUpdateTasks(
     surveyId: string,
     job: Job,

web/src/app/services/navigation/navigation.service.ts

@@ -50,6 +50,7 @@ export class NavigationService {
   static readonly JOB_SEGMENT = 'job';
   static readonly ERROR = 'error';
   static readonly ABOUT = 'about';
+  static readonly TERMS = 'terms';
 
   private sidePanelExpanded = true;
 
@@ -280,6 +281,13 @@ export class NavigationService {
     ]);
   }
 
+  /**
+   * Navigate to the terms of service page
+   */
+  navigateToTermsOfService() {
+    this.router.navigate([NavigationService.TERMS]);
+  }
+
   /**
    * Navigate to the URL for viewing a list of available surveys.
    */

web/src/ground-theme.scss

@@ -49,6 +49,7 @@
 @use 'app/pages/main-page-container/main-page/survey-header/_survey-header.component-theme' as survey-header;
 @use 'app/pages/main-page-container/main-page/title-dialog/_title-dialog.component-theme' as title-dialog;
 @use 'app/pages/main-page-container/main-page/secondary-side-panel/_secondary-side-panel.component-theme' as secondary-side-panel;
+@use 'app/pages/terms/_terms.component-theme.scss' as terms;
 
 @import 'firebaseui/dist/firebaseui.css';
 
@@ -92,6 +93,7 @@ html {
   @include survey-header.theme($theme);
   @include title-dialog.theme($theme);
   @include secondary-side-panel.theme($theme);
+  @include terms.theme($theme);
 }
 
 // Global styles