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

feat: migrate RegisterComponent to Django Rest

Browse source
This commit is contained in:
Chneemann 2025-04-05 20:32:07 +02:00
parent b02ebe78ba
commit 4b7912324d
7 changed files with 74 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -47,17 +47,17 @@
}}
</div>
<input
type="mail"
id="mail"
name="mail"
type="email"
id="email"
name="email"
#mail="ngModel"
placeholder="{{ 'register.email' | translate }}"
class="custom-input"
autocomplete="email"
[(ngModel)]="registerData.mail"
[(ngModel)]="registerData.email"
required
/>
@if(!registerData.mail) {
@if(!registerData.email) {
<img
class="custom-img"
src="./../../../assets/img/login/mail.svg"
@ -68,14 +68,14 @@
}
<div class="error-msg">
@if(!mail.valid && mail.touched &&
!checkIfUserEmailIsValid(registerData.mail.toLowerCase()) &&
!isEmailValid(registerData.email.toLowerCase()) &&
!isButtonDisabled()) {
<p>{{ "register.errorMail0" | translate }}</p>
} @else { @if (mail.touched &&
!checkIfUserEmailIsValid(registerData.mail.toLowerCase()) &&
!isEmailValid(registerData.email.toLowerCase()) &&
!isButtonDisabled()) {
<p>{{ "register.errorMail1" | translate }}</p>
} @else { @if (existEmailOnServer(registerData.mail.toLowerCase()) &&
} @else { @if (errorHttpMessage === 'Email already exists' &&
!isButtonDisabled()) {
<p>{{ "register.errorMail2" | translate }}</p>
} } }
@ -109,7 +109,7 @@
<div class="error-msg">
@if (!password.valid && password.touched && !isButtonDisabled()) {
<p>{{ "register.errorPassword0" | translate }}</p>
} @else { @if (registerData.password.length < 6 && password.touched &&
} @else { @if (registerData.password.length < 8 && password.touched &&
!isButtonDisabled()) {
<p>{{ "register.errorPassword1" | translate }}</p>
} }
@ -181,14 +181,14 @@
[value]="'register.signup' | translate"
[disabled]="
mail.invalid ||
!registerData.mail ||
!registerData.email ||
password.invalid ||
!registerData.password ||
!checkbox.valid ||
isButtonDisabled() ||
registerData.password.length < 6 ||
registerData.password !== registerData.passwordConfirm ||
!checkIfUserEmailIsValid(registerData.mail)
!isEmailValid(registerData.email)
"
></app-form-btn>
</div>

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

@ -10,6 +10,7 @@ import { RouterModule } from '@angular/router';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { ButtonStateService } from '../../../services/button-state.service';
import { LoginLoaderComponent } from '../login-loader/login-loader.component';
import { AuthService } from '../../../services/auth.service';
@Component({
selector: 'app-register',
@ -29,11 +30,13 @@ import { LoginLoaderComponent } from '../login-loader/login-loader.component';
styleUrl: './register.component.scss',
})
export class RegisterComponent {
errorHttpMessage: string = '';
registerData = {
name: '',
firstName: '',
lastName: '',
mail: '',
email: '',
password: '',
passwordConfirm: '',
checkboxState: '',
@ -42,14 +45,23 @@ export class RegisterComponent {
constructor(
public loginService: LoginService,
public translateService: TranslateService,
private authService: AuthService,
private buttonStateService: ButtonStateService
) {}
onSubmit(ngForm: NgForm) {
this.buttonStateService.enableButton();
async onSubmit(ngForm: NgForm) {
this.buttonStateService.disableButton();
if (ngForm.submitted && ngForm.form.valid) {
this.splitName();
this.loginService.register(this.registerData);
this.extractFirstAndLastName();
try {
await this.authService.register(this.registerData);
this.buttonStateService.enableButton();
} catch (error: any) {
this.errorHttpMessage = error.message;
this.buttonStateService.enableButton();
}
} else {
this.buttonStateService.enableButton();
}
}
@ -57,17 +69,13 @@ export class RegisterComponent {
return this.buttonStateService.isButtonDisabled;
}
splitName() {
extractFirstAndLastName() {
const names = this.registerData.name.split(' ');
this.registerData.firstName = names[0];
this.registerData.lastName = names.slice(1).join(' ');
}
existEmailOnServer(mail: string) {
return false; //TODO
}
checkIfUserEmailIsValid(emailValue: string) {
isEmailValid(emailValue: string) {
const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
if (emailRegex.test(emailValue)) {
return true;

13
src/app/services/auth.service.ts
View file

@ -60,6 +60,19 @@ export class AuthService {
}
}
async register(credentials: any): Promise<void> {
try {
await lastValueFrom(
this.apiService.request('POST', `/auth/register/`, credentials)
);
this.router.navigate(['/login']);
this.toastNotificationService.registerSuccessToast();
} catch (error: any) {
console.error('Registration failed:', error);
throw new Error(error?.error?.error);
}
}
checkAuthUser(): Observable<boolean> {
return this.apiService.request('GET', `/auth/`).pipe(
map(() => true),

4
src/app/services/error-notification.service.ts
View file

@ -37,6 +37,10 @@ export class ErrorNotificationService {
errorMessage =
'The request timed out. Please check your connection and try again later.';
break;
case 409:
errorMessage =
'The email is already in use. Please choose a different email or log in if you already have an account.';
break;
case 500:
errorMessage =
'There was a problem on the server. Please try again later or contact support if the issue persists.';

7
src/app/services/toast-notification.service.ts
View file

@ -22,6 +22,13 @@ export class ToastNotificationService {
);
}
registerSuccessToast(): void {
this.createSuccessToast(
'You have successfully registered. Please log in.',
'Registration Successful'
);
}
showSessionExpiredMessage(): void {
this.createInfoToast(
'Your session has expired, please log in again.',

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

@ -35,16 +35,16 @@
"passwordConfirm": "Passwort bestätigen",
"privacyPolicy0": "Ich akzeptiere die",
"privacyPolicy1": "Datenschutzerklärung",
"privacyPolicyError": "Sie müssen die Datenschutzbestimmungen akzeptieren!",
"errorPattern": "Bitte nur Buchstaben und Leerzeichen verwenden!",
"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!",
"errorMail3": "Diese E-Mail existiert nicht!",
"errorPassword0": "Sie müssen ein Passwort eingeben!",
"errorPassword1": "Das Passwort muss aus mindestens 6 Zeichen bestehen!",
"errorPassword2": "Die Passwörter stimmen nicht überein!"
"privacyPolicyError": "Sie müssen die Datenschutzbestimmungen akzeptieren",
"errorPattern": "Bitte nur Buchstaben und Leerzeichen verwenden",
"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",
"errorMail3": "Diese E-Mail existiert nicht",
"errorPassword0": "Sie müssen ein Passwort eingeben",
"errorPassword1": "Das Passwort muss aus mindestens 8 Zeichen bestehen",
"errorPassword2": "Die Passwörter stimmen nicht überein"
},
"loginHeader": {
"notAUser": "Kein Join Nutzer?",

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

@ -35,16 +35,16 @@
"passwordConfirm": "Confirm Password",
"privacyPolicy0": "I accept the",
"privacyPolicy1": "Privacy policy",
"privacyPolicyError": "You must accept the privacy policy!",
"errorPattern": "Please use only letters and spaces!",
"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!",
"errorMail3": "This email does not exist!",
"errorPassword0": "You must enter a password!",
"errorPassword1": "The password must consist of at least 6 characters!",
"errorPassword2": "The passwords don't match!"
"privacyPolicyError": "You must accept the privacy policy",
"errorPattern": "Please use only letters and spaces",
"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",
"errorMail3": "This email does not exist",
"errorPassword0": "You must enter a password",
"errorPassword1": "The password must consist of at least 8 characters",
"errorPassword2": "The passwords don't match"
},
"loginHeader": {
"notAUser": "Not a Join user?",