update design, privacy policy checkbox added to registration form

frontend/src/app/components/auth/login/login.component.html

@@ -67,7 +67,6 @@
       <app-btn-large
         [value]="'Log in'"
         [disabled]="
-          !checkbox.checked ||
           !authData.mail ||
           (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
           !password.valid

frontend/src/app/components/auth/register/register.component.html

@@ -85,6 +85,20 @@
         <p>The passwords do not match</p>
         }
       </div>
+      <div class="checkbox">
+        <input
+          type="checkbox"
+          id="checkbox"
+          name="checkbox"
+          #checkbox
+          [(ngModel)]="authData.privacyPolicy"
+        />
+        <label for="checkbox"
+          >I agree to the
+          <a routerLink="/privacy-policy" target="_blank">Privacy policy</a
+          >.</label
+        >
+      </div>
       <app-btn-large
         [value]="'Get Started'"
         [disabled]="
@@ -93,7 +107,8 @@
             authData.mail.length > 0) ||
           authData.password !== authData.passwordConfirm ||
           !authData.password ||
-          !authData.passwordConfirm
+          !authData.passwordConfirm ||
+          !authData.privacyPolicy
         "
       ></app-btn-large>
     </form>

frontend/src/app/components/auth/register/register.component.scss

@@ -6,3 +6,32 @@ section {
   background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
     url(./../../../../assets/img/backgrounds/register.png);
 }
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  width: 90%;
+  height: 24px;
+  margin-bottom: 24px;
+  input {
+    width: 16px;
+    height: 16px;
+    margin: 12px;
+  }
+  label {
+    width: fit-content;
+    font-size: 16px;
+    font-weight: 400;
+    color: $black;
+    a {
+      font-size: 16px;
+      font-weight: 400;
+      color: $blue;
+      text-decoration: none;
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

frontend/src/app/components/auth/register/register.component.ts

@@ -16,6 +16,7 @@ export class RegisterComponent {
     mail: '',
     password: '',
     passwordConfirm: '',
+    privacyPolicy: false,
   };
 
   registrationSuccess: boolean = false;

frontend/src/app/components/home/footer/footer.component.scss

@@ -15,6 +15,7 @@ footer {
     padding: 0 36px;
     font-size: 18px;
     font-weight: 500;
+    text-decoration: none;
     cursor: pointer;
     &:hover {
       text-decoration: underline;

frontend/src/app/shared/components/btn-large/btn-large.component.scss

@@ -21,7 +21,7 @@
   &:disabled {
     background-color: $light-blue;
     color: darken($white, 10%);
-    border: 1px solid $gray;
+    border: 1px solid $light-blue;
     cursor: default;
   }
 }