Skip to content

Commit

Permalink
Adding login spinner button on click and show/hide passowrd
Browse files Browse the repository at this point in the history
  • Loading branch information
@rotirk20
rotirk20 committed Oct 18, 2024
1 parent 3a529cd commit 6a4300e
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 19 deletions.
2 changes: 1 addition & 1 deletion frontend/src/app/components/navbar/navbar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
</div>

<!-- Mobile Menu -->
<div id="mobile-menu" class="sm:hidden hidden">
<div id="mobile-menu" class="sm:hidden hidden px-4">
<a routerLink="/" routerLinkActive="text-blue-500 active-route" [routerLinkActiveOptions]="{exact: true}"
class="block px-4 py-2 text-md font-medium hover:bg-gray-100 font-mountain text-black">Početna</a>
<a routerLink="/lokacije" routerLinkActive="text-blue-500 active-route"
Expand Down
60 changes: 43 additions & 17 deletions frontend/src/app/pages/login/login.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div class="font-[sans-serif]">
<div class="min-h-screen flex items-center justify-center py-6 px-4">
<div class="grid md:grid-cols-2 items-center gap-4 max-w-6xl w-full">
<div class="border border-gray-300 rounded-lg p-6 max-w-md w-full shadow-[0_2px_22px_-4px_rgba(93,96,127,0.2)] mx-auto md:mx-0">
<div
class="border border-gray-300 rounded-lg p-6 max-w-md w-full shadow-[0_2px_22px_-4px_rgba(93,96,127,0.2)] mx-auto md:mx-0">
<form [formGroup]="loginForm" (ngSubmit)="login()" class="space-y-4">
<div class="mb-8">
<h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
Expand All @@ -10,17 +11,25 @@ <h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
<div>
<label class="text-gray-800 text-sm mb-2 block">Korisničko ime</label>
<div class="relative flex items-center">
<input formControlName="username" type="text" class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600" placeholder="Enter user name" />
<svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb" class="w-[18px] h-[18px] absolute right-4" viewBox="0 0 24 24">
<input formControlName="username" type="text"
class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600"
placeholder="Unesite email" />
<svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb"
class="w-[18px] h-[18px] absolute right-4" viewBox="0 0 24 24">
<circle cx="10" cy="7" r="6" data-original="#000000"></circle>
<path d="M14 15H6a5 5 0 0 0-5 5 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 5 5 0 0 0-5-5zm8-4h-2.59l.3-.29a1 1 0 0 0-1.42-1.42l-2 2a1 1 0 0 0 0 1.42l2 2a1 1 0 0 0 0-1.42l-.3-.29H22a1 1 0 0 0 0-2z" data-original="#000000"></path>
<path
d="M14 15H6a5 5 0 0 0-5 5 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 5 5 0 0 0-5-5zm8-4h-2.59l.3-.29a1 1 0 0 0-1.42-1.42l-2 2a1 1 0 0 0 0 1.42l2 2a1 1 0 0 0 0-1.42l-.3-.29H22a1 1 0 0 0 0-2z"
data-original="#000000"></path>
</svg>
</div>
<div *ngIf="loginForm.get('username')?.touched && loginForm.get('username')?.invalid" class="text-red-500 text-sm">
<div *ngIf="loginForm.get('username')?.errors?.['username'] && loginForm.get('username')?.touched" class="text-red-600 text-sm mt-1">
<div *ngIf="loginForm.get('username')?.touched && loginForm.get('username')?.invalid"
class="text-red-500 text-sm">
<div *ngIf="loginForm.get('username')?.errors?.['username'] && loginForm.get('username')?.touched"
class="text-red-600 text-sm mt-1">
Unesite važeću email adresu.
</div>
<div *ngIf="loginForm.get('username')?.errors?.['required'] && loginForm.get('username')?.touched" class="text-red-600 text-sm mt-1">
<div *ngIf="loginForm.get('username')?.errors?.['required'] && loginForm.get('username')?.touched"
class="text-red-600 text-sm mt-1">
Korisničko ime je obavezno.
</div>
</div>
Expand All @@ -29,21 +38,30 @@ <h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
<div>
<label class="text-gray-800 text-sm mb-2 block">Lozinka</label>
<div class="relative flex items-center">
<input formControlName="password" type="password" class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600" placeholder="Enter password" />
<svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb" class="w-[18px] h-[18px] absolute right-4 cursor-pointer" viewBox="0 0 128 128">
<path d="M64 104C22.127 104 1.367 67.496.504 65.943a4 4 0 0 1 0-3.887C1.367 60.504 22.127 24 64 24s62.633 36.504 63.496 38.057a4 4 0 0 1 0 3.887C126.633 67.496 105.873 104 64 104zM8.707 63.994C13.465 71.205 32.146 96 64 96c31.955 0 50.553-24.775 55.293-31.994C114.535 56.795 95.854 32 64 32 32.045 32 13.447 56.775 8.707 63.994zM64 88c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm0-40c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16z" data-original="#000000"></path>
<input formControlName="password" [type]="passwordVisible ? 'text' : 'password'"
class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600"
placeholder="Unesite lozinku" />
<svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb"
(click)="togglePasswordVisibility()"
class="w-[18px] h-[18px] absolute right-4 cursor-pointer" viewBox="0 0 128 128">
<path
d="M64 104C22.127 104 1.367 67.496.504 65.943a4 4 0 0 1 0-3.887C1.367 60.504 22.127 24 64 24s62.633 36.504 63.496 38.057a4 4 0 0 1 0 3.887C126.633 67.496 105.873 104 64 104zM8.707 63.994C13.465 71.205 32.146 96 64 96c31.955 0 50.553-24.775 55.293-31.994C114.535 56.795 95.854 32 64 32 32.045 32 13.447 56.775 8.707 63.994zM64 88c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm0-40c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16z"
data-original="#000000"></path>
</svg>
</div>
<div *ngIf="loginForm.get('password')?.touched && loginForm.get('password')?.invalid" class="text-red-500 text-sm">
<div *ngIf="loginForm.get('password')?.touched && loginForm.get('password')?.invalid"
class="text-red-500 text-sm">
Lozinka je obavezna i mora imati najmanje 6 znakova.
</div>
</div>
<div *ngIf="errorMessage" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
<div *ngIf="errorMessage" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
role="alert">
<span class="block sm:inline">{{ errorMessage }}</span>
</div>
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center">
<input formControlName="rememberMe" id="remember-me" type="checkbox" class="h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
<input formControlName="rememberMe" id="remember-me" type="checkbox"
class="h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
<label for="remember-me" class="ml-3 block text-sm text-gray-800">
Zapamti me
</label>
Expand All @@ -57,15 +75,23 @@ <h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
</div>

<div class="!mt-8">
<button type="submit" class="w-full shadow-xl py-3 px-4 text-sm tracking-wide rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none" [disabled]="loginForm.invalid">
Prijavi se
<button type="submit"
class="w-full shadow-xl py-3 px-4 text-sm tracking-wide rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none flex items-center justify-center"
[disabled]="loading || loginForm.invalid">
<span *ngIf="loading"
class="animate-spin inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full mr-2"
role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</span>
<span>Prijava</span>
</button>
</div>
</form>
</div>
<div class="md:h-full">
<img src="../../../assets/images/prijava.jpg" class="w-full h-full object-cover rounded" alt="Dining Experience" />
<img src="../../../assets/images/prijava.jpg" class="w-full h-full object-cover rounded"
alt="Dining Experience" />
</div>
</div>
</div>
</div>
</div>
9 changes: 9 additions & 0 deletions frontend/src/app/pages/login/login.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export class LoginComponent implements OnInit {
returnUrl: string = '/';
loginForm: FormGroup;
errorMessage: string | undefined;
loading = false;
passwordVisible = false;

constructor(
private authService: AuthService,
Expand All @@ -30,11 +32,13 @@ export class LoginComponent implements OnInit {
}

login(): void {
this.loading = true;
const { username, password, rememberMe } = this.loginForm.value;
this.authService
.signIn(username, password)
.subscribe({
next: (success) => {
this.loading = false; // Stop loading when login is complete
if (success) {
// If login is successful, redirect to the returnUrl
this.returnUrl =
Expand All @@ -46,6 +50,7 @@ export class LoginComponent implements OnInit {
}
},
error: (error: HttpErrorResponse) => {
this.loading = false; // Stop loading when login is complete
// Handle HTTP error responses or other errors
if (error.status === 404) {
this.handleError('Korisnik ne postoji.');
Expand All @@ -65,6 +70,10 @@ export class LoginComponent implements OnInit {
this.errorMessage = message;
}

togglePasswordVisibility(): void {
this.passwordVisible = !this.passwordVisible;
}

ngOnInit(): void {
if (this.authService.isLoggedIn()) {
this.router.navigate(['/dashboard']);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/environments/environment.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const environment = {
production: false,
apiUrl: 'http://localhost:4000/api'
apiUrl: 'http://localhost:5500/api'
};

0 comments on commit 6a4300e

Please sign in to comment.