Skip to content

Commit

Permalink
finished login
Browse files Browse the repository at this point in the history
  • Loading branch information
@TomasSirotek
TomasSirotek committed Dec 17, 2023
1 parent d826d2a commit 7900b3c
Show file tree
Hide file tree
Showing 11 changed files with 348 additions and 140 deletions.
2 changes: 1 addition & 1 deletion src/UI/src/app/core/services/theme.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Injectable, signal } from '@angular/core';
providedIn: 'root',
})
export class ThemeService {
public default = 'light';
public default = 'dark';
public themeChanged = signal(this.theme);

constructor() {}
Expand Down
16 changes: 8 additions & 8 deletions src/UI/src/app/modules/auth/auth.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<div class="flex h-screen w-screen">
<div class="auth-bg hidden flex-1 items-center justify-center bg-primary-500 bg-cover lg:flex">
<div class="max-w-xl space-y-4 p-8 text-center text-white">
<img src="../assets/images/ed.svg" alt="dashboard widget" />
<h1 class="text-4xl font-bold">"Fast, Efficient and Productive"</h1>
<div class="max-w-xl space-y-4 p-16 text-center text-white">
<img src="../assets/images/ed.svg" alt="dashboard widget" class="" />
<h1 class="text-3xl font-bold">"Fast, Efficient and Productive"</h1>
</div>
</div>
<div class="flex flex-1 items-center justify-center bg-white dark:bg-night-700">
<div class="max-w-md overflow-y-auto px-4 sm:w-[500px]">
<!-- logo -->
<div class="flex items-center justify-center">
<a class="rounded text-2xl p-2">
🌐
<a class="flex items-center justify-center rounded focus:outline-none focus:ring-1 dark:text-night-400">
<b class="text-2xl font-bold dark:text-night-50">
<!-- {{ appJson.displayName }} -->
<span class="text-primary-500">Skill</span>Sphere
</b>
</a>
<b class="text-md pl-3 font-bold text-gray-700 dark:text-white">SkillSphere</b>
</div>
<!-- Route -->
<router-outlet></router-outlet>
</div>
Expand Down
148 changes: 88 additions & 60 deletions src/UI/src/app/modules/auth/pages/login/login.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,95 @@
<!-- login form -->
<form class="my-10 space-y-6" [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-center">
<h2 class="mb-1 text-3xl font-semibold text-gray-700 dark:text-white">
Hello Again <span class="text-primary-500">!</span>
</h2>
<p class="text-sm text-gray-400 dark:text-night-200">Enter your credential to access your account.</p>
</div>


<div class="space-y-3 text-left">
<div class="form__group">
<div class="relative">
<input
id="email"
[ngClass]="{ 'is__invalid-input': submitted && f['email'].errors }"
class="peer bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded rounded-md focus:ring-primary-500 focus:border-blue-500 block w-full p-2.5 dark:bg-night-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 "
placeholder=" "
formControlName="email" />
<label
for="email"
class="absolute top-2 left-1 z-10 origin-[0] -translate-y-4 scale-95 transform bg-white px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-95 peer-focus:px-2 peer-focus:text-primary-500 dark:bg-night-700 dark:text-night-200">
Email address
</label>
</div>
<div *ngIf="submitted && f['email'].errors" class="is__invalid-error">
<div *ngIf="f['email'].errors['required']">Required field</div>
<div *ngIf="f['email'].errors['email']">Email must be an email address valid</div>
</div>
<form class="my-10 space-y-10" [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-center">
<h2 class="mb-1 text-3xl font-semibold text-gray-700 dark:text-white">
Hello Again <span class="text-primary-500">!</span>
</h2>
<p class="text-sm text-gray-500 dark:text-night-200">
Enter your credential to access your account.
</p>
</div>

<div class="space-y-3 text-left">
<div class="form__group">
<div class="relative">
<input
id="email"
[ngClass]="{ 'is__invalid-input': submitted && f['email'].errors }"
class="peer bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded rounded-md focus:ring-primary-500 block w-full p-2.5 dark:bg-night-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder=" "
formControlName="email"
/>

<label
for="email"
class="absolute top-2 left-1 z-10 origin-[0] -translate-y-4 scale-95 transform bg-white px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-95 peer-focus:px-2 peer-focus:text-primary-500 dark:bg-night-700 dark:text-night-200"
>
Email address
</label>
</div>

<div class="form__group">
<div class="relative">


<input
id="password"
[ngClass]="{ 'is__invalid-input': submitted && f['email'].errors }"
class="peer bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded rounded-md focus:ring-primary-500 focus:border-blue-500 block w-full p-2.5 dark:bg-night-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 "
placeholder=" "
formControlName="password" />
<label
for="password"
class="absolute top-2 left-1 z-10 origin-[0] -translate-y-4 scale-95 transform bg-white px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-95 peer-focus:px-2 peer-focus:text-primary-500 dark:bg-night-700 dark:text-night-200">
Password
</label>
</div>

<div *ngIf="submitted && f['password'].errors" class="is__invalid-error">
<div *ngIf="f['password'].errors['required']">Required field</div>
<div *ngIf="submitted && f['email'].errors" class="is__invalid-error">
<div *ngIf="f['email'].errors['required']">Required field</div>
<div *ngIf="f['email'].errors['email']">
Email must be an email address valid
</div>
</div>
</div>


<!-- Submit Button -->
<button
class="group relative mb-10 flex w-full justify-center rounded-md border border-transparent bg-primary-500 py-2 px-4 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 hover:bg-primary-400">
Sign in
</button>

<!-- Sign-up -->
<div class="text-sm text-gray-400 dark:text-night-200">
Not a Member yet? <a routerLink="/auth/register" class="text-primary-500 hover:text-primary-400">Register</a>

<div class="">
<div class="relative">
<input
[type]="passwordTextType ? 'text' : 'password'"
id="password"
style="border-radius: 0.375rem"
[ngClass]="{ 'is__invalid-input': submitted && f['email'].errors }"
class="peer bg-gray-50 text-gray-900 text-sm rounded rounded-md focus:ring-primary-500 block w-full p-2.5 dark:bg-night-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder=" "
formControlName="password"
/>
<label
for="password"
class="absolute top-2 left-1 z-10 origin-[0] -translate-y-4 scale-95 transform bg-white px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-95 peer-focus:px-2 peer-focus:text-primary-600 dark:bg-night-700 dark:text-night-200"
>
Password
</label>
<span
class="absolute top-2 right-5 cursor-pointer text-gray-400 dark:text-night-300"
>
<ng-icon
(click)="togglePasswordTextType()"
*ngIf="!passwordTextType"
name="heroEye"
class="text-3xl text-gray-400 dark:text-gray-600"
></ng-icon>
<ng-icon
(click)="togglePasswordTextType()"
*ngIf="passwordTextType"
name="heroEyeSlash"
class="text-3xl text-gray-400 dark:text-gray-600"
></ng-icon>
</span>
</div>
<div *ngIf="submitted && f['password'].errors" class="is__invalid-error">
<div *ngIf="f['password'].errors['required']">Required field</div>
</div>
</div>
</form>

</div>

<!-- Submit Button -->
<button
class="scale-100 animate-fade-in-up opacity-100 duration-200 group relative mb-10 flex w-full justify-center rounded-md border border-transparent bg-primary-500 py-2 px-4 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 hover:bg-primary-400"
>
Sign in
</button>

<!-- Sign-up -->
<div class="text-sm text-gray-500 dark:text-night-200">
Not a Member yet?
<a
routerLink="/auth/register"
class="text-primary-500 hover:text-primary-400 font-bold"
>Register</a
>
</div>
</form>
13 changes: 13 additions & 0 deletions src/UI/src/app/modules/auth/pages/login/login.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.is__invalid-input {
border-color: #e11d48;
}

.is__invalid-error {
color: #e11d48;
@apply px-1 pt-1 text-xs;
}

.input-psw{
border-color: #d1d5db;
background: #f9fafb ;
}
13 changes: 8 additions & 5 deletions src/UI/src/app/modules/auth/pages/login/login.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { Subscription, timer } from 'rxjs';
import { AuthService } from 'src/app/core/auth/service/auth.service';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { heroEye, heroEyeSlash } from '@ng-icons/heroicons/outline';



Expand All @@ -19,10 +21,13 @@ import { ToastrService } from 'ngx-toastr';
HttpClientModule,
NgClass,
NgIf,
NgIcon
],
providers: [HttpClient],
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
styleUrls: ['./login.component.scss'],
viewProviders: [provideIcons({ heroEye,heroEyeSlash})]

})
export class LoginComponent implements OnInit, OnDestroy{
form!: FormGroup;
Expand Down Expand Up @@ -53,6 +58,7 @@ export class LoginComponent implements OnInit, OnDestroy{
}

onSubmit() {
this.submitted = true;

const { email, password } = this.form.value;

Expand All @@ -66,10 +72,7 @@ export class LoginComponent implements OnInit, OnDestroy{
this._router.navigate(['/courses']);
},
error: (err: any) => {
this.toastr.error(JSON.stringify(err));
// Handle errors here
// 4013
// display alert
this.toastr.error("Invalid credentials");
}
});

Expand Down
Loading

0 comments on commit 7900b3c

Please sign in to comment.