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 · c31a0d2 · c31a0d2
1 parent f458635
commit c31a0d2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
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,21 @@ <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.
@@ -36,6 +37,10 @@ export class JoinExerciseModalComponent implements OnDestroy {
         this.activeModal.close();
     }
 
+    public toggleAgreedToTermsAndPrivacyPolicy(event: boolean) {
+        this.agreedToTermsAndPrivacyPolicy = event;
+    }
+
     ngOnDestroy() {
         this.exerciseJoined$.complete();
     }