Add first prototype for checkbox fer terms and privacy policy

Signed-off-by: anonym-HPI <68286419+anonym-HPI@users.noreply.github.com>
hpi-sam · Nov 17, 2023 · 6d7764a · 6d7764a
1 parent e6be4d1
commit 6d7764a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/...end/src/app/pages/exercises/shared/join-exercise-modal/join-exercise-modal.component.html b/...end/src/app/pages/exercises/shared/join-exercise-modal/join-exercise-modal.component.html
@@ -13,10 +13,22 @@ <h4 class="modal-title">Übung {{ exerciseId }} beitreten</h4>
             [maxlength]="255"
             type="text"
         />
+        <br />
+        <input
+            [ngModel]="agreedToTermsAndPrivacyPolicy"
+            (ngModelChange)="toggleAgreedToTermsAndPrivacyPolicy($event)"
+            class="form-check-input"
+            type="checkbox"
+            data-cy="joinExerciseModalButton"
+        />
+        <p>
+            Ich stimme den Nutzungsbedingungen und der Datenschutzerklärung zu.
+        </p>
     </div>
     <br />
 
     <button
+        [disabled]="!agreedToTermsAndPrivacyPolicy"
         (click)="joinExercise()"
         class="btn btn-primary"
         data-cy="joinExerciseModalButton"

diff --git a/frontend/src/app/pages/exercises/shared/join-exercise-modal/join-exercise-modal.component.ts b/frontend/src/app/pages/exercises/shared/join-exercise-modal/join-exercise-modal.component.ts
@@ -12,6 +12,7 @@ import { ApplicationService } from 'src/app/core/application.service';
 export class JoinExerciseModalComponent implements OnDestroy {
     public exerciseId!: string;
     public clientName = '';
+    public agreedToTermsAndPrivacyPolicy = false;
     /**
      * Emits true when the exercise was successfully joined.
      * If it completes without emitting a value or emits false, the exercise couldn't be joined.
@@ -23,6 +24,10 @@ export class JoinExerciseModalComponent implements OnDestroy {
         private readonly activeModal: NgbActiveModal
     ) {}
 
+    public toggleAgreedToTermsAndPrivacyPolicy(event: boolean) {
+        this.agreedToTermsAndPrivacyPolicy = event;
+    }
+
     public async joinExercise() {
         const successfullyJoined = await this.applicationService.joinExercise(
             this.exerciseId,