import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core'; import { HttpErrorResponse } from '@angular/common/http'; import { FormBuilder, Validators } from '@angular/forms'; import { TranslateService } from '@ngx-translate/core'; import { Router } from '@angular/router'; import { EMAIL_ALREADY_USED_TYPE, LOGIN_ALREADY_USED_TYPE } from 'app/config/error.constants'; import { RegisterService } from './register.service'; @Component({ selector: 'jhi-register', templateUrl: './register.component.html', styleUrls: ['./register.component.scss'], }) export class RegisterComponent implements AfterViewInit { // @ViewChild('name', { static: false }) // name?: ElementRef; profileIcon: number = 1; profileIcons: any[] = [ { name: 'C1', class: 'active' }, { name: 'C2' }, { name: 'C3' }, { name: 'C4' }, { name: 'C5' }, { name: 'C6' }, { name: 'C7' }, { name: 'C8' }, { name: 'C9' }, { name: 'C10' }, { name: 'C11' }, { name: 'C12' }, { name: 'C13' }, { name: 'C14' }, { name: 'C15' }, { name: 'C16' }, { name: 'C17' }, { name: 'C18' }, { name: 'C19' }, { name: 'C20' }, { name: 'C21' }, { name: 'C22' }, { name: 'C23' }, { name: 'C24' }, { name: 'C25' }, { name: 'C26' }, { name: 'C27' }, { name: 'C28' }, ]; doNotMatch = false; error = false; errorEmailExists = false; errorUserExists = false; success = false; // Login will be used to store the email as well. // login: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]] registerForm = this.fb.group({ name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(254)]], email: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]], password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(50)]], confirmPassword: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(50)]], }); constructor(private translateService: TranslateService, private registerService: RegisterService, private fb: FormBuilder) {} ngAfterViewInit(): void { // if (this.name) { // this.name.nativeElement.focus(); // } } register(): void { this.doNotMatch = false; this.error = false; this.errorEmailExists = false; this.errorUserExists = false; const password = this.registerForm.get(['password'])!.value; if (password !== this.registerForm.get(['confirmPassword'])!.value) { this.doNotMatch = true; } else { const login = this.registerForm.get(['email'])!.value; const email = this.registerForm.get(['email'])!.value; const name = this.registerForm.get(['name'])!.value; this.registerService .save({ login, email, password, langKey: this.translateService.currentLang, name, profileIcon: this.profileIcon, isAdmin: 0, isGoogle: 0, }) .subscribe( () => (this.success = true), response => this.processError(response) ); } } processError(response: HttpErrorResponse): void { if (response.status === 400 && response.error.type === LOGIN_ALREADY_USED_TYPE) { this.errorUserExists = true; } else if (response.status === 400 && response.error.type === EMAIL_ALREADY_USED_TYPE) { this.errorEmailExists = true; } else { this.error = true; } } selectIcon(event: MouseEvent): void { if (event.target instanceof Element) { document.querySelectorAll('.active').forEach(e => e.classList.remove('active')); event.target.classList.add('active'); this.profileIcon = +event.target.getAttribute('id')! + 1; } } }