fix: add code rabbit suggestions

ever-co · Oct 11, 2024 · f0eb44a · f0eb44a
1 parent 8bb4076
commit f0eb44a
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 180 deletions.
diff --git a/packages/desktop-ui-lib/src/lib/directives/debounce-click.directive.ts b/packages/desktop-ui-lib/src/lib/directives/debounce-click.directive.ts
@@ -6,11 +6,11 @@ import { debounceTime } from 'rxjs/operators';
 	selector: '[debounceClick]'
 })
 export class DebounceClickDirective implements OnInit, OnDestroy {
-	private clicks = new Subject();
+	private clicks: Subject<Event> = new Subject<Event>();
 	private subscription: Subscription;
 
 	@Input() debounceTime = 300;
-	@Output() throttledClick = new EventEmitter();
+	@Output() throttledClick: EventEmitter<Event> = new EventEmitter<Event>();
 
 	/**
 	 * Handles the click event and emits it after a debounce time.
@@ -20,8 +20,6 @@ export class DebounceClickDirective implements OnInit, OnDestroy {
 	 */
 	@HostListener('click', ['$event'])
 	clickEvent(event: Event): void {
-		event.preventDefault();
-		event.stopPropagation();
 		this.clicks.next(event);
 	}
 

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
@@ -43,7 +43,7 @@ <h2 id="title" class="title">{{ 'LOGIN_PAGE.TITLE' | translate }}</h2>
 						[status]="email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'"
 						[attr.aria-invalid]="email.invalid && email.touched ? true : null"
 						autofocus
-						autocomplete-off
+						autocomplete="off"
 						[ngClass]="isCodeSent ? 'not-allowed' : ''"
 					/>
 					<nb-icon
@@ -124,7 +124,13 @@ <h2 id="title" class="title">{{ 'LOGIN_PAGE.TITLE' | translate }}</h2>
 				</a>
 				<div class="submit-inner-wrapper">
 					<ng-template [ngIf]="isCodeSent" [ngIfElse]="sendCodeButtonTemplate">
-						<button type="submit" nbButton size="tiny" class="submit-btn" [disabled]="form.invalid">
+						<button
+							type="submit"
+							nbButton
+							size="tiny"
+							class="submit-btn"
+							[disabled]="form.invalid || isLoading"
+						>
 							<span class="btn-text">
 								{{ 'BUTTONS.LOGIN' | translate }}
 							</span>
@@ -139,7 +145,7 @@ <h2 id="title" class="title">{{ 'LOGIN_PAGE.TITLE' | translate }}</h2>
 							nbButton
 							size="tiny"
 							class="submit-btn"
-							[disabled]="email.invalid"
+							[disabled]="email.invalid || isLoading"
 							(click)="sendLoginCode()"
 						>
 							<span class="btn-text">

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
@@ -1,6 +1,32 @@
 @import 'themes';
 @import '@shared/reusable';
 
+$button-color: #fa754e;
+
+@mixin submit-btn($padding: 13px 39px) {
+	padding: $padding;
+	box-shadow: 0px 19px 15px -14px rgba(0, 0, 0, 0.22);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: -0.009em;
+    text-align: left;
+    margin-bottom: 25px;
+    margin-top: 15px;
+
+	&:not([disabled]) {
+		background-color: $button-color;
+		border: 1px solid $button-color;
+		color: var(--text-alternate-color);
+		cursor: pointer;
+    }
+}
+
+@mixin hr-div-soft($margin-bottom: 12px) {
+	margin-bottom: $margin-bottom;
+}
+
 .login-container {
 	width: 765px;
 	position: relative;
@@ -88,7 +114,7 @@
 		}
 
 		& .hr-div-soft {
-			@include hr-div-soft;
+			@include hr-div-soft($margin-bottom: 16px);
 		}
 	}
 
@@ -102,7 +128,7 @@
 			}
 
 			.edit-email {
-				transition: all;
+				transition: color 0.3s ease;
 
 				&:hover {
 					color: var(--text-basic-color);
@@ -173,9 +199,7 @@
 			}
 
 			& .submit-btn {
-				@include submit-btn;
-				padding: 13px 20px;
-				font-size: 14px;
+				@include submit-btn($padding: 13px 20px);
 				display: flex;
 				justify-content: center;
 				align-items: center;
@@ -231,7 +255,6 @@
 .features-wrapper {
 	width: 260px;
 
-	// demo side container
 	& .card-body {
 		padding: 38px 15px;
 		background: nb-theme(color-primary-transparent-default);
@@ -241,21 +264,13 @@
 			background: nb-theme(color-primary-700);
 
 			& .custom-btn {
-				color: white;
-				background: #6e49e8;
-				border: 1px solid #6e49e8;
+				color: var(--text-alternate-color);
+				background: nb-theme(color-primary-600);
+				border: 1px solid nb-theme(color-primary-600);
 			}
 		}
 	}
 
-	// non-demo side container
-	& .features-card {
-		border: none;
-		background: nb-theme(color-primary-transparent-default);
-		border-radius: nb-theme(border-radius);
-		width: 100%;
-	}
-
 	& .title {
 		font-family: Inter;
 		font-size: 16px;
@@ -277,7 +292,7 @@
 		text-align: left;
 		margin-bottom: 20px;
 		padding-left: 13px;
-		color: #7e7e8f;
+		color: nb-theme(text-hint-color);
 	}
 
 	& .custom-btn {
@@ -287,9 +302,9 @@
 		padding: 13px 28px;
 		display: inline-flex;
 		justify-content: flex-start;
-		background-color: white;
+		background-color: nb-theme(background-basic-color-1);
 		color: nb-theme(color-primary-500);
-		border: 1px solid white;
+		border: 1px solid nb-theme(background-basic-color-1);
 		//styleName: Button label;
 		font-family: Inter;
 		font-size: 15px;
@@ -313,8 +328,8 @@
 		}
 
 		&:hover {
-			background-color: #fafafa;
-			border: 1px solid #fafafa;
+			background-color: nb-theme(background-basic-color-2);
+			border: 1px solid nb-theme(background-basic-color-2);
 		}
 	}
 }

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
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
-import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, UntypedFormBuilder, 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';
@@ -26,14 +26,14 @@ export class NgxLoginMagicComponent extends NbLoginComponent implements OnInit {
 	/**
 	 * FormGroup instance representing the magic login form.
 	 */
-	public form: UntypedFormGroup = NgxLoginMagicComponent.buildForm(this._fb);
+	public form: FormGroup = NgxLoginMagicComponent.buildForm(this._fb);
 	/**
 	 * Static method to build the magic login form using Angular's FormBuilder.
 	 *
 	 * @param fb - Angular FormBuilder instance.
 	 * @returns {FormGroup} - The built magic login form.
 	 */
-	static buildForm(fb: UntypedFormBuilder): UntypedFormGroup {
+	static buildForm(fb: FormBuilder): FormGroup {
 		return fb.group({
 			email: [null, Validators.compose([Validators.required, Validators.pattern(patterns.email)])],
 			code: [null, Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(6)])]
@@ -135,9 +135,11 @@ export class NgxLoginMagicComponent extends NbLoginComponent implements OnInit {
 				// Turn off loading indicator
 				finalize(() => {
 					this.isLoading = false;
+				}),
+				tap(() => {
 					this.isCodeSent = true;
+					this.form.get('email').disable();
 				}),
-				tap(() => this.form.get('email').disable()),
 				// Handle component lifecycle to avoid memory leaks
 				untilDestroyed(this)
 			)
@@ -159,23 +161,18 @@ export class NgxLoginMagicComponent extends NbLoginComponent implements OnInit {
 			return;
 		}
 
-		try {
-			// Send a request to sign in to workspaces using the authentication service
-			await firstValueFrom(
-				this._authService.sendSigninCode({ email }).pipe(
-					catchError((error) => {
-						// Handle and log errors using the error handling service
-						this._errorHandlingService.handleError(error);
-						return EMPTY;
-					}),
-					// Handle component lifecycle to avoid memory leaks
-					untilDestroyed(this)
-				)
-			); // Wait for the login request to complete
-		} catch (error) {
-			// Handle errors
-			console.error('Error while resending sign-in code:', error);
-		}
+		// Send a request to sign in to workspaces using the authentication service
+		await firstValueFrom(
+			this._authService.sendSigninCode({ email }).pipe(
+				catchError((error) => {
+					// Handle and log errors using the error handling service
+					this._errorHandlingService.handleError(error);
+					return EMPTY;
+				}),
+				// Handle component lifecycle to avoid memory leaks
+				untilDestroyed(this)
+			)
+		); // Wait for the login request to complete
 	}
 
 	/**
@@ -184,6 +181,7 @@ export class NgxLoginMagicComponent extends NbLoginComponent implements OnInit {
 	async confirmSignInCode(): Promise<void> {
 		// Check if the form is invalid
 		if (this.form.invalid) {
+			this.isLoading = false;
 			return;
 		}
 
@@ -194,6 +192,7 @@ export class NgxLoginMagicComponent extends NbLoginComponent implements OnInit {
 
 		// Check if both email and code are present
 		if (!email || !code) {
+			this.isLoading = false;
 			return;
 		}
 

diff --git a/...ages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.html b/...ages/desktop-ui-lib/src/lib/login/features/login-workspace/login-workspace.component.html
@@ -1,6 +1,6 @@
-<ng-container *ngIf="showPopup; then workspacesTemplate; else singInTemplate"> </ng-container>
+<ng-container *ngIf="showPopup; then workspacesTemplate; else signInTemplate"> </ng-container>
 
-<ng-template #singInTemplate>
+<ng-template #signInTemplate>
 	<section class="section-wrapper">
 		<div class="-wrapper">
 			<div class="svg-wrapper">
@@ -11,7 +11,7 @@ <h1 class="title">{{ 'WORKSPACES.SIGN_IN_TITLE' | translate }}</h1>
 
 			<div class="hr-div-strong"></div>
 
-			<ng-container [ngTemplateOutlet]="singInForm"></ng-container>
+			<ng-container [ngTemplateOutlet]="signInForm"></ng-container>
 
 			<div class="hr-div-soft"></div>
 
@@ -30,8 +30,8 @@ <h1 class="title">{{ 'WORKSPACES.SIGN_IN_TITLE' | translate }}</h1>
 	</section>
 </ng-template>
 
-<ng-template #singInForm>
-	<form [formGroup]="form" class="form" (ngSubmit)="onSubmit()" autocomplete-off>
+<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-" />
@@ -97,7 +97,7 @@ <h1 class="title">{{ 'WORKSPACES.SIGN_IN_TITLE' | translate }}</h1>
 			</div>
 		</div>
 		<div class="submit-btn-wrapper">
-			<button nbButton size="small" class="submit-btn" type="submit">
+			<button nbButton size="small" [disabled]="form.invalid || loading" class="submit-btn" type="submit">
 				{{ 'BUTTONS.SIGNIN' | translate }}
 				<nb-icon [ngStyle]="{ display: 'none' }" *gauzySpinnerButton="loading"></nb-icon>
 			</button>