Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update language & design

Browse source
This commit is contained in:
Chneemann 2024-05-15 21:17:02 +02:00
parent 84cd8e1e2b
commit 599466f97a
10 changed files with 107 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/login/footer/footer.component.html
View file

@ -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>

2
src/app/components/login/footer/footer.component.scss
View file

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

11
src/app/components/login/header/header.component.html
View file

@ -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>

15
src/app/components/login/header/header.component.scss
View file

@ -25,8 +25,8 @@
align-items: center;
background-color: var(--dark-blue);
color: var(--white);
width: 91px;
height: 49px;
width: fit-content;
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) {

3
src/app/components/login/header/header.component.ts
View file

@ -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) {}
}

42
src/app/components/login/register/register.component.html
View file

@ -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) {
<p>You must enter a mail.</p>
@if(!mail.valid && mail.touched &&
!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
<a routerLink="/login/privacy-policy">Privacy policy</a>
{{ "register.privacyPolicy0" | translate }}
<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 ||

17
src/app/components/login/register/register.component.scss
View file

@ -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;
left: -150px;
top: 70px;
left: 50px;
}
}
@ -175,9 +174,8 @@ section {
.headline {
app-btn-back {
position: absolute;
top: 10px;
left: -100px;
top: 35px;
left: 30px;
}
}
}
@ -205,9 +203,8 @@ section {
.headline {
app-btn-back {
position: absolute;
top: 5px;
left: -70px;
top: 15px;
left: 20px;
}
}

5
src/app/components/login/register/register.component.ts
View file

@ -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) {

21
src/assets/i18n/de.json
View file

@ -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"
},

21
src/assets/i18n/en.json
View file

@ -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"
},