Merge pull request #6952 from coderNadir/nadir-gauzy

Improve (email, password) inputs of login and register forms

apps/gauzy/src/app/@core/auth/auth-strategy.service.ts

@@ -3,7 +3,7 @@ import { NbAuthResult, NbAuthStrategy } from '@nebular/auth';
 import { ActivatedRoute } from '@angular/router';
 import { catchError, filter, map, switchMap } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
-import { IUser, IAuthResponse } from '@gauzy/contracts';
+import { IUser, IAuthResponse, IUserLoginInput } from '@gauzy/contracts';
 import { distinctUntilChange, isNotEmpty } from '@gauzy/common-angular';
 import { NbAuthStrategyClass } from '@nebular/auth/auth.options';
 import { AuthService } from '../services/auth.service';
@@ -102,7 +102,7 @@ export class AuthStrategy extends NbAuthStrategy {
 	rememberMe(data?: any) {
 		const rememberMe = !!data.rememberMe;
 		if (rememberMe) {
-			this.cookieService.set('email', data.email);
+			this.cookieService.set('email', data.email?.trim());
 			this.cookieService.set('rememberMe', 'true');
 		} else {
 			this.cookieService.delete('rememberMe');
@@ -130,7 +130,7 @@ export class AuthStrategy extends NbAuthStrategy {
 				lastName: fullName
 					? fullName.split(' ').slice(-1).join(' ')
 					: null,
-				email,
+				email: email?.trim(),
 				tenant,
 				tags,
 			},
@@ -296,7 +296,8 @@ export class AuthStrategy extends NbAuthStrategy {
 		}
 	}
 
-	public login(loginInput): Observable<NbAuthResult> {
+	public login(loginInput: IUserLoginInput): Observable<NbAuthResult> {
+		loginInput.email = loginInput.email?.trim();
 		return this.authService.login(loginInput).pipe(
 			map((res: IAuthResponse) => {
 				let user, token, refresh_token;

apps/gauzy/src/app/@core/services/auth.service.ts

@@ -18,10 +18,7 @@ import { API_PREFIX } from '../constants/app.constants';
 
 @Injectable()
 export class AuthService {
-
-	constructor(
-		private readonly http: HttpClient
-	) { }
+	constructor(private readonly http: HttpClient) {}
 
 	isAuthenticated(): Promise<boolean> {
 		return firstValueFrom(
@@ -33,7 +30,7 @@ export class AuthService {
 		return this.http.post<Object>(`${API_PREFIX}/auth/email/verify`, body);
 	}
 
-	login(loginInput): Observable<IAuthResponse> {
+	login(loginInput: IUserLoginInput): Observable<IAuthResponse> {
 		return this.http.post<IAuthResponse>(
 			`${API_PREFIX}/auth/login`,
 			loginInput
@@ -45,9 +42,14 @@ export class AuthService {
 	 * @param input - IUserLoginInput containing email and password.
 	 * @returns Promise<IUserSigninWorkspaceResponse> representing the response from the server.
 	 */
-	signinWorkspaces(input: IUserLoginInput): Observable<IUserSigninWorkspaceResponse> {
+	signinWorkspaces(
+		input: IUserLoginInput
+	): Observable<IUserSigninWorkspaceResponse> {
 		try {
-			return this.http.post<IUserSigninWorkspaceResponse>(`${API_PREFIX}/auth/signin.workspaces`, input);
+			return this.http.post<IUserSigninWorkspaceResponse>(
+				`${API_PREFIX}/auth/signin.workspaces`,
+				input
+			);
 		} catch (error) {
 			console.log('Error while signin workspaces: %s', error?.message);
 			// Handle errors appropriately (e.g., log, throw, etc.)
@@ -89,13 +91,13 @@ export class AuthService {
 
 	hasRole(roles: RolesEnum[]): Observable<boolean> {
 		return this.http.get<boolean>(`${API_PREFIX}/auth/role`, {
-			params: toParams({ roles })
+			params: toParams({ roles }),
 		});
 	}
 
 	hasPermissions(...permissions: PermissionsEnum[]): Observable<boolean> {
 		return this.http.get<boolean>(`${API_PREFIX}/auth/permissions`, {
-			params: toParams({ permissions })
+			params: toParams({ permissions }),
 		});
 	}
 
@@ -108,7 +110,7 @@ export class AuthService {
 	refreshToken(refresh_token: string): Promise<any> {
 		return firstValueFrom(
 			this.http.post<any>(`${API_PREFIX}/auth/refresh-token`, {
-				refresh_token: refresh_token
+				refresh_token: refresh_token,
 			})
 		);
 	}

apps/gauzy/src/app/@shared/directives/index.ts

@@ -5,6 +5,7 @@ import { OutsideDirective } from './outside.directive';
 import { UnderConstructionDirective } from './under-construction.directive';
 import { ReadMoreDirective } from './read-more';
 import { TimeTrackingAuthorizedDirective } from './time-tracking-authorized-directive';
+import { NoSpaceEdgesDirective } from './no-space-edges.directive';
 
 export const DIRECTIVES = [
 	AutocompleteOffDirective,
@@ -13,5 +14,6 @@ export const DIRECTIVES = [
 	ReadMoreDirective,
 	TimeTrackingAuthorizedDirective,
 	OutsideDirective,
-	UnderConstructionDirective
+	UnderConstructionDirective,
+	NoSpaceEdgesDirective,
 ];

apps/gauzy/src/app/@shared/directives/no-space-edges.directive.ts

@@ -0,0 +1,13 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+	selector: '[noSpaceEdges]',
+})
+export class NoSpaceEdgesDirective {
+	constructor(private el: ElementRef) {}
+
+	@HostListener('input', ['$event.target.value'])
+	onInput(value: string) {
+		this.el.nativeElement.value = value.trim();
+	}
+}

apps/gauzy/src/app/@shared/regex/regex-patterns.const.ts

@@ -2,5 +2,6 @@ export const patterns = {
 	websiteUrl: /^((?:https?:\/\/)[^./]+(?:\.[^./]+)+(?:\/.*)?)$/,
 	imageUrl: /^(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))/,
 	email: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
-	host: /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/
+	host: /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/,
+	passwordNoSpaceEdges: /^(?!\s).*[^\s]$/,
 };

apps/gauzy/src/app/auth/auth.module.ts

@@ -29,6 +29,7 @@ import { NgxResetPasswordComponent } from "./reset-password/reset-password.compo
 import { NgxFaqModule } from '../@shared/faq';
 import { ConfirmEmailModule } from './confirm-email';
 import { ElectronService } from '../@core/auth/electron.service';
+import { SharedModule } from '../@shared/shared.module';
 
 @NgModule({
 	imports: [
@@ -48,10 +49,11 @@ import { ElectronService } from '../@core/auth/electron.service';
 		NbFormFieldModule,
 		NbSelectModule,
 		NbLayoutModule,
-        ThemeModule,
-        ThemeSelectorModule,
+		ThemeModule,
+		ThemeSelectorModule,
 		NgxFaqModule,
-		ConfirmEmailModule
+		ConfirmEmailModule,
+		SharedModule,
 	],
 	declarations: [
 		NgxLoginComponent,
@@ -61,8 +63,8 @@ import { ElectronService } from '../@core/auth/electron.service';
 		NgxRegisterSideSingleFeatureComponent,
 		NgxAuthComponent,
 		NgxRegisterComponent,
-		NgxResetPasswordComponent
+		NgxResetPasswordComponent,
 	],
-	providers: [ElectronService]
+	providers: [ElectronService],
 })
 export class NgxAuthModule {}

apps/gauzy/src/app/auth/login/login.component.html

@@ -71,6 +71,7 @@ <h2 id="title" class="title">{{ 'LOGIN_PAGE.TITLE' | translate }}</h2>
           [(ngModel)]="user.email"
           #email="ngModel"
           name="email"
+          noSpaceEdges
           id="input-email"
           pattern=".+@.+\..+"
           [placeholder]="'LOGIN_PAGE.PLACEHOLDERS.EMAIL' | translate"
@@ -112,6 +113,7 @@ <h2 id="title" class="title">{{ 'LOGIN_PAGE.TITLE' | translate }}</h2>
             fullWidth
             [(ngModel)]="user.password"
             #password="ngModel"
+            [pattern]="passwordNoSpaceEdges"
             name="password"
             [type]="showPassword ? 'text' : 'password'"
             id="input-password"
@@ -154,6 +156,9 @@ <h2 id="title" class="title">{{ 'LOGIN_PAGE.TITLE' | translate }}</h2>
           </a>
         </nb-form-field>
         <ng-container *ngIf="password.invalid && password.touched">
+          <p class="caption status-danger" *ngIf="password.errors?.pattern">
+            {{ 'LOGIN_PAGE.VALIDATION.PASSWORD_NO_SPACE_EDGES' | translate }}
+          </p>
           <p
             class="caption status-danger"
             *ngIf="password.errors?.required"

apps/gauzy/src/app/auth/login/login.component.ts

@@ -17,6 +17,7 @@ import { RolesEnum } from '@gauzy/contracts';
 import { environment } from './../../../environments/environment';
 import { CookieService } from 'ngx-cookie-service';
 import { ElectronService } from '../../@core/auth/electron.service';
+import { patterns } from '../../@shared/regex/regex-patterns.const';
 
 @Component({
 	selector: 'ngx-login',
@@ -30,6 +31,7 @@ export class NgxLoginComponent extends NbLoginComponent implements OnInit {
 	RolesEnum = RolesEnum;
 	isDemo: boolean = environment.DEMO;
 	showPassword = false;
+	passwordNoSpaceEdges = patterns.passwordNoSpaceEdges;
 
 	constructor(
 		private readonly cookieService: CookieService,

apps/gauzy/src/app/auth/register/register.component.html

@@ -84,6 +84,7 @@ <h1 id="title" class="title">Register</h1>
           id="input-email"
           name="email"
           pattern=".+@.+..+"
+          noSpaceEdges
           placeholder="Email address"
           fullWidth
           fieldSize="large"
@@ -112,6 +113,7 @@ <h1 id="title" class="title">Register</h1>
             [(ngModel)]="user.password"
             [type]="showPassword ? 'text' : 'password'"
             #password="ngModel"
+            [pattern]="passwordNoSpaceEdges"
             type="password"
             id="input-password"
             name="password"
@@ -148,6 +150,9 @@ <h1 id="title" class="title">Register</h1>
           </a>
         </nb-form-field>
         <ng-container *ngIf="password.invalid && password.touched">
+          <p class="caption status-danger" *ngIf="password.errors?.pattern">
+            Passwords must not begin or end with spaces.
+          </p>
           <p class="caption status-danger" *ngIf="password.errors?.required">
             Password is required!
           </p>
@@ -293,4 +298,3 @@ <h1 id="title" class="title">Register</h1>
     <ngx-register-side-features></ngx-register-side-features>
   </div>
 </section>
-

apps/gauzy/src/app/auth/register/register.component.ts

@@ -1,15 +1,14 @@
 import {  Component } from '@angular/core';
 import { NbRegisterComponent } from '@nebular/auth';
-
-
+import { patterns } from '../../@shared/regex/regex-patterns.const';
 
 @Component({
-  selector: 'ngx-register',
-  templateUrl: './register.component.html',
-  styleUrls: ['./register.component.scss'],
+	selector: 'ngx-register',
+	templateUrl: './register.component.html',
+	styleUrls: ['./register.component.scss'],
 })
 export class NgxRegisterComponent extends NbRegisterComponent {
-
-  showPassword: boolean = false;
-  showConfirmPassword: boolean = false;
+	showPassword: boolean = false;
+	showConfirmPassword: boolean = false;
+	passwordNoSpaceEdges = patterns.passwordNoSpaceEdges;
 }

apps/gauzy/src/assets/i18n/ar.json

@@ -4357,7 +4357,8 @@
 			"EMAIL_REQUIRED": "البريد الإلكتروني مطلوب!",
 			"EMAIL_REAL_REQUIRED": "يجب أن يكون البريد الإلكتروني الحقيقي!",
 			"PASSWORD_REQUIRED": "كلمة المرور مطلوبة!",
-			"PASSWORD_SHOULD_CONTAIN": "يجب أن تحتوي كلمة المرور على عدد الأحرف المسموح به من {{ minLength }} إلى {{ maxLength }}!"
+			"PASSWORD_SHOULD_CONTAIN": "يجب أن تحتوي كلمة المرور على عدد الأحرف المسموح به من {{ minLength }} إلى {{ maxLength }}!",
+			"PASSWORD_NO_SPACE_EDGES": "يجب ألا تبدأ كلمات المرور أو تنتهي بمسافات."
 		},
 		"DEMO": {
 			"TITLE": "تسجيل الدخول تلقائيًا إلى حسابات التجريبية",

apps/gauzy/src/assets/i18n/bg.json

@@ -4283,7 +4283,8 @@
 			"EMAIL_REQUIRED": "Email is required!",
 			"EMAIL_REAL_REQUIRED": "Email should be the real one!",
 			"PASSWORD_REQUIRED": "Password is required!",
-			"PASSWORD_SHOULD_CONTAIN": "Password should contain from {{ minLength }} to {{ maxLength }} characters!"
+			"PASSWORD_SHOULD_CONTAIN": "Password should contain from {{ minLength }} to {{ maxLength }} characters!",
+			"PASSWORD_NO_SPACE_EDGES": "Passwords must not begin or end with spaces."
 		},
 		"DEMO": {
 			"TITLE": "Login Automatically into Demo accounts",

apps/gauzy/src/assets/i18n/de.json

@@ -4357,7 +4357,8 @@
 			"EMAIL_REQUIRED": "E-Mail ist erforderlich!",
 			"EMAIL_REAL_REQUIRED": "Die E-Mail sollte die echte sein!",
 			"PASSWORD_REQUIRED": "Passwort wird benötigt!",
-			"PASSWORD_SHOULD_CONTAIN": "Das Passwort sollte aus {{ minLength }} bis {{ maxLength }} Zeichen bestehen!"
+			"PASSWORD_SHOULD_CONTAIN": "Das Passwort sollte aus {{ minLength }} bis {{ maxLength }} Zeichen bestehen!",
+			"PASSWORD_NO_SPACE_EDGES": "Passwörter dürfen nicht mit Leerzeichen beginnen oder enden."
 		},
 		"DEMO": {
 			"TITLE": "Automatisch in Demo-Konten einloggen",

apps/gauzy/src/assets/i18n/en.json

@@ -4367,7 +4367,8 @@
 			"EMAIL_REQUIRED": "Email is required!",
 			"EMAIL_REAL_REQUIRED": "Email should be the real one!",
 			"PASSWORD_REQUIRED": "Password is required!",
-			"PASSWORD_SHOULD_CONTAIN": "Password should contain from {{ minLength }} to {{ maxLength }} characters!"
+			"PASSWORD_SHOULD_CONTAIN": "Password should contain from {{ minLength }} to {{ maxLength }} characters!",
+			"PASSWORD_NO_SPACE_EDGES": "Passwords must not begin or end with spaces."
 		},
 		"DEMO": {
 			"TITLE": "Login Automatically into Demo accounts",

apps/gauzy/src/assets/i18n/es.json

@@ -4359,7 +4359,8 @@
 			"EMAIL_REQUIRED": "¡El correo electrónico es obligatorio!",
 			"EMAIL_REAL_REQUIRED": "¡El correo electrónico debería ser el auténtico!",
 			"PASSWORD_REQUIRED": "¡Se requiere contraseña!",
-			"PASSWORD_SHOULD_CONTAIN": "¡La contraseña debe contener de {{ minLength }} a {{ maxLength }} caracteres!"
+			"PASSWORD_SHOULD_CONTAIN": "¡La contraseña debe contener de {{ minLength }} a {{ maxLength }} caracteres!",
+			"PASSWORD_NO_SPACE_EDGES": "Las contraseñas no deben comenzar ni terminar con espacios."
 		},
 		"DEMO": {
 			"TITLE": "Iniciar sesión automáticamente en cuentas de demostración",

apps/gauzy/src/assets/i18n/fr.json

@@ -4358,7 +4358,8 @@
 			"EMAIL_REQUIRED": "L'e-mail est requis !",
 			"EMAIL_REAL_REQUIRED": "L'email devrait être le vrai !",
 			"PASSWORD_REQUIRED": "Le mot de passe est requis !",
-			"PASSWORD_SHOULD_CONTAIN": "Le mot de passe doit contenir de {{ minLength }} à {{ maxLength }} caractères!"
+			"PASSWORD_SHOULD_CONTAIN": "Le mot de passe doit contenir de {{ minLength }} à {{ maxLength }} caractères!",
+			"PASSWORD_NO_SPACE_EDGES": "Les mots de passe ne doivent ni commencer ni se terminer par des espaces."
 		},
 		"DEMO": {
 			"TITLE": "Connectez-vous automatiquement aux comptes de démonstration",

apps/gauzy/src/assets/i18n/he.json

@@ -4281,7 +4281,8 @@
 			"EMAIL_REQUIRED": "Email is required!",
 			"EMAIL_REAL_REQUIRED": "Email should be the real one!",
 			"PASSWORD_REQUIRED": "Password is required!",
-			"PASSWORD_SHOULD_CONTAIN": "Password should contain from {{ minLength }} to {{ maxLength }} characters!"
+			"PASSWORD_SHOULD_CONTAIN": "Password should contain from {{ minLength }} to {{ maxLength }} characters!",
+			"PASSWORD_NO_SPACE_EDGES": "Passwords must not begin or end with spaces."
 		},
 		"DEMO": {
 			"TITLE": "Login Automatically into Demo accounts",

apps/gauzy/src/assets/i18n/it.json

@@ -4357,7 +4357,8 @@
 			"EMAIL_REQUIRED": "L'email è richiesta!",
 			"EMAIL_REAL_REQUIRED": "L'email deve essere quella reale!",
 			"PASSWORD_REQUIRED": "Password è richiesta!",
-			"PASSWORD_SHOULD_CONTAIN": "La password deve contenere da {{ minLength }} a {{ maxLength }} caratteri!"
+			"PASSWORD_SHOULD_CONTAIN": "La password deve contenere da {{ minLength }} a {{ maxLength }} caratteri!",
+			"PASSWORD_NO_SPACE_EDGES": "Le password non devono iniziare o terminare con spazi."
 		},
 		"DEMO": {
 			"TITLE": "Accedi automaticamente agli account di prova",

apps/gauzy/src/assets/i18n/nl.json

@@ -4357,7 +4357,8 @@
 			"EMAIL_REQUIRED": "E-mail is verplicht!",
 			"EMAIL_REAL_REQUIRED": "De e-mail moet echt zijn!",
 			"PASSWORD_REQUIRED": "Wachtwoord is verplicht!",
-			"PASSWORD_SHOULD_CONTAIN": "Het wachtwoord moet bestaan uit {{ minLength }} tot {{ maxLength }} tekens!"
+			"PASSWORD_SHOULD_CONTAIN": "Het wachtwoord moet bestaan uit {{ minLength }} tot {{ maxLength }} tekens!",
+			"PASSWORD_NO_SPACE_EDGES": "Wachtwoorden mogen niet beginnen of eindigen met spaties."
 		},
 		"DEMO": {
 			"TITLE": "Automatisch inloggen op demorekeningen",

apps/gauzy/src/assets/i18n/pl.json

@@ -4357,7 +4357,8 @@
 			"EMAIL_REQUIRED": "Wymagany jest adres e-mail!",
 			"EMAIL_REAL_REQUIRED": "Email powinien być prawdziwy!",
 			"PASSWORD_REQUIRED": "Hasło jest wymagane!",
-			"PASSWORD_SHOULD_CONTAIN": "Hasło powinno zawierać od {{ minLength }} do {{ maxLength }} znaków!"
+			"PASSWORD_SHOULD_CONTAIN": "Hasło powinno zawierać od {{ minLength }} do {{ maxLength }} znaków!",
+			"PASSWORD_NO_SPACE_EDGES": "Hasła nie mogą zaczynać się ani kończyć spacjami."
 		},
 		"DEMO": {
 			"TITLE": "Logowanie automatyczne do kont demo",

apps/gauzy/src/assets/i18n/pt.json

@@ -4357,7 +4357,8 @@
 			"EMAIL_REQUIRED": "O email é obrigatório!",
 			"EMAIL_REAL_REQUIRED": "O email deve ser o verdadeiro!",
 			"PASSWORD_REQUIRED": "Senha é obrigatória!",
-			"PASSWORD_SHOULD_CONTAIN": "A senha deve conter de {{ minLength }} a {{ maxLength }} caracteres!"
+			"PASSWORD_SHOULD_CONTAIN": "A senha deve conter de {{ minLength }} a {{ maxLength }} caracteres!",
+			"PASSWORD_NO_SPACE_EDGES": "As senhas não devem começar ou terminar com espaços."
 		},
 		"DEMO": {
 			"TITLE": "Faça login automaticamente nas contas de demonstração.",

apps/gauzy/src/assets/i18n/ru.json

@@ -4282,7 +4282,8 @@
 			"EMAIL_REQUIRED": "Требуется адрес электронной почты!",
 			"EMAIL_REAL_REQUIRED": "Email должен быть реальным!",
 			"PASSWORD_REQUIRED": "Требуется пароль!",
-			"PASSWORD_SHOULD_CONTAIN": "Пароль должен содержать от {{ minLength }} до {{ maxLength }} символов!"
+			"PASSWORD_SHOULD_CONTAIN": "Пароль должен содержать от {{ minLength }} до {{ maxLength }} символов!",
+			"PASSWORD_NO_SPACE_EDGES": "Пароли не должны начинаться или заканчиваться пробелами."
 		},
 		"DEMO": {
 			"TITLE": "Автоматически входить в демо-аккаунты",

apps/gauzy/src/assets/i18n/zh.json

@@ -4357,7 +4357,8 @@
 			"EMAIL_REQUIRED": "电子邮件是必需的！",
 			"EMAIL_REAL_REQUIRED": "电子邮件应该是真实的！",
 			"PASSWORD_REQUIRED": "密码是必需的！",
-			"PASSWORD_SHOULD_CONTAIN": "密码应包含{{ minLength }}到{{ maxLength }}个字符！"
+			"PASSWORD_SHOULD_CONTAIN": "密码应包含{{ minLength }}到{{ maxLength }}个字符！",
+			"PASSWORD_NO_SPACE_EDGES": "密码不得以空格开头或结尾。"
 		},
 		"DEMO": {
 			"TITLE": "自动登录到演示账户。",