update language & design

src/app/components/login/footer/footer.component.html

@@ -1,6 +1,6 @@
 <footer class="footer">
   <a routerLink="/login/privacy-policy">{{
-    "sidebar.privacyPolicy" | translate
+    "loginFooter.privacyPolicy" | translate
   }}</a>
-  <a routerLink="/login/imprint">{{ "sidebar.legalNotice" | translate }}</a>
+  <a routerLink="/login/imprint">{{ "loginFooter.legalNotice" | translate }}</a>
 </footer>

src/app/components/login/footer/footer.component.scss

@@ -13,7 +13,7 @@
     color: var(--gray);
     padding: 8px;
     cursor: pointer;
-    width: 110px;
+    width: fit-content;
     height: 19px;
     text-decoration: none;
     cursor: pointer;

src/app/components/login/header/header.component.html

@@ -5,3 +5,14 @@
   <button routerLink="/register">{{ "loginHeader.signup" | translate }}</button>
 </div>
 }
+<div class="language">
+  <img
+    src="./../../../../assets/img/header/language.svg"
+    alt=""
+    (click)="
+      languageService.switchLanguage(
+        languageService.currentLang == 'en' ? 'de' : 'en'
+      )
+    "
+  />
+</div>

src/app/components/login/header/header.component.scss

@@ -25,8 +25,8 @@
     align-items: center;
     background-color: var(--dark-blue);
     color: var(--white);
-    width: 91px;
+    width: fit-content;
-    height: 49px;
+    padding: 14px 18px;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 700;
@@ -40,6 +40,17 @@
   }
 }
 
+.language {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  cursor: pointer;
+  &:hover {
+    filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
+      hue-rotate(154deg) brightness(92%) contrast(92%);
+  }
+}
+
 /*------------- RESPONSIVE -------------*/
 
 @media (max-height: 700px) {

src/app/components/login/header/header.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { LanguageService } from '../../../services/language.service';
 
 @Component({
   selector: 'app-header',
@@ -11,4 +12,6 @@ import { TranslateModule } from '@ngx-translate/core';
 })
 export class HeaderComponent {
   @Input() signUpBtn: boolean = false;
+
+  constructor(public languageService: LanguageService) {}
 }

src/app/components/login/register/register.component.html

@@ -9,7 +9,7 @@
     <div class="content">
       <div class="headline">
         <app-btn-back></app-btn-back>
-        <p>Sign up</p>
+        <p>{{ "register.signup" | translate }}</p>
         <div class="line">
           <img src="./../../../assets/img/login/blue-line.svg" alt="" />
         </div>
@@ -20,7 +20,7 @@
           id="name"
           name="name"
           #name="ngModel"
-          placeholder="Name"
+          placeholder="{{ 'register.name' | translate }}"
           class="custom-input"
           autocomplete="name"
           [(ngModel)]="registerData.name"
@@ -37,7 +37,7 @@
         }
         <div class="error-msg">
           @if (!name.valid && name.touched) {
-          <p>You must enter a name.</p>
+          <p>{{ "register.errorName" | translate }}</p>
           }
         </div>
         <input
@@ -45,7 +45,7 @@
           id="mail"
           name="mail"
           #mail="ngModel"
-          placeholder="Email"
+          placeholder="{{ 'register.email' | translate }}"
           class="custom-input"
           autocomplete="email"
           [(ngModel)]="registerData.mail"
@@ -61,11 +61,15 @@
         <img class="custom-img" alt="" />
         }
         <div class="error-msg">
-          @if (!mail.valid && mail.touched) {
+          @if(!mail.valid && mail.touched &&
-          <p>You must enter a mail.</p>
+          !checkIfUserEmailIsValid(registerData.mail)) {
+          <p>{{ "register.errorMail0" | translate }}</p>
+          } @else { @if (mail.touched &&
+          !checkIfUserEmailIsValid(registerData.mail)) {
+          <p>{{ "register.errorMail1" | translate }}</p>
           } @else { @if (existEmailonServer(registerData.mail).length > 0) {
-          <p>This email already exists.</p>
+          <p>{{ "register.errorMail2" | translate }}</p>
-          } }
+          } } }
         </div>
         <input
           type="password"
@@ -73,7 +77,7 @@
           name="password"
           #password="ngModel"
           [type]="loginSerivce.passwordFieldType"
-          placeholder="Password"
+          placeholder="{{ 'register.password' | translate }}"
           class="custom-input"
           autocomplete="new-password"
           [(ngModel)]="registerData.password"
@@ -94,9 +98,9 @@
         }
         <div class="error-msg">
           @if (!password.valid && password.touched) {
-          <p>You must enter a password.</p>
+          <p>{{ "register.errorPassword0" | translate }}</p>
           } @else { @if (registerData.password.length < 6 && password.touched) {
-          <p>The password must consist of at least 6 characters</p>
+          <p>{{ "register.errorPassword1" | translate }}</p>
           } }
         </div>
         <input
@@ -105,7 +109,7 @@
           name="passwordConfirm"
           #passwordConfirm="ngModel"
           [type]="loginSerivce.passwordFieldType"
-          placeholder="Confirm Password"
+          placeholder="{{ 'register.passwordConfirm' | translate }}"
           class="custom-input"
           autocomplete="new-password"
           [(ngModel)]="registerData.passwordConfirm"
@@ -126,10 +130,10 @@
         }
         <div class="error-msg">
           @if (!passwordConfirm.valid && passwordConfirm.touched) {
-          <p>You must enter a password.</p>
+          <p>{{ "register.errorPassword0" | translate }}</p>
           } @if (registerData.password !== registerData.passwordConfirm &&
           registerData.password !== "" && registerData.passwordConfirm !== "") {
-          <p>The passwords don't match!</p>
+          <p>{{ "register.errorPassword2" | translate }}</p>
           }
         </div>
         <div class="privacy-policy">
@@ -143,14 +147,16 @@
           />
           <div class="label">
             <p>
-              I accept the
+              {{ "register.privacyPolicy0" | translate }}
-              <a routerLink="/login/privacy-policy">Privacy policy</a>
+              <a routerLink="/login/privacy-policy">{{
+                "register.privacyPolicy1" | translate
+              }}</a>
             </p>
           </div>
         </div>
         <div class="error-msg">
           @if (!checkbox.valid && checkbox.touched) {
-          <p>You must accept the privacy policy!</p>
+          <p>{{ "register.privacyPolicyError" | translate }}</p>
           }
         </div>
       </div>
@@ -158,7 +164,7 @@
         <app-form-btn
           [class]="'btn-login'"
           [type]="'submit'"
-          [value]="'Sign up'"
+          [value]="'register.signup' | translate"
           [disabled]="
             mail.invalid ||
             !registerData.mail ||

src/app/components/login/register/register.component.scss

@@ -1,6 +1,7 @@
 section {
   width: 100vw;
   height: 100vh;
+  position: relative;
 }
 
 // REGISTER
@@ -22,7 +23,6 @@ section {
   p {
     font-size: 61px;
     font-weight: 700;
-    position: relative;
   }
   .line {
     img {
@@ -33,12 +33,11 @@ section {
 }
 
 .headline {
-  position: relative;
   text-align: center;
   app-btn-back {
     position: absolute;
-    top: 20px;
+    top: 70px;
-    left: -150px;
+    left: 50px;
   }
 }
 
@@ -175,9 +174,8 @@ section {
 
   .headline {
     app-btn-back {
-      position: absolute;
+      top: 35px;
-      top: 10px;
+      left: 30px;
-      left: -100px;
     }
   }
 }
@@ -205,9 +203,8 @@ section {
 
   .headline {
     app-btn-back {
-      position: absolute;
+      top: 15px;
-      top: 5px;
+      left: 20px;
-      left: -70px;
     }
   }
 

src/app/components/login/register/register.component.ts

@@ -9,6 +9,7 @@ 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';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-register',
@@ -21,6 +22,7 @@ import { RouterModule } from '@angular/router';
     FormsModule,
     CommonModule,
     RouterModule,
+    TranslateModule,
   ],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',
@@ -39,7 +41,8 @@ export class RegisterComponent {
   constructor(
     private firebaseService: FirebaseService,
     public loginSerivce: LoginService,
-    public sharedService: SharedService
+    public sharedService: SharedService,
+    public translateService: TranslateService
   ) {}
 
   onSubmit(ngForm: NgForm) {

src/assets/i18n/de.json

@@ -10,10 +10,31 @@
     "errorPassword0": "Sie müssen ein Passwort eingeben!",
     "errorPassword1": "Das Passwort stimmt nicht mit der E-Mail Adresse überein!"
   },
+  "register": {
+    "signup": "Registrieren",
+    "name": "Name",
+    "email": "Email",
+    "password": "Passwort",
+    "passwordConfirm": "Passwort bestätigen",
+    "privacyPolicy0": "Ich akzeptiere die",
+    "privacyPolicy1": "Datenschutzerklärung",
+    "privacyPolicyError": "Sie müssen die Datenschutzbestimmungen akzeptieren!",
+    "errorName": "Sie müssen einen Namen eingeben!",
+    "errorMail0": "Sie müssen eine E-Mail Adresse eingeben!",
+    "errorMail1": "Dies ist kein gültiges E-Mail-Format!",
+    "errorMail2": "Diese E-Mail existiert bereits!",
+    "errorPassword0": "Sie müssen ein Passwort eingeben!",
+    "errorPassword1": "Das Passwort muss aus mindestens 6 Zeichen bestehen!",
+    "errorPassword2": "Die Passwörter stimmen nicht überein!"
+  },
   "loginHeader": {
     "notAUser": "Kein Join Nutzer?",
     "signup": "Registrieren"
   },
+  "loginFooter": {
+    "privacyPolicy": "Datenschutzerklärung",
+    "legalNotice": "Rechtliche Hinweise"
+  },
   "header": {
     "headline": "Kanban Projektmanagement Werkzeug"
   },

src/assets/i18n/en.json

@@ -10,10 +10,31 @@
     "errorPassword0": "You must enter a password!",
     "errorPassword1": "The password does not match the email address!"
   },
+  "register": {
+    "signup": "Sign up",
+    "name": "Name",
+    "email": "Email",
+    "password": "Password",
+    "passwordConfirm": "Confirm Password",
+    "privacyPolicy0": "I accept the",
+    "privacyPolicy1": "Privacy policy",
+    "privacyPolicyError": "You must accept the privacy policy!",
+    "errorName": "You must enter a name!",
+    "errorMail0": "You must enter a mail!",
+    "errorMail1": "This is not a valid email format!",
+    "errorMail2": "This email already exists!",
+    "errorPassword0": "You must enter a password!",
+    "errorPassword1": "The password must consist of at least 6 characters!",
+    "errorPassword2": "The passwords don't match!"
+  },
   "loginHeader": {
     "notAUser": "Not a Join user?",
     "signup": "Sign up"
   },
+  "loginFooter": {
+    "privacyPolicy": "Privacy policy",
+    "legalNotice": "Legal notice"
+  },
   "header": {
     "headline": "Kanban Project Management Tool"
   },