From 2fc8b6af48882cab378ab39f297526b7c783714f Mon Sep 17 00:00:00 2001
From: Kifungo A <45813955+adkif@users.noreply.github.com>
Date: Fri, 11 Oct 2024 12:23:59 +0200
Subject: [PATCH] fix: apply code rabbit suggestions

---
 .../login-magic/login-magic.component.html    |   3 +-
 .../login-magic/login-magic.component.scss    |   4 +-
 .../login-magic/login-magic.component.ts      |  10 +-
 .../login-workspace.component.html            |   6 +-
 .../login-workspace.component.scss            |   1 +
 .../login-workspace.component.ts              |  10 +-
 .../src/lib/login/login.module.ts             |   2 +-
 .../ui/avatar/avatar.component.scss           | 317 ++++++++----------
 8 files changed, 152 insertions(+), 201 deletions(-)

diff --git a/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.html b/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.html
index 8af5440baa2..807f74de724 100644
--- a/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.html
+++ b/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.html
@@ -38,7 +38,6 @@ <h2 id="title" class="title">{{ 'LOGIN_PAGE.TITLE' | translate }}</h2>
 						nbInput
 						fullWidth
 						formControlName="email"
-						noSpaceEdges
 						[placeholder]="'LOGIN_PAGE.PLACEHOLDERS.EMAIL' | translate"
 						[status]="email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'"
 						[attr.aria-invalid]="email.invalid && email.touched ? true : null"
@@ -83,7 +82,7 @@ <h2 id="title" class="title">{{ 'LOGIN_PAGE.TITLE' | translate }}</h2>
 						[attr.aria-invalid]="code.invalid && code.touched ? true : null"
 						maxlength="6"
 						autofocus
-						autocomplete-off
+						autocomplete="off"
 					/>
 					<ng-container *ngIf="code.invalid && code.touched">
 						<p class="caption status-danger" *ngIf="code.errors?.required">
diff --git a/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.scss b/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.scss
index 036e8eee90e..a7192283a66 100644
--- a/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.scss
+++ b/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.scss
@@ -296,8 +296,8 @@ $button-color: #fa754e;
 	}
 
 	& .custom-btn {
-		-webkit-box-shadow: 3px 11px 30px -17px #3366ff;
-		box-shadow: 3px 11px 30px -17px #3366ff;
+		-webkit-box-shadow: 3px 11px 30px -17px nb-theme(color-primary-500);
+		box-shadow: 3px 11px 30px -17px nb-theme(color-primary-500);
 		width: auto;
 		padding: 13px 28px;
 		display: inline-flex;
diff --git a/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.ts b/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.ts
index ee74a809fd5..52059ce5d9f 100644
--- a/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.ts
+++ b/packages/desktop-ui-lib/src/lib/login/features/login-magic/login-magic.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { NB_AUTH_OPTIONS, NbAuthService, NbLoginComponent } from '@nebular/auth';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -59,7 +59,7 @@ export class NgxLoginMagicComponent extends NbLoginComponent implements OnInit {
 	}
 
 	constructor(
-		private readonly _fb: UntypedFormBuilder,
+		private readonly _fb: FormBuilder,
 		private readonly _activatedRoute: ActivatedRoute,
 		public readonly nbAuthService: NbAuthService,
 		public readonly cdr: ChangeDetectorRef,
@@ -179,14 +179,12 @@ export class NgxLoginMagicComponent extends NbLoginComponent implements OnInit {
 	 * Confirms the sign-in code.
 	 */
 	async confirmSignInCode(): Promise<void> {
+		this.isLoading = true;
 		// Check if the form is invalid
 		if (this.form.invalid) {
 			this.isLoading = false;
 			return;
 		}
-
-		this.isLoading = true;
-
 		// Get the email and code values from the form
 		const { email, code } = this.form.getRawValue();
 
@@ -211,6 +209,8 @@ export class NgxLoginMagicComponent extends NbLoginComponent implements OnInit {
 	 * Starts a timer for a countdown.
 	 */
 	startTimer() {
+		this.stopTimer();
+
 		this.isCodeResent = true;
 		this.countdown = 30;
 
diff --git a/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.html b/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.html
index c28f00e21ee..2360ad8cb42 100644
--- a/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.html
+++ b/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.html
@@ -32,10 +32,6 @@ <h1 class="title">{{ 'WORKSPACES.SIGN_IN_TITLE' | translate }}</h1>
 
 <ng-template #signInForm>
 	<form [formGroup]="form" class="form" (ngSubmit)="onSubmit()" autocomplete="off">
-		<div style="height: 0; overflow: hidden">
-			<input style="opacity: 0" type="email" value="" class="" />
-			<input style="opacity: 0" type="password" value="" class="d-" />
-		</div>
 		<div class="row">
 			<div class="col">
 				<div class="form-group">
@@ -71,7 +67,7 @@ <h1 class="title">{{ 'WORKSPACES.SIGN_IN_TITLE' | translate }}</h1>
 							fieldSize="large"
 							[status]="password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'"
 							[attr.aria-invalid]="password.invalid && password.touched ? true : null"
-							autocomplete="off"
+							autocomplete="current-password"
 						/>
 						<a
 							nbSuffix
diff --git a/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.scss b/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.scss
index 920b3b6e676..edc15e34f26 100644
--- a/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.scss
+++ b/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.scss
@@ -11,6 +11,7 @@
 			background: nb-theme(gauzy-card-2);
 			border-radius: nb-theme(border-radius);
 			padding: 1rem 0;
+			width: 100%;
 
 			&>* {
 				padding-left: 15px;
diff --git a/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.ts b/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.ts
index 804a6773c3b..718d52b5a27 100644
--- a/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.ts
+++ b/packages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { HttpStatus, IAuthResponse, IUser, IUserSigninWorkspaceResponse, IWorkspaceResponse } from '@gauzy/contracts';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { asyncScheduler, catchError, EMPTY, filter, tap } from 'rxjs';
@@ -38,7 +38,7 @@ export class NgxLoginWorkspaceComponent {
 
 	constructor(
 		private readonly _store: Store,
-		private readonly _fb: UntypedFormBuilder,
+		private readonly _fb: FormBuilder,
 		private readonly _authService: AuthService,
 		private readonly _errorHandlingService: ErrorHandlerService
 	) {}
@@ -55,7 +55,7 @@ export class NgxLoginWorkspaceComponent {
 		this.loading = true;
 
 		// Get the values of email and password from the form
-		const email = this.form.get('email').value;
+		const email = this.email.value;
 		const password = this.password.value;
 
 		// Send a request to sign in to workspaces using the authentication service
@@ -149,4 +149,8 @@ export class NgxLoginWorkspaceComponent {
 	public get password() {
 		return this.form.get('password');
 	}
+
+	public get email() {
+		return this.form.get('email');
+	}
 }
diff --git a/packages/desktop-ui-lib/src/lib/login/login.module.ts b/packages/desktop-ui-lib/src/lib/login/login.module.ts
index 25234036b3c..5234632249b 100644
--- a/packages/desktop-ui-lib/src/lib/login/login.module.ts
+++ b/packages/desktop-ui-lib/src/lib/login/login.module.ts
@@ -53,6 +53,6 @@ const shared = [
 		AvatarModule
 	],
 	declarations: [LogoComponent, SocialLinksComponent, WorkspaceSelectionComponent, ...shared],
-	exports: [shared]
+	exports: [...shared]
 })
 export class NgxLoginModule {}
diff --git a/packages/desktop-ui-lib/src/lib/shared/components/ui/avatar/avatar.component.scss b/packages/desktop-ui-lib/src/lib/shared/components/ui/avatar/avatar.component.scss
index a4454176125..2a73e626d26 100644
--- a/packages/desktop-ui-lib/src/lib/shared/components/ui/avatar/avatar.component.scss
+++ b/packages/desktop-ui-lib/src/lib/shared/components/ui/avatar/avatar.component.scss
@@ -1,200 +1,151 @@
 @import 'themes';
 
 @mixin avatarMixin($radius: var(--border-radius), $imageSize: 48px) {
-  .inner-wrapper {
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    border-radius: $radius;
-  }
-
-  .avatar-wrapper {
-    width: 100%;
-    border-radius: $radius;
-  }
-
-  .names-wrapper {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .link-text {
-    cursor: pointer;
-    text-decoration: none;
-    font-style: normal;
-    line-height: 15px;
-    letter-spacing: 0;
-    white-space: nowrap;
-    width: 100%;
-    text-overflow: ellipsis;
-  }
-
-  .link-text:hover {
-    text-decoration: underline;
-  }
-
-  .image-container {
-    width: $imageSize;
-    cursor: pointer;
-    border-radius: $radius;
-    display: flex;
-    position: relative;
-
-    img {
-      width: $imageSize;
-      height: $imageSize;
-      object-fit: cover;
-      border-radius: $radius !important;
-    }
-    .status-indicator {
-      position: absolute;
-      width: calc($imageSize / 2);
-      height: calc($imageSize / 2);
-      border-radius: calc($radius / 2);
-      border: 2px solid #ebebeb;
-      right: 0;
-      top: 0;
-
-      &.online {
-        background-color: #4caf50; /* Green for online */
-      }
-      &.offline {
-        background-color: #f44336; /* Red for offline */
-      }
-    }
-  }
+	.inner-wrapper {
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		border-radius: $radius;
+		gap: 4px;
+	}
+
+	.avatar-wrapper,
+	.image-container,
+	img {
+		border-radius: $radius !important;
+	}
+
+	.names-wrapper {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.link-text {
+		cursor: pointer;
+		text-decoration: none;
+		font-style: normal;
+		line-height: 15px;
+		letter-spacing: 0;
+		white-space: nowrap;
+		width: 100%;
+		text-overflow: ellipsis;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	.image-container {
+		width: $imageSize;
+		cursor: pointer;
+		display: flex;
+		position: relative;
+
+		img {
+			width: $imageSize;
+			height: $imageSize;
+			object-fit: cover;
+		}
+
+		.status-indicator {
+			position: absolute;
+			width: calc($imageSize / 2);
+			height: calc($imageSize / 2);
+			border-radius: calc($radius / 2);
+			border: 2px solid #ebebeb;
+			right: 0;
+			top: 0;
+
+			&.online {
+				background-color: #4caf50;
+				/* Green for online */
+			}
+
+			&.offline {
+				background-color: #f44336;
+				/* Red for offline */
+			}
+		}
+	}
 }
 
-:host {
-  display: block;
-
-  .link-text {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 16px;
-    cursor: pointer;
-    text-decoration: none;
-    letter-spacing: 0em;
-    color: nb-theme(gauzy-text-contact);
-  }
-
-  .caption {
-    font-size: 11px;
-    font-weight: 400;
-    line-height: 11px;
-    letter-spacing: 0em;
-    color: var(--gauzy-text-color-2);
-  }
-
-  .link-text:hover {
-    text-decoration: underline;
-  }
-
-  .image-container {
-    width: 48px;
-
-    img {
-      width: 48px;
-      height: 48px;
-    }
-
-    &.lg {
-      width: 64px;
-
-      img {
-        width: 64px;
-        height: 64px;
-      }
-    }
-
-    &.sm {
-      width: 32px;
-
-      img {
-        width: 32px;
-        height: 32px;
-      }
-    }
-  }
+@mixin avatarSizeVariant($size) {
+	.image-container {
+		width: $size;
+
+		img {
+			width: $size;
+			height: $size;
+		}
+	}
 }
 
-:host-context(.report-table) {
-  width: 100%;
+:host {
+	display: block;
+	@include avatarMixin();
+
+	.link-text {
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 16px;
+		color: nb-theme(gauzy-text-contact);
+	}
+
+	.caption {
+		font-size: 11px;
+		font-weight: 400;
+		line-height: 11px;
+		color: var(--gauzy-text-color-2);
+	}
+
+	@include avatarSizeVariant(48px);
+
+	&.lg {
+		@include avatarSizeVariant(64px);
+	}
+
+	&.sm {
+		@include avatarSizeVariant(32px);
+	}
+}
 
-  .inner-wrapper {
-    width: fit-content;
-    @include nb-ltr(padding, 3px 9px 3px 3px);
-    @include nb-rtl(padding, 3px 3px 3px 9px);
-    background-color: var(--color-primary-transparent-100);
-  }
+:host-context(.report-table),
+:host-context(.avatar-dashboard),
+:host-context(.workspace) {
+	width: 100%;
 
-  .link-text {
-    font-size: 12px;
-    font-weight: 400;
-    text-overflow: ellipsis;
-    color: var(--text-primary-color) !important;
-  }
+	.inner-wrapper {
+		width: fit-content;
+		padding: calc(var(--border-radius) / 4);
+		background-color: var(--color-primary-transparent-100);
+	}
 
-  @include avatarMixin();
+	.link-text {
+		color: var(--text-primary-color) !important;
+	}
 }
 
 :host-context(.avatar-dashboard) {
-  width: 100%;
-
-  .inner-wrapper {
-    width: 100%;
-  }
-
-  .names-wrapper {
-    width: 100%;
-  }
-
-  .link-text {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--gauzy-text-color-1) !important;
-  }
-
-  &.activity {
-    .image-container {
-      width: 28px;
-      border-radius: var(--button-rectangle-border-radius) !important;
-
-      img {
-        border-radius: var(--button-rectangle-border-radius) !important;
-        width: 28px;
-        height: 28px;
-      }
-    }
-  }
-
-  @include avatarMixin();
+	.link-text {
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--gauzy-text-color-1) !important;
+	}
+
+	&.activity {
+		@include avatarMixin($radius: var(--button-rectangle-border-radius), $imageSize: 28px);
+	}
 }
 
 :host-context(.workspace) {
-  width: 100%;
-
-  .inner-wrapper {
-    width: fit-content;
-    padding: calc(var(--border-radius) / 4);
-    background-color: var(--color-primary-transparent-100);
-    border-radius: calc(var(--border-radius) / 2) !important;
-  }
-
-  @include avatarMixin($radius: calc(var(--border-radius) / 2), $imageSize: 48px);
-
-  .image-container {
-    &,
-    img {
-      border-radius: calc(var(--border-radius) / 4) !important;
-    }
-  }
-
-  .names-wrapper {
-    a.link-text {
-      text-decoration: none;
-      cursor: none;
-    }
-  }
+	@include avatarMixin($radius: calc(var(--border-radius) / 2), $imageSize: 24px);
+
+	.names-wrapper a.link-text {
+		text-decoration: none;
+	}
+
+	.inner-wrapper {
+		max-width: 135px;
+	}
 }