mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01:00
add auth
This commit is contained in:
parent
9101cdaa87
commit
16280a1d04
8 changed files with 98 additions and 168 deletions
|
|
@ -1,35 +1,21 @@
|
||||||
import { ExtraOptions, RouterModule, Routes } from '@angular/router';
|
import { ExtraOptions, RouterModule, Routes } from '@angular/router';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import {
|
|
||||||
NbAuthComponent,
|
|
||||||
NbLoginComponent,
|
|
||||||
NbLogoutComponent,
|
|
||||||
NbRegisterComponent,
|
|
||||||
NbRequestPasswordComponent,
|
|
||||||
NbResetPasswordComponent,
|
|
||||||
} from '@nebular/auth';
|
|
||||||
import { AppComponent } from './app.component';
|
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
// {
|
{
|
||||||
// path: 'pages',
|
path: 'pages',
|
||||||
// loadChildren: () => import('./pages/pages.module')
|
loadChildren: () => import('./pages/pages.module')
|
||||||
// .then(m => m.PagesModule),
|
.then(m => m.PagesModule),
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
path: 'auth',
|
path: 'auth',
|
||||||
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
|
loadChildren: () => import('./auth/login.module').then(m => m.AuthModule),
|
||||||
},
|
},
|
||||||
// { path: '', redirectTo: 'auth', pathMatch: 'full' },
|
{ path: '', redirectTo: 'auth', pathMatch: 'full' },
|
||||||
// { path: '**', redirectTo: 'auth' },
|
{ path: '**', redirectTo: 'auth' },
|
||||||
];
|
];
|
||||||
|
|
||||||
// const config: ExtraOptions = {
|
|
||||||
// useHash: false,
|
|
||||||
// };
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
// imports: [RouterModule.forRoot(routes, config)],
|
|
||||||
imports: [RouterModule.forRoot(routes)],
|
imports: [RouterModule.forRoot(routes)],
|
||||||
exports: [RouterModule],
|
exports: [RouterModule],
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,24 @@ import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth';
|
||||||
}),
|
}),
|
||||||
CoreModule.forRoot(),
|
CoreModule.forRoot(),
|
||||||
ThemeModule.forRoot(),
|
ThemeModule.forRoot(),
|
||||||
|
|
||||||
|
CommonModule,
|
||||||
|
HttpClientModule,
|
||||||
|
NbLayoutModule,
|
||||||
|
NbCardModule,
|
||||||
|
NbButtonModule,
|
||||||
|
AppRoutingModule,
|
||||||
|
|
||||||
|
NbAuthModule.forRoot({
|
||||||
|
strategies: [
|
||||||
|
NbDummyAuthStrategy.setup({
|
||||||
|
name: 'email',
|
||||||
|
|
||||||
|
alwaysFail: true,
|
||||||
|
delay: 1000,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent],
|
bootstrap: [AppComponent],
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
/**
|
|
||||||
* @license
|
|
||||||
* Copyright Akveo. All Rights Reserved.
|
|
||||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'ngx-app',
|
|
||||||
template: `
|
|
||||||
<nb-layout>
|
|
||||||
<nb-layout-column>
|
|
||||||
<nb-card>
|
|
||||||
<nb-card-body>
|
|
||||||
<a nbButton routerLink="auth/login">Login</a>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
</nb-layout-column>
|
|
||||||
</nb-layout>
|
|
||||||
`,
|
|
||||||
})
|
|
||||||
export class AuthComponent {
|
|
||||||
}
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
|
|
||||||
/**
|
|
||||||
* @license
|
|
||||||
* Copyright Akveo. All Rights Reserved.
|
|
||||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { FormsModule } from '@angular/forms';
|
|
||||||
|
|
||||||
import { AuthRoutingModule } from './auth-routing.module';
|
|
||||||
import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth';
|
|
||||||
import { NbAlertModule, NbButtonModule, NbCheckboxModule, NbInputModule, NbLayoutModule, NbCardModule } from '@nebular/theme';
|
|
||||||
|
|
||||||
import { LoginComponent } from './login/login.component';
|
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
|
||||||
import { AppRoutingModule } from '../app-routing.module';
|
|
||||||
import { AuthComponent } from './auth.component';
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
imports: [
|
|
||||||
CommonModule,
|
|
||||||
FormsModule,
|
|
||||||
NbAlertModule,
|
|
||||||
NbInputModule,
|
|
||||||
NbButtonModule,
|
|
||||||
NbCheckboxModule,
|
|
||||||
AuthRoutingModule,
|
|
||||||
|
|
||||||
NbAuthModule,
|
|
||||||
|
|
||||||
CommonModule,
|
|
||||||
HttpClientModule,
|
|
||||||
NbLayoutModule,
|
|
||||||
NbCardModule,
|
|
||||||
NbButtonModule,
|
|
||||||
AppRoutingModule,
|
|
||||||
|
|
||||||
NbAuthModule.forRoot({
|
|
||||||
strategies: [
|
|
||||||
NbDummyAuthStrategy.setup({
|
|
||||||
name: 'email',
|
|
||||||
|
|
||||||
alwaysFail: true,
|
|
||||||
delay: 1000,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
declarations: [
|
|
||||||
LoginComponent,
|
|
||||||
AuthComponent,
|
|
||||||
],
|
|
||||||
})
|
|
||||||
export class AuthModule {
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @license
|
* @license
|
||||||
* Copyright Akveo. All Rights Reserved.
|
* Copyright Akveo. All Rights Reserved.
|
||||||
|
|
@ -9,35 +8,24 @@ import { NgModule } from '@angular/core';
|
||||||
import { RouterModule, Routes } from '@angular/router';
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
import { NbAuthComponent } from '@nebular/auth';
|
import { NbAuthComponent } from '@nebular/auth';
|
||||||
|
|
||||||
import { LoginComponent } from './login/login.component';
|
import { LoginComponent } from './login.component';
|
||||||
import { AuthComponent } from './auth.component';
|
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: AuthComponent,
|
component: NbAuthComponent,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'login',
|
path: '',
|
||||||
component: LoginComponent,
|
component: LoginComponent,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'auth',
|
path: 'pages',
|
||||||
loadChildren: () => import('./auth.module').then(m => m.AuthModule),
|
loadChildren: () => import('../pages/pages.module')
|
||||||
|
.then(m => m.PagesModule),
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// path: '',
|
|
||||||
// component: NbAuthComponent,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'login',
|
|
||||||
// component: LoginComponent,
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
@ -14,42 +14,27 @@
|
||||||
</ul>
|
</ul>
|
||||||
</nb-alert>
|
</nb-alert>
|
||||||
|
|
||||||
<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">
|
<!-- (ngSubmit)="login()" -->
|
||||||
|
<form #form="ngForm" aria-labelledby="title">
|
||||||
|
|
||||||
<div class="form-control-group">
|
<div class="form-control-group">
|
||||||
<label class="label" for="input-email">Email address:</label>
|
<label class="label" for="input-email">NIK:</label>
|
||||||
<input nbInput
|
<input nbInput fullWidth [(ngModel)]="user.email" #email="ngModel" name="nik" id="input-nik" placeholder="NIK"
|
||||||
fullWidth
|
autofocus>
|
||||||
[(ngModel)]="user.email"
|
|
||||||
#email="ngModel"
|
|
||||||
name="email"
|
|
||||||
id="input-email"
|
|
||||||
pattern=".+@.+\..+"
|
|
||||||
placeholder="Email address"
|
|
||||||
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">
|
<ng-container *ngIf="email.invalid && email.touched">
|
||||||
<p class="caption status-danger" *ngIf="email.errors?.required">
|
<p class="caption status-danger" *ngIf="email.errors?.required">
|
||||||
Email is required!
|
NIK is required!
|
||||||
</p>
|
|
||||||
<p class="caption status-danger" *ngIf="email.errors?.pattern">
|
|
||||||
Email should be the real one!
|
|
||||||
</p>
|
</p>
|
||||||
|
<!-- <p class="caption status-danger" *ngIf="email.errors?.pattern">
|
||||||
|
NIK should be the real one!
|
||||||
|
</p> -->
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-control-group">
|
<div class="form-control-group">
|
||||||
<label class="label" for="input-password">Password:</label>
|
<label class="label" for="input-password">Password:</label>
|
||||||
<input nbInput
|
<input nbInput fullWidth [(ngModel)]="user.password" #password="ngModel" name="password" type="password"
|
||||||
fullWidth
|
id="input-password" placeholder="Password"
|
||||||
[(ngModel)]="user.password"
|
|
||||||
#password="ngModel"
|
|
||||||
name="password"
|
|
||||||
type="password"
|
|
||||||
id="input-password"
|
|
||||||
placeholder="Password"
|
|
||||||
[status]="password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'"
|
[status]="password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'"
|
||||||
[required]="getConfigValue('forms.validation.password.required')"
|
[required]="getConfigValue('forms.validation.password.required')"
|
||||||
[minlength]="getConfigValue('forms.validation.password.minLength')"
|
[minlength]="getConfigValue('forms.validation.password.minLength')"
|
||||||
|
|
@ -68,26 +53,24 @@
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-control-group accept-group">
|
<!-- <div class="form-control-group accept-group">
|
||||||
<nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" *ngIf="rememberMe">Remember me</nb-checkbox>
|
<nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" *ngIf="rememberMe">Remember me</nb-checkbox>
|
||||||
<a class="forgot-password" routerLink="../request-password">Forgot Password?</a>
|
<a class="forgot-password" routerLink="../request-password">Forgot Password?</a>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
<button nbButton
|
|
||||||
fullWidth
|
|
||||||
status="success"
|
|
||||||
[disabled]="submitted || !form.valid"
|
|
||||||
[class.btn-pulse]="submitted">
|
|
||||||
Sign In
|
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<section *ngIf="socialLinks && socialLinks.length > 0" class="links" aria-label="Social sign in">
|
<button nbButton fullWidth routerLink="pages" status="success" [disabled]="submitted || !form.valid"
|
||||||
|
[class.btn-pulse]="submitted">
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- <section *ngIf="socialLinks && socialLinks.length > 0" class="links" aria-label="Social sign in">
|
||||||
Or connect with:
|
Or connect with:
|
||||||
<div class="socials">
|
<div class="socials">
|
||||||
<ng-container *ngFor="let socialLink of socialLinks">
|
<ng-container *ngFor="let socialLink of socialLinks">
|
||||||
<a *ngIf="socialLink.link"
|
<a *ngIf="socialLink.link"
|
||||||
[routerLink]="socialLink.link"
|
|
||||||
[attr.target]="socialLink.target"
|
[attr.target]="socialLink.target"
|
||||||
[attr.class]="socialLink.icon"
|
[attr.class]="socialLink.icon"
|
||||||
[class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
|
[class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
|
||||||
|
|
@ -102,4 +85,4 @@
|
||||||
|
|
||||||
<section class="another-action" aria-label="Register">
|
<section class="another-action" aria-label="Register">
|
||||||
Don't have an account? <a class="text-link" routerLink="../register">Sign Up</a>
|
Don't have an account? <a class="text-link" routerLink="../register">Sign Up</a>
|
||||||
</section>
|
</section> -->
|
||||||
|
|
@ -12,4 +12,5 @@ import { NbLoginComponent } from '@nebular/auth';
|
||||||
templateUrl: './login.component.html',
|
templateUrl: './login.component.html',
|
||||||
})
|
})
|
||||||
export class LoginComponent extends NbLoginComponent {
|
export class LoginComponent extends NbLoginComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
35
src/app/auth/login.module.ts
Normal file
35
src/app/auth/login.module.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright Akveo. All Rights Reserved.
|
||||||
|
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
|
||||||
|
import { NbAuthModule } from '@nebular/auth';
|
||||||
|
import { NbAlertModule, NbButtonModule, NbCheckboxModule, NbInputModule } from '@nebular/theme';
|
||||||
|
|
||||||
|
import { LoginComponent } from './login.component';
|
||||||
|
import { AuthRoutingModule } from './login-routing.module';
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
FormsModule,
|
||||||
|
NbAlertModule,
|
||||||
|
NbInputModule,
|
||||||
|
NbButtonModule,
|
||||||
|
NbCheckboxModule,
|
||||||
|
AuthRoutingModule,
|
||||||
|
|
||||||
|
NbAuthModule,
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
LoginComponent,
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class AuthModule {
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue