mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
Login and Register component separated
This commit is contained in:
Anish Gurung
parent
bd8eba9de1
commit
b1e895f69a
15 changed files with 2259 additions and 1104 deletions
2762
package-lock.json
generated
2762
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -42,8 +42,9 @@
|
||||||
"@angular/platform-browser-dynamic": "^15.2.10",
|
"@angular/platform-browser-dynamic": "^15.2.10",
|
||||||
"@angular/router": "^15.2.10",
|
"@angular/router": "^15.2.10",
|
||||||
"@asymmetrik/ngx-leaflet": "3.0.1",
|
"@asymmetrik/ngx-leaflet": "3.0.1",
|
||||||
"@nebular/auth": "11.0.1",
|
"@nebular/auth": "^11.0.1",
|
||||||
"@nebular/eva-icons": "11.0.1",
|
"@nebular/eva-icons": "11.0.1",
|
||||||
|
"@nebular/firebase-auth": "^13.0.0",
|
||||||
"@nebular/security": "11.0.1",
|
"@nebular/security": "11.0.1",
|
||||||
"@nebular/theme": "11.0.1",
|
"@nebular/theme": "11.0.1",
|
||||||
"@swimlane/ngx-charts": "^14.0.0",
|
"@swimlane/ngx-charts": "^14.0.0",
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,5 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { ExtraOptions, RouterModule, Routes } from '@angular/router';
|
import { ExtraOptions, RouterModule, Routes } from '@angular/router';
|
||||||
import {
|
|
||||||
NbAuthComponent,
|
|
||||||
NbLoginComponent,
|
|
||||||
NbLogoutComponent,
|
|
||||||
NbRegisterComponent,
|
|
||||||
NbRequestPasswordComponent,
|
|
||||||
NbResetPasswordComponent,
|
|
||||||
} from '@nebular/auth';
|
|
||||||
|
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -18,34 +9,7 @@ export const routes: Routes = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'auth',
|
path: 'auth',
|
||||||
component: NbAuthComponent,
|
loadChildren: () => import('./auth/auth.module').then(m => m.NgxAuthModule)
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
redirectTo: 'login', // Redirect to login by default
|
|
||||||
pathMatch: 'full',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'login',
|
|
||||||
component: NbLoginComponent,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'register',
|
|
||||||
component: NbRegisterComponent,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'logout',
|
|
||||||
component: NbLogoutComponent,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'request-password',
|
|
||||||
component: NbRequestPasswordComponent,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'reset-password',
|
|
||||||
component: NbResetPasswordComponent,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{ path: '', redirectTo: 'auth', pathMatch: 'full' },
|
{ path: '', redirectTo: 'auth', pathMatch: 'full' },
|
||||||
{ path: '**', redirectTo: 'pages' },
|
{ path: '**', redirectTo: 'pages' },
|
||||||
|
|
|
||||||
31
src/app/auth/auth-routing.module.ts
Normal file
31
src/app/auth/auth-routing.module.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
|
||||||
|
import { NbAuthComponent } from '@nebular/auth';
|
||||||
|
import { NgxLoginComponent } from './login/login.component';
|
||||||
|
import { NgxRegisterComponent } from './register/register.component';
|
||||||
|
|
||||||
|
export const routes: Routes = [
|
||||||
|
// .. here goes our components routes
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: NbAuthComponent,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'login',
|
||||||
|
component: NgxLoginComponent,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'register',
|
||||||
|
component: NgxRegisterComponent,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule],
|
||||||
|
})
|
||||||
|
export class NgxAuthRoutingModule {
|
||||||
|
}
|
||||||
38
src/app/auth/auth.module.ts
Normal file
38
src/app/auth/auth.module.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
import { NgxAuthRoutingModule } from './auth-routing.module';
|
||||||
|
import { NbAuthModule } from '@nebular/auth';
|
||||||
|
import {
|
||||||
|
NbAlertModule,
|
||||||
|
NbButtonModule,
|
||||||
|
NbCheckboxModule,
|
||||||
|
NbInputModule
|
||||||
|
} from '@nebular/theme';
|
||||||
|
import { NgxLoginComponent } from './login/login.component';
|
||||||
|
import { NgxRegisterComponent } from './register/register.component';
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
FormsModule,
|
||||||
|
RouterModule,
|
||||||
|
NbAlertModule,
|
||||||
|
NbInputModule,
|
||||||
|
NbButtonModule,
|
||||||
|
NbCheckboxModule,
|
||||||
|
NgxAuthRoutingModule,
|
||||||
|
|
||||||
|
NbAuthModule,
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
// ... here goes our new components
|
||||||
|
NgxLoginComponent,
|
||||||
|
NgxRegisterComponent
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class NgxAuthModule {
|
||||||
|
}
|
||||||
159
src/app/auth/login/login.component.html
Normal file
159
src/app/auth/login/login.component.html
Normal file
|
|
@ -0,0 +1,159 @@
|
||||||
|
<h1 id="title" class="title">Login</h1>
|
||||||
|
<p class="sub-title">Welcome to RESUME TAILOR!!!</p>
|
||||||
|
|
||||||
|
<nb-alert
|
||||||
|
*ngIf="showMessages.error && errors?.length && !submitted"
|
||||||
|
outline="danger"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<p class="alert-title"><b>Oh snap!</b></p>
|
||||||
|
<ul class="alert-message-list">
|
||||||
|
<li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
|
||||||
|
</ul>
|
||||||
|
</nb-alert>
|
||||||
|
|
||||||
|
<nb-alert
|
||||||
|
*ngIf="showMessages.success && messages?.length && !submitted"
|
||||||
|
outline="success"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<p class="alert-title"><b>Hooray!</b></p>
|
||||||
|
<ul class="alert-message-list">
|
||||||
|
<li *ngFor="let message of messages" class="alert-message">
|
||||||
|
{{ message }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nb-alert>
|
||||||
|
|
||||||
|
<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">
|
||||||
|
<div class="form-control-group">
|
||||||
|
<label class="label" for="input-email">Email address:</label>
|
||||||
|
<input
|
||||||
|
nbInput
|
||||||
|
fullWidth
|
||||||
|
[(ngModel)]="user.email"
|
||||||
|
#email="ngModel"
|
||||||
|
name="email"
|
||||||
|
id="input-email"
|
||||||
|
pattern=".+@.+\..+"
|
||||||
|
placeholder="Email address"
|
||||||
|
fieldSize="large"
|
||||||
|
autofocus
|
||||||
|
[status]="email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'"
|
||||||
|
[required]="getConfigValue('forms.validation.email.required')"
|
||||||
|
[attr.aria-invalid]="email.invalid && email.touched ? true : null"
|
||||||
|
/>
|
||||||
|
<ng-container *ngIf="email.invalid && email.touched">
|
||||||
|
<p class="caption status-danger" *ngIf="email.errors?.required">
|
||||||
|
Email is required!
|
||||||
|
</p>
|
||||||
|
<p class="caption status-danger" *ngIf="email.errors?.pattern">
|
||||||
|
Email should be the real one!
|
||||||
|
</p>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control-group">
|
||||||
|
<span class="label-with-link">
|
||||||
|
<label class="label" for="input-password">Password:</label>
|
||||||
|
<!-- <a class="forgot-password caption-2" routerLink="../request-password"
|
||||||
|
>Forgot Password?</a
|
||||||
|
> -->
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
nbInput
|
||||||
|
fullWidth
|
||||||
|
[(ngModel)]="user.password"
|
||||||
|
#password="ngModel"
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
id="input-password"
|
||||||
|
placeholder="Password"
|
||||||
|
fieldSize="large"
|
||||||
|
[status]="
|
||||||
|
password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'
|
||||||
|
"
|
||||||
|
[required]="getConfigValue('forms.validation.password.required')"
|
||||||
|
[minlength]="getConfigValue('forms.validation.password.minLength')"
|
||||||
|
[maxlength]="getConfigValue('forms.validation.password.maxLength')"
|
||||||
|
[attr.aria-invalid]="password.invalid && password.touched ? true : null"
|
||||||
|
/>
|
||||||
|
<ng-container *ngIf="password.invalid && password.touched">
|
||||||
|
<p class="caption status-danger" *ngIf="password.errors?.required">
|
||||||
|
Password is required!
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="caption status-danger"
|
||||||
|
*ngIf="password.errors?.minlength || password.errors?.maxlength"
|
||||||
|
>
|
||||||
|
Password should contain from
|
||||||
|
{{ getConfigValue("forms.validation.password.minLength") }} to
|
||||||
|
{{ getConfigValue("forms.validation.password.maxLength") }}
|
||||||
|
characters
|
||||||
|
</p>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control-group accept-group">
|
||||||
|
<nb-checkbox
|
||||||
|
name="rememberMe"
|
||||||
|
[(ngModel)]="user.rememberMe"
|
||||||
|
*ngIf="rememberMe"
|
||||||
|
>Remember me</nb-checkbox
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
nbButton
|
||||||
|
fullWidth
|
||||||
|
status="primary"
|
||||||
|
size="large"
|
||||||
|
[disabled]="submitted || !form.valid"
|
||||||
|
[class.btn-pulse]="submitted"
|
||||||
|
>
|
||||||
|
Log In
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- <section
|
||||||
|
*ngIf="socialLinks && socialLinks.length > 0"
|
||||||
|
class="links"
|
||||||
|
aria-label="Social sign in"
|
||||||
|
>
|
||||||
|
or enter with:
|
||||||
|
<div class="socials">
|
||||||
|
<ng-container *ngFor="let socialLink of socialLinks">
|
||||||
|
<a
|
||||||
|
*ngIf="socialLink.link"
|
||||||
|
[routerLink]="socialLink.link"
|
||||||
|
[attr.target]="socialLink.target"
|
||||||
|
[attr.class]="socialLink.icon"
|
||||||
|
[class.with-icon]="socialLink.icon"
|
||||||
|
>
|
||||||
|
<nb-icon
|
||||||
|
*ngIf="socialLink.icon; else title"
|
||||||
|
[icon]="socialLink.icon"
|
||||||
|
></nb-icon>
|
||||||
|
<ng-template #title>{{ socialLink.title }}</ng-template>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
*ngIf="socialLink.url"
|
||||||
|
[attr.href]="socialLink.url"
|
||||||
|
[attr.target]="socialLink.target"
|
||||||
|
[attr.class]="socialLink.icon"
|
||||||
|
[class.with-icon]="socialLink.icon"
|
||||||
|
>
|
||||||
|
<nb-icon
|
||||||
|
*ngIf="socialLink.icon; else title"
|
||||||
|
[icon]="socialLink.icon"
|
||||||
|
></nb-icon>
|
||||||
|
<ng-template #title>{{ socialLink.title }}</ng-template>
|
||||||
|
</a>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</section> -->
|
||||||
|
|
||||||
|
<section class="another-action" aria-label="Register">
|
||||||
|
Don't have an account?
|
||||||
|
<a class="text-link" routerLink="../register">Register</a>
|
||||||
|
</section>
|
||||||
9
src/app/auth/login/login.component.ts
Normal file
9
src/app/auth/login/login.component.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { NbLoginComponent } from '@nebular/auth';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-login',
|
||||||
|
templateUrl: './login.component.html',
|
||||||
|
})
|
||||||
|
export class NgxLoginComponent extends NbLoginComponent {
|
||||||
|
}
|
||||||
227
src/app/auth/register/register.component.html
Normal file
227
src/app/auth/register/register.component.html
Normal file
|
|
@ -0,0 +1,227 @@
|
||||||
|
<h1 id="title" class="title">Register</h1>
|
||||||
|
|
||||||
|
<nb-alert
|
||||||
|
*ngIf="showMessages.error && errors?.length && !submitted"
|
||||||
|
outline="danger"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<p class="alert-title"><b>Oh snap!</b></p>
|
||||||
|
<ul class="alert-message-list">
|
||||||
|
<li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
|
||||||
|
</ul>
|
||||||
|
</nb-alert>
|
||||||
|
|
||||||
|
<nb-alert
|
||||||
|
*ngIf="showMessages.success && messages?.length && !submitted"
|
||||||
|
outline="success"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<p class="alert-title"><b>Hooray!</b></p>
|
||||||
|
<ul class="alert-message-list">
|
||||||
|
<li *ngFor="let message of messages" class="alert-message">
|
||||||
|
{{ message }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nb-alert>
|
||||||
|
|
||||||
|
<form (ngSubmit)="register()" #form="ngForm" aria-labelledby="title">
|
||||||
|
<div class="form-control-group">
|
||||||
|
<label class="label" for="input-name">Full name:</label>
|
||||||
|
<input
|
||||||
|
nbInput
|
||||||
|
[(ngModel)]="user.fullName"
|
||||||
|
#fullName="ngModel"
|
||||||
|
id="input-name"
|
||||||
|
name="fullName"
|
||||||
|
placeholder="Full name"
|
||||||
|
autofocus
|
||||||
|
fullWidth
|
||||||
|
fieldSize="large"
|
||||||
|
[status]="
|
||||||
|
fullName.dirty ? (fullName.invalid ? 'danger' : 'success') : 'basic'
|
||||||
|
"
|
||||||
|
[required]="getConfigValue('forms.validation.fullName.required')"
|
||||||
|
[minlength]="getConfigValue('forms.validation.fullName.minLength')"
|
||||||
|
[maxlength]="getConfigValue('forms.validation.fullName.maxLength')"
|
||||||
|
[attr.aria-invalid]="fullName.invalid && fullName.touched ? true : null"
|
||||||
|
/>
|
||||||
|
<ng-container *ngIf="fullName.invalid && fullName.touched">
|
||||||
|
<p class="caption status-danger" *ngIf="fullName.errors?.required">
|
||||||
|
Full name is required!
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="caption status-danger"
|
||||||
|
*ngIf="fullName.errors?.minlength || fullName.errors?.maxlength"
|
||||||
|
>
|
||||||
|
Full name should contains from
|
||||||
|
{{ getConfigValue("forms.validation.fullName.minLength") }} to
|
||||||
|
{{ getConfigValue("forms.validation.fullName.maxLength") }}
|
||||||
|
characters
|
||||||
|
</p>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control-group">
|
||||||
|
<label class="label" for="input-email">Email address:</label>
|
||||||
|
<input
|
||||||
|
nbInput
|
||||||
|
[(ngModel)]="user.email"
|
||||||
|
#email="ngModel"
|
||||||
|
id="input-email"
|
||||||
|
name="email"
|
||||||
|
pattern=".+@.+..+"
|
||||||
|
placeholder="Email address"
|
||||||
|
fullWidth
|
||||||
|
fieldSize="large"
|
||||||
|
[status]="email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'"
|
||||||
|
[required]="getConfigValue('forms.validation.email.required')"
|
||||||
|
[attr.aria-invalid]="email.invalid && email.touched ? true : null"
|
||||||
|
/>
|
||||||
|
<ng-container *ngIf="email.invalid && email.touched">
|
||||||
|
<p class="caption status-danger" *ngIf="email.errors?.required">
|
||||||
|
Email is required!
|
||||||
|
</p>
|
||||||
|
<p class="caption status-danger" *ngIf="email.errors?.pattern">
|
||||||
|
Email should be the real one!
|
||||||
|
</p>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control-group">
|
||||||
|
<label class="label" for="input-password">Password:</label>
|
||||||
|
<input
|
||||||
|
nbInput
|
||||||
|
[(ngModel)]="user.password"
|
||||||
|
#password="ngModel"
|
||||||
|
type="password"
|
||||||
|
id="input-password"
|
||||||
|
name="password"
|
||||||
|
placeholder="Password"
|
||||||
|
fullWidth
|
||||||
|
fieldSize="large"
|
||||||
|
[status]="
|
||||||
|
password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'
|
||||||
|
"
|
||||||
|
[required]="getConfigValue('forms.validation.password.required')"
|
||||||
|
[minlength]="getConfigValue('forms.validation.password.minLength')"
|
||||||
|
[maxlength]="getConfigValue('forms.validation.password.maxLength')"
|
||||||
|
[attr.aria-invalid]="password.invalid && password.touched ? true : null"
|
||||||
|
/>
|
||||||
|
<ng-container *ngIf="password.invalid && password.touched">
|
||||||
|
<p class="caption status-danger" *ngIf="password.errors?.required">
|
||||||
|
Password is required!
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="caption status-danger"
|
||||||
|
*ngIf="password.errors?.minlength || password.errors?.maxlength"
|
||||||
|
>
|
||||||
|
Password should contain from
|
||||||
|
{{ getConfigValue("forms.validation.password.minLength") }} to
|
||||||
|
{{ getConfigValue("forms.validation.password.maxLength") }}
|
||||||
|
characters
|
||||||
|
</p>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control-group">
|
||||||
|
<label class="label" for="input-re-password">Confirm password:</label>
|
||||||
|
<input
|
||||||
|
nbInput
|
||||||
|
[(ngModel)]="user.confirmPassword"
|
||||||
|
#rePass="ngModel"
|
||||||
|
type="password"
|
||||||
|
id="input-re-password"
|
||||||
|
name="rePass"
|
||||||
|
placeholder="Confirm Password"
|
||||||
|
fullWidth
|
||||||
|
fieldSize="large"
|
||||||
|
[status]="
|
||||||
|
rePass.dirty
|
||||||
|
? rePass.invalid || password.value != rePass.value
|
||||||
|
? 'danger'
|
||||||
|
: 'success'
|
||||||
|
: 'basic'
|
||||||
|
"
|
||||||
|
[required]="getConfigValue('forms.validation.password.required')"
|
||||||
|
[attr.aria-invalid]="rePass.invalid && rePass.touched ? true : null"
|
||||||
|
/>
|
||||||
|
<ng-container *ngIf="rePass.invalid && rePass.touched">
|
||||||
|
<p class="caption status-danger" *ngIf="rePass.errors?.required">
|
||||||
|
Password confirmation is required!
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="caption status-danger"
|
||||||
|
*ngIf="password.value != rePass.value && !rePass.errors?.required"
|
||||||
|
>
|
||||||
|
Password does not match the confirm password.
|
||||||
|
</p>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div
|
||||||
|
class="form-control-group accept-group"
|
||||||
|
*ngIf="getConfigValue('forms.register.terms')"
|
||||||
|
>
|
||||||
|
<nb-checkbox
|
||||||
|
name="terms"
|
||||||
|
[(ngModel)]="user.terms"
|
||||||
|
[required]="getConfigValue('forms.register.terms')"
|
||||||
|
>
|
||||||
|
Agree to
|
||||||
|
<a href="#" target="_blank"><strong>Terms & Conditions</strong></a>
|
||||||
|
</nb-checkbox>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<button
|
||||||
|
nbButton
|
||||||
|
fullWidth
|
||||||
|
status="primary"
|
||||||
|
size="large"
|
||||||
|
[disabled]="submitted || !form.valid"
|
||||||
|
[class.btn-pulse]="submitted"
|
||||||
|
>
|
||||||
|
Register
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- <section
|
||||||
|
*ngIf="socialLinks && socialLinks.length > 0"
|
||||||
|
class="links"
|
||||||
|
aria-label="Social sign in"
|
||||||
|
>
|
||||||
|
or enter with:
|
||||||
|
<div class="socials">
|
||||||
|
<ng-container *ngFor="let socialLink of socialLinks">
|
||||||
|
<a
|
||||||
|
*ngIf="socialLink.link"
|
||||||
|
[routerLink]="socialLink.link"
|
||||||
|
[attr.target]="socialLink.target"
|
||||||
|
[attr.class]="socialLink.icon"
|
||||||
|
[class.with-icon]="socialLink.icon"
|
||||||
|
>
|
||||||
|
<nb-icon
|
||||||
|
*ngIf="socialLink.icon; else title"
|
||||||
|
[icon]="socialLink.icon"
|
||||||
|
></nb-icon>
|
||||||
|
<ng-template #title>{{ socialLink.title }}</ng-template>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
*ngIf="socialLink.url"
|
||||||
|
[attr.href]="socialLink.url"
|
||||||
|
[attr.target]="socialLink.target"
|
||||||
|
[attr.class]="socialLink.icon"
|
||||||
|
[class.with-icon]="socialLink.icon"
|
||||||
|
>
|
||||||
|
<nb-icon
|
||||||
|
*ngIf="socialLink.icon; else title"
|
||||||
|
[icon]="socialLink.icon"
|
||||||
|
></nb-icon>
|
||||||
|
<ng-template #title>{{ socialLink.title }}</ng-template>
|
||||||
|
</a>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</section> -->
|
||||||
|
|
||||||
|
<section class="another-action" aria-label="Sign in">
|
||||||
|
Already have an account? <a class="text-link" routerLink="../login">Log in</a>
|
||||||
|
</section>
|
||||||
9
src/app/auth/register/register.component.ts
Normal file
9
src/app/auth/register/register.component.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { NbRegisterComponent } from '@nebular/auth';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-register',
|
||||||
|
templateUrl: './register.component.html',
|
||||||
|
})
|
||||||
|
export class NgxRegisterComponent extends NbRegisterComponent {
|
||||||
|
}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<p>login works!</p>
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { AngularFireAuth } from '@angular/fire/compat/auth';
|
|
||||||
import { Router } from '@angular/router';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'ngx-login',
|
|
||||||
templateUrl: './login.component.html',
|
|
||||||
styleUrls: ['./login.component.scss']
|
|
||||||
})
|
|
||||||
export class LoginComponent {
|
|
||||||
email: string = '';
|
|
||||||
password: string = '';
|
|
||||||
errorMessage: string = '';
|
|
||||||
|
|
||||||
constructor(private afAuth: AngularFireAuth, private router: Router) {}
|
|
||||||
|
|
||||||
async login() {
|
|
||||||
try {
|
|
||||||
const userCredential = await this.afAuth.signInWithEmailAndPassword(this.email, this.password);
|
|
||||||
// If login successful, navigate to the home page or any other desired route
|
|
||||||
this.router.navigate(['/home']);
|
|
||||||
} catch (error) {
|
|
||||||
// Handle authentication errors
|
|
||||||
this.errorMessage = error.message;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -7,7 +7,6 @@ import { DashboardModule } from './dashboard/dashboard.module';
|
||||||
import { ECommerceModule } from './e-commerce/e-commerce.module';
|
import { ECommerceModule } from './e-commerce/e-commerce.module';
|
||||||
import { PagesRoutingModule } from './pages-routing.module';
|
import { PagesRoutingModule } from './pages-routing.module';
|
||||||
import { MiscellaneousModule } from './miscellaneous/miscellaneous.module';
|
import { MiscellaneousModule } from './miscellaneous/miscellaneous.module';
|
||||||
import { LoginComponent } from './login/login.component';
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
|
@ -20,7 +19,6 @@ import { LoginComponent } from './login/login.component';
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
PagesComponent,
|
PagesComponent,
|
||||||
LoginComponent,
|
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class PagesModule {
|
export class PagesModule {
|
||||||
|
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import { TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { AuthService } from './auth.service';
|
|
||||||
|
|
||||||
describe('AuthService', () => {
|
|
||||||
let service: AuthService;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
TestBed.configureTestingModule({});
|
|
||||||
service = TestBed.inject(AuthService);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should be created', () => {
|
|
||||||
expect(service).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { AngularFireAuth } from '@angular/fire/compat/auth';
|
|
||||||
import { Router } from '@angular/router';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class AuthService {
|
|
||||||
|
|
||||||
constructor(private fireauth: AngularFireAuth, private router: Router) { }
|
|
||||||
|
|
||||||
login(email: string, password: string) {
|
|
||||||
this.fireauth.signInWithEmailAndPassword(email, password).then(() => {
|
|
||||||
localStorage.setItem('token', 'true');
|
|
||||||
this.router.navigate(['/home']);
|
|
||||||
}, err => {
|
|
||||||
alert('Login Again')
|
|
||||||
this.router.navigate(['/login'])
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//register
|
|
||||||
register(email: string, password: string) {
|
|
||||||
this.fireauth.createUserWithEmailAndPassword(email, password).then(() => {
|
|
||||||
alert('Registration Successful')
|
|
||||||
this.router.navigate(['/login']);
|
|
||||||
}, err => {
|
|
||||||
alert("Error Registering")
|
|
||||||
this.router.navigate(['/register'])
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
logout() {
|
|
||||||
this.fireauth.signOut().then( () => {
|
|
||||||
localStorage.removeItem('token');
|
|
||||||
this.router.navigate(['/login']);
|
|
||||||
}, err => {
|
|
||||||
alert(err.message)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue