🐛 Fix username validators

navbar
Alexis Feron 4 months ago
parent b44ec6572e
commit 61a5acd811

@ -1,5 +1,5 @@
import { CommonModule, NgIf } from '@angular/common'; import { CommonModule, NgIf } from '@angular/common';
import { Component, Renderer2 } from '@angular/core'; import { Component } from '@angular/core';
import { import {
FormBuilder, FormBuilder,
FormGroup, FormGroup,
@ -28,21 +28,21 @@ export class LoginPageComponent {
private loginService: LoginService, private loginService: LoginService,
private fb: FormBuilder, private fb: FormBuilder,
private router: Router, private router: Router,
private localStorageService: LocalStorageService, private localStorageService: LocalStorageService
private renderer: Renderer2
) { ) {
this.userForm = this.fb.group({ this.userForm = this.fb.group({
login: [this.user.login, [Validators.required, Validators.minLength(3)]], login: [this.user.login, [Validators.required, Validators.minLength(3)]],
password: [ password: [
this.user.password, this.user.password,
[Validators.required, Validators.minLength(3)], [Validators.required, Validators.minLength(6)],
], ],
}); });
} }
public login() { public login() {
if (this.userForm.invalid) { if (this.userForm.invalid) {
this.errorMessage = 'Veuillez remplir tous les champs'; this.errorMessage =
'Veuillez remplir tous les champs (identifiant de 3 caractères et mot de passe de 6 caractères minimum)';
return; return;
} }

@ -10,7 +10,10 @@
<!-- Main modal --> <!-- Main modal -->
<div <div
class="fixed inset-0 z-40 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out" class="fixed inset-0 z-40 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out"
[ngClass]="{'opacity-0 pointer-events-none': !isRegisterModalOpen, 'opacity-100': isRegisterModalOpen}" [ngClass]="{
'opacity-0 pointer-events-none': !isRegisterModalOpen,
'opacity-100': isRegisterModalOpen
}"
(click)="closeRegisterModal()" (click)="closeRegisterModal()"
></div> ></div>
@ -110,6 +113,9 @@
required required
/> />
</div> </div>
<div *ngIf="errorMessage" class="text-red-500 text-sm">
{{ errorMessage }}
</div>
<button <button
(click)="register()" (click)="register()"
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
@ -120,4 +126,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>

@ -1,12 +1,16 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; import {
import { FormBuilder } from '@angular/forms'; FormBuilder,
FormGroup,
FormsModule,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { FormGroup } from '@angular/forms';
import { User } from '../../model/User'; import { User } from '../../model/User';
import { RegisterService } from '../../services/register.service';
import { LocalStorageService } from '../../services/localstorage.service'; import { LocalStorageService } from '../../services/localstorage.service';
import { CommonModule } from '@angular/common'; import { RegisterService } from '../../services/register.service';
@Component({ @Component({
selector: 'app-register-page', selector: 'app-register-page',
@ -30,7 +34,7 @@ export class RegisterPageComponent {
{ {
login: [ login: [
this.user.login, this.user.login,
[Validators.required, Validators.minLength(6)], [Validators.required, Validators.minLength(3)],
], ],
password: [ password: [
this.user.password, this.user.password,
@ -51,7 +55,8 @@ export class RegisterPageComponent {
public register() { public register() {
if (this.userForm.invalid) { if (this.userForm.invalid) {
this.errorMessage = 'Veuillez remplir tous les champs'; this.errorMessage =
'Veuillez remplir tous les champs (identifiant de 3 caractères et mot de passe de 6 caractères minimum)';
return; return;
} }
@ -75,7 +80,7 @@ export class RegisterPageComponent {
}, },
}); });
} }
openRegisterModal() { openRegisterModal() {
this.isRegisterModalOpen = true; this.isRegisterModalOpen = true;
} }

@ -29,7 +29,6 @@ export class AddPinService {
return this.autoCompleteService.getAdressCoordinates(pin.location).pipe( return this.autoCompleteService.getAdressCoordinates(pin.location).pipe(
switchMap((response: any) => { switchMap((response: any) => {
const coords: [string, string] = [response[0].lat, response[0].lon]; const coords: [string, string] = [response[0].lat, response[0].lon];
const user_id = localStorage.getItem('auth_token');
return this.http.post<any>( return this.http.post<any>(
url, url,
{ {
@ -37,7 +36,7 @@ export class AddPinService {
description: pin.description, description: pin.description,
location: coords, location: coords,
files: pin.files, files: pin.files,
user_id: user_id, user_id: '',
}, },
{ headers } { headers }
); );

Loading…
Cancel
Save