added privacy policy checkbox

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="/privacy-policy">{{ "sidebar.privacyPolicy" | translate }}</a>
-  <a routerLink="imprint">{{ "sidebar.legalNotice" | translate }}</a>
+  <a routerLink="/imprint">{{ "sidebar.legalNotice" | translate }}</a>
 </footer>

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

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;
+      }
+    }
+  }
 }

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(

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;
     }
   }

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;
     }
   }

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>

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>

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>

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>