From 3bb2f4b5bd2c587486aef48a772e1299fe86ce3e Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Tue, 14 May 2024 02:37:56 +0200
Subject: [PATCH] added privacy policy checkbox

---
 .../login/footer/footer.component.html        |  4 +-
 .../login/register/register.component.html    | 21 ++++++++++
 .../login/register/register.component.scss    | 42 ++++++++++++++++++-
 .../login/register/register.component.ts      |  3 ++
 .../imprint/imprint.component.ts              |  2 +-
 .../privacy-policy.component.ts               |  2 +-
 .../img/login/checkbox-checked-hover.svg      |  5 +++
 src/assets/img/login/checkbox-checked.svg     |  4 ++
 src/assets/img/login/checkbox-hover.svg       |  4 ++
 src/assets/img/login/checkbox.svg             |  3 ++
 10 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/img/login/checkbox-checked-hover.svg
 create mode 100644 src/assets/img/login/checkbox-checked.svg
 create mode 100644 src/assets/img/login/checkbox-hover.svg
 create mode 100644 src/assets/img/login/checkbox.svg

diff --git a/src/app/components/login/footer/footer.component.html b/src/app/components/login/footer/footer.component.html
index 623528d..7c5825c 100644
--- a/src/app/components/login/footer/footer.component.html
+++ b/src/app/components/login/footer/footer.component.html
@@ -1,4 +1,4 @@
 <footer class="footer">
-  <a routerLink="privacy-policy">{{ "sidebar.privacyPolicy" | translate }}</a>
-  <a routerLink="imprint">{{ "sidebar.legalNotice" | translate }}</a>
+  <a routerLink="/privacy-policy">{{ "sidebar.privacyPolicy" | translate }}</a>
+  <a routerLink="/imprint">{{ "sidebar.legalNotice" | translate }}</a>
 </footer>
diff --git a/src/app/components/login/register/register.component.html b/src/app/components/login/register/register.component.html
index 94b088e..b9568a7 100644
--- a/src/app/components/login/register/register.component.html
+++ b/src/app/components/login/register/register.component.html
@@ -126,6 +126,27 @@
           <p>The passwords don't match!</p>
           }
         </div>
+        <div class="privacy-policy">
+          <input
+            type="checkbox"
+            id="checkbox"
+            name="checkbox"
+            #checkbox="ngModel"
+            [(ngModel)]="registerData.checkboxState"
+            required
+          />
+          <div class="label">
+            <p>
+              I accept the
+              <a routerLink="/privacy-policy">Privacy policy</a>
+            </p>
+          </div>
+        </div>
+        <div class="error-msg">
+          @if (!checkbox.valid && checkbox.touched) {
+          <p>You must accept the privacy policy!</p>
+          }
+        </div>
       </div>
       <div class="form-buttons">
         <app-form-btn
diff --git a/src/app/components/login/register/register.component.scss b/src/app/components/login/register/register.component.scss
index a319a3e..4e2cab5 100644
--- a/src/app/components/login/register/register.component.scss
+++ b/src/app/components/login/register/register.component.scss
@@ -111,5 +111,45 @@ section {
 .form-buttons {
   display: flex;
   justify-content: end;
-  padding: 12px 0;
+}
+
+.privacy-policy {
+  display: flex;
+  align-items: center;
+  input[type="checkbox"] {
+    width: 24px;
+    height: 24px;
+    margin: 0 10px 0 15px;
+    appearance: none;
+    border: 0;
+    border-radius: 0;
+    background-image: url("./../../../../assets/img/login/checkbox.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+    &:checked {
+      background-image: url("./../../../../assets/img/login/checkbox-checked.svg");
+      &:hover {
+        background-image: url("./../../../../assets/img/login/checkbox-checked-hover.svg");
+      }
+    }
+    &:hover {
+      background-image: url("./../../../../assets/img/login/checkbox-hover.svg");
+    }
+  }
+  .label {
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      padding-right: 20px;
+    }
+    a {
+      text-decoration: none;
+      color: var(--light-blue);
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }
diff --git a/src/app/components/login/register/register.component.ts b/src/app/components/login/register/register.component.ts
index 06bc33b..fef1c06 100644
--- a/src/app/components/login/register/register.component.ts
+++ b/src/app/components/login/register/register.component.ts
@@ -8,6 +8,7 @@ import { FirebaseService } from '../../../services/firebase.service';
 import { LoginService } from '../../../services/login.service';
 import { SharedService } from '../../../services/shared.service';
 import { BtnBackComponent } from '../../../shared/components/buttons/btn-back/btn-back.component';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-register',
@@ -19,6 +20,7 @@ import { BtnBackComponent } from '../../../shared/components/buttons/btn-back/bt
     BtnBackComponent,
     FormsModule,
     CommonModule,
+    RouterModule,
   ],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',
@@ -31,6 +33,7 @@ export class RegisterComponent {
     mail: '',
     password: '',
     passwordConfirm: '',
+    checkboxState: '',
   };
 
   constructor(
diff --git a/src/app/shared/components/legal-informations/imprint/imprint.component.ts b/src/app/shared/components/legal-informations/imprint/imprint.component.ts
index e5ec453..40d5d0e 100644
--- a/src/app/shared/components/legal-informations/imprint/imprint.component.ts
+++ b/src/app/shared/components/legal-informations/imprint/imprint.component.ts
@@ -26,7 +26,7 @@ export class ImprintComponent {
 
   checkCurrentRoute(): void {
     const currentUrl = this.router.url;
-    if (currentUrl === '/login/imprint') {
+    if (currentUrl === '/imprint') {
       this.isRouteLogin = true;
     }
   }
diff --git a/src/app/shared/components/legal-informations/privacy-policy/privacy-policy.component.ts b/src/app/shared/components/legal-informations/privacy-policy/privacy-policy.component.ts
index fc2c492..871d04d 100644
--- a/src/app/shared/components/legal-informations/privacy-policy/privacy-policy.component.ts
+++ b/src/app/shared/components/legal-informations/privacy-policy/privacy-policy.component.ts
@@ -26,7 +26,7 @@ export class PrivacyPolicyComponent implements OnInit {
 
   checkCurrentRoute(): void {
     const currentUrl = this.router.url;
-    if (currentUrl === '/login/privacy-policy') {
+    if (currentUrl === '/privacy-policy') {
       this.isRouteLogin = true;
     }
   }
diff --git a/src/assets/img/login/checkbox-checked-hover.svg b/src/assets/img/login/checkbox-checked-hover.svg
new file mode 100644
index 0000000..13ecdc3
--- /dev/null
+++ b/src/assets/img/login/checkbox-checked-hover.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.388184" width="24" height="24" rx="12" fill="#D1D1D1"/>
+<path d="M20.3882 11V17C20.3882 18.6569 19.045 20 17.3882 20H7.38818C5.73133 20 4.38818 18.6569 4.38818 17V7C4.38818 5.34315 5.73133 4 7.38818 4H15.3882" stroke="#2A3647" stroke-width="2" stroke-linecap="round"/>
+<path d="M8.38818 12L12.3882 16L20.3882 4.5" stroke="#2A3647" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/login/checkbox-checked.svg b/src/assets/img/login/checkbox-checked.svg
new file mode 100644
index 0000000..e7d1293
--- /dev/null
+++ b/src/assets/img/login/checkbox-checked.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3882 11V17C20.3882 18.6569 19.045 20 17.3882 20H7.38818C5.73133 20 4.38818 18.6569 4.38818 17V7C4.38818 5.34315 5.73133 4 7.38818 4H15.3882" stroke="#2A3647" stroke-width="2" stroke-linecap="round"/>
+<path d="M8.38818 12L12.3882 16L20.3882 4.5" stroke="#2A3647" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/login/checkbox-hover.svg b/src/assets/img/login/checkbox-hover.svg
new file mode 100644
index 0000000..c4f7c34
--- /dev/null
+++ b/src/assets/img/login/checkbox-hover.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.388184" width="24" height="24" rx="12" fill="#D1D1D1"/>
+<rect x="4.38818" y="4" width="16" height="16" rx="3" stroke="#2A3647" stroke-width="2"/>
+</svg>
diff --git a/src/assets/img/login/checkbox.svg b/src/assets/img/login/checkbox.svg
new file mode 100644
index 0000000..967a4a5
--- /dev/null
+++ b/src/assets/img/login/checkbox.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.38818" y="4" width="16" height="16" rx="3" stroke="#2A3647" stroke-width="2"/>
+</svg>