diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html new file mode 100644 index 00000000..9ba20cc7 --- /dev/null +++ b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html @@ -0,0 +1,56 @@ +
+ +
+ + + +
+ Welcome to the FUSE! +
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, + vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra. +
+ +
+ +
+ +
+ + + +
RECOVER YOUR PASSWORD
+
Sed mollis velit facilisis facilisis viverra
+ +
+ + + + + Email is required + + + Please enter a valid email address + + + + + +
+ + + +
+
+
\ No newline at end of file diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss new file mode 100644 index 00000000..f70b4dbc --- /dev/null +++ b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss @@ -0,0 +1,124 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #forgot-password { + width: 100%; + overflow: hidden; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #forgot-password-intro { + padding: 128px; + + @include media-breakpoint('sm') { + padding: 128px 64px; + } + + .logo { + width: 128px; + margin-bottom: 32px; + } + + .title { + font-size: 42px; + font-weight: 300; + line-height: 1; + } + + .description { + padding-top: 8px; + font-size: 14px; + max-width: 600px; + } + } + + #forgot-password-form-wrapper { + width: 400px; + min-width: 400px; + max-width: 400px; + height: 100%; + background: #FFFFFF; + @include mat-elevation(7); + + @include media-breakpoint('sm') { + width: 360px; + min-width: 360px; + max-width: 360px; + } + + @include media-breakpoint('xs') { + width: 100%; + min-width: 100%; + max-width: 100%; + } + + #forgot-password-form { + padding: 128px 48px 48px 48px; + + @include media-breakpoint('xs') { + text-align: center; + padding: 24px; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + text-align: center; + margin: 32px auto; + color: #FFFFFF; + border-radius: 2px; + background: mat-color($accent); + } + + .title { + font-size: 21px; + } + + .description { + padding-top: 8px; + } + + form { + width: 100%; + padding-top: 32px; + + md-input-container { + width: 100%; + + @include media-breakpoint('xs') { + width: 80%; + } + } + + .submit-button { + width: 100%; + margin: 16px auto; + display: block; + + @include media-breakpoint('xs') { + width: 80%; + } + } + } + + .login { + margin: 32px auto 24px auto; + width: 250px; + font-weight: 500; + + .text { + margin-right: 8px; + } + + .link { + + } + } + } + } + } +} diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts new file mode 100644 index 00000000..611dcb0d --- /dev/null +++ b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts @@ -0,0 +1,68 @@ +import { Component, OnInit } from '@angular/core'; + +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FuseConfigService } from '../../../../../core/services/config.service'; +import { fuseAnimations } from '../../../../../core/animations'; + +@Component({ + selector : 'fuse-forgot-password-2', + templateUrl: './forgot-password-2.component.html', + styleUrls : ['./forgot-password-2.component.scss'], + animations : fuseAnimations +}) +export class FuseForgotPassword2Component implements OnInit +{ + forgotPasswordForm: FormGroup; + forgotPasswordFormErrors: any; + + constructor( + private fuseConfig: FuseConfigService, + private formBuilder: FormBuilder + ) + { + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } + }); + + this.forgotPasswordFormErrors = { + email: {} + }; + } + + ngOnInit() + { + this.forgotPasswordForm = this.formBuilder.group({ + email: ['', [Validators.required, Validators.email]] + }); + + this.forgotPasswordForm.valueChanges.subscribe(() => { + this.onForgotPasswordFormValuesChanged(); + }); + } + + onForgotPasswordFormValuesChanged() + { + for ( const field in this.forgotPasswordFormErrors ) + { + if ( !this.forgotPasswordFormErrors.hasOwnProperty(field) ) + { + continue; + } + + // Clear previous errors + this.forgotPasswordFormErrors[field] = {}; + + // Get the control + const control = this.forgotPasswordFormErrors.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.forgotPasswordFormErrors[field] = control.errors; + } + } + } +} diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts new file mode 100644 index 00000000..f072c7c4 --- /dev/null +++ b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../../../../core/modules/shared.module'; +import { RouterModule } from '@angular/router'; + +import { FuseForgotPassword2Component } from './forgot-password-2.component'; + +const routes = [ + { + path : 'pages/auth/forgot-password-2', + component: FuseForgotPassword2Component + } +]; + +@NgModule({ + declarations: [ + FuseForgotPassword2Component + ], + imports : [ + SharedModule, + RouterModule.forChild(routes) + ] +}) + +export class ForgotPassword2Module +{ + +} diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.html b/src/app/main/content/pages/authentication/login-2/login-2.component.html index eb52f550..683164e3 100644 --- a/src/app/main/content/pages/authentication/login-2/login-2.component.html +++ b/src/app/main/content/pages/authentication/login-2/login-2.component.html @@ -53,7 +53,7 @@ Remember Me - + Forgot Password? diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html new file mode 100644 index 00000000..7ba4e690 --- /dev/null +++ b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html @@ -0,0 +1,69 @@ +
+ +
+ + + +
+ Welcome to the FUSE! +
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, + vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra. +
+ +
+ +
+ +
+ + + +
RESET YOUR PASSWORD
+
Sed mollis velit facilisis facilisis viverra
+ +
+ + + + + Email is required + + + Please enter a valid email address + + + + + + + Password is required + + + + + + + Password confirmation is required + + + + +
+ + + +
+
+
\ No newline at end of file diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss new file mode 100644 index 00000000..b720ab12 --- /dev/null +++ b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss @@ -0,0 +1,124 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #reset-password { + width: 100%; + overflow: hidden; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #reset-password-intro { + padding: 128px; + + @include media-breakpoint('sm') { + padding: 128px 64px; + } + + .logo { + width: 128px; + margin-bottom: 32px; + } + + .title { + font-size: 42px; + font-weight: 300; + line-height: 1; + } + + .description { + padding-top: 8px; + font-size: 14px; + max-width: 600px; + } + } + + #reset-password-form-wrapper { + width: 400px; + min-width: 400px; + max-width: 400px; + height: 100%; + background: #FFFFFF; + @include mat-elevation(7); + + @include media-breakpoint('sm') { + width: 360px; + min-width: 360px; + max-width: 360px; + } + + @include media-breakpoint('xs') { + width: 100%; + min-width: 100%; + max-width: 100%; + } + + #reset-password-form { + padding: 128px 48px 48px 48px; + + @include media-breakpoint('xs') { + text-align: center; + padding: 24px; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + text-align: center; + margin: 32px auto; + color: #FFFFFF; + border-radius: 2px; + background: mat-color($accent); + } + + .title { + font-size: 21px; + } + + .description { + padding-top: 8px; + } + + form { + width: 100%; + padding-top: 32px; + + md-input-container { + width: 100%; + + @include media-breakpoint('xs') { + width: 80%; + } + } + + .submit-button { + width: 100%; + margin: 16px auto; + display: block; + + @include media-breakpoint('xs') { + width: 80%; + } + } + } + + .login { + margin: 32px auto 24px auto; + width: 250px; + font-weight: 500; + + .text { + margin-right: 8px; + } + + .link { + + } + } + } + } + } +} diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts new file mode 100644 index 00000000..9a9b8a62 --- /dev/null +++ b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts @@ -0,0 +1,72 @@ +import { Component, OnInit } from '@angular/core'; + +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FuseConfigService } from '../../../../../core/services/config.service'; +import { fuseAnimations } from '../../../../../core/animations'; + +@Component({ + selector : 'fuse-reset-password-2', + templateUrl: './reset-password-2.component.html', + styleUrls : ['./reset-password-2.component.scss'], + animations : fuseAnimations +}) +export class FuseResetPassword2Component implements OnInit +{ + resetPasswordForm: FormGroup; + resetPasswordFormErrors: any; + + constructor( + private fuseConfig: FuseConfigService, + private formBuilder: FormBuilder + ) + { + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } + }); + + this.resetPasswordFormErrors = { + email : {}, + password : {}, + passwordConfirm: {} + }; + } + + ngOnInit() + { + this.resetPasswordForm = this.formBuilder.group({ + email : ['', [Validators.required, Validators.email]], + password : ['', Validators.required], + passwordConfirm: ['', Validators.required] + }); + + this.resetPasswordForm.valueChanges.subscribe(() => { + this.onResetPasswordFormValuesChanged(); + }); + } + + onResetPasswordFormValuesChanged() + { + for ( const field in this.resetPasswordFormErrors ) + { + if ( this.resetPasswordFormErrors.hasOwnProperty(field) ) + { + continue; + } + + // Clear previous errors + this.resetPasswordFormErrors[field] = {}; + + // Get the control + const control = this.resetPasswordForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.resetPasswordFormErrors[field] = control.errors; + } + } + } +} diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts new file mode 100644 index 00000000..4d7149d0 --- /dev/null +++ b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../../../../core/modules/shared.module'; +import { RouterModule } from '@angular/router'; + +import { FuseResetPassword2Component } from './reset-password-2.component'; + +const routes = [ + { + path : 'pages/auth/reset-password-2', + component: FuseResetPassword2Component + } +]; + +@NgModule({ + declarations: [ + FuseResetPassword2Component + ], + imports : [ + SharedModule, + RouterModule.forChild(routes) + ] +}) + +export class ResetPassword2Module +{ + +} diff --git a/src/app/main/content/pages/pages.module.ts b/src/app/main/content/pages/pages.module.ts index 7aa38974..1c852e36 100644 --- a/src/app/main/content/pages/pages.module.ts +++ b/src/app/main/content/pages/pages.module.ts @@ -5,8 +5,10 @@ import { Login2Module } from './authentication/login-2/login-2.module'; import { RegisterModule } from './authentication/register/register.module'; import { Register2Module } from './authentication/register-2/register-2.module'; import { ForgotPasswordModule } from './authentication/forgot-password/forgot-password.module'; +import { ForgotPassword2Module } from './authentication/forgot-password-2/forgot-password-2.module'; import { LockModule } from './authentication/lock/lock.module'; import { ResetPasswordModule } from './authentication/reset-password/reset-password.module'; +import { ResetPassword2Module } from './authentication/reset-password-2/reset-password-2.module'; import { ComingSoonModule } from './coming-soon/coming-soon.module'; import { Error404Module } from './errors/404/error-404.module'; import { Error500Module } from './errors/500/error-500.module'; @@ -24,7 +26,9 @@ import { SearchModule } from './search/search.module'; RegisterModule, Register2Module, ForgotPasswordModule, + ForgotPassword2Module, ResetPasswordModule, + ResetPassword2Module, LockModule, // Coming-soon diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts index 8b22de2d..43ca80fc 100644 --- a/src/app/navigation.model.ts +++ b/src/app/navigation.model.ts @@ -116,11 +116,21 @@ export class NavigationModel 'type' : 'item', 'url' : '/pages/auth/forgot-password' }, + { + 'title': 'Forgot Password 2', + 'type' : 'item', + 'url' : '/pages/auth/forgot-password-2' + }, { 'title': 'Reset Password', 'type' : 'item', 'url' : '/pages/auth/reset-password' }, + { + 'title': 'Reset Password 2', + 'type' : 'item', + 'url' : '/pages/auth/reset-password-2' + }, { 'title': 'Lock Screen', 'type' : 'item',