New Reset and Forgot password styles

src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html

@@ -0,0 +1,56 @@
+<div id="forgot-password" fxLayout="row" fxLayoutAlign="start">
+
+    <div id="forgot-password-intro" fxFlex fxHide fxShow.gt-xs>
+
+        <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
+            <img src="assets/images/logos/fuse.svg">
+        </div>
+
+        <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
+            Welcome to the FUSE!
+        </div>
+
+        <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
+            vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
+        </div>
+
+    </div>
+
+    <div id="forgot-password-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
+
+        <div id="forgot-password-form">
+
+            <div class="logo" fxHide.gt-xs>
+                <span>F</span>
+            </div>
+
+            <div class="title">RECOVER YOUR PASSWORD</div>
+            <div class="description">Sed mollis velit facilisis facilisis viverra</div>
+
+            <form name="forgoPasswordForm" [formGroup]="forgotPasswordForm" novalidate>
+
+                <md-input-container>
+                    <input mdInput placeholder="Email" formControlName="email">
+                    <md-error *ngIf="forgotPasswordFormErrors.email.required">
+                        Email is required
+                    </md-error>
+                    <md-error *ngIf="!forgotPasswordFormErrors.email.required && forgotPasswordFormErrors.email.email">
+                        Please enter a valid email address
+                    </md-error>
+                </md-input-container>
+
+                <button md-raised-button class="submit-button" color="accent"
+                        aria-label="SEND RESET LINK" [disabled]="forgotPasswordForm.invalid">
+                    SEND RESET LINK
+                </button>
+
+            </form>
+
+            <div class="login" fxLayout="row" fxLayoutAlign="center center">
+                <a class="link" [routerLink]="'/pages/auth/login-2'">Go back to login</a>
+            </div>
+
+        </div>
+    </div>
+</div>

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 {
+
+                    }
+                }
+            }
+        }
+    }
+}

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;
+            }
+        }
+    }
+}

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
+{
+
+}

src/app/main/content/pages/authentication/login-2/login-2.component.html

@@ -53,7 +53,7 @@
                         Remember Me
                     </md-checkbox>
 
-                    <a class="forgot-password" [routerLink]="'/pages/auth/forgot-password'">
+                    <a class="forgot-password" [routerLink]="'/pages/auth/forgot-password-2'">
                         Forgot Password?
                     </a>
                 </div>

src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html

@@ -0,0 +1,69 @@
+<div id="reset-password" fxLayout="row" fxLayoutAlign="start">
+
+    <div id="reset-password-intro" fxFlex fxHide fxShow.gt-xs>
+
+        <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
+            <img src="assets/images/logos/fuse.svg">
+        </div>
+
+        <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
+            Welcome to the FUSE!
+        </div>
+
+        <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
+            vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
+        </div>
+
+    </div>
+
+    <div id="reset-password-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
+
+        <div id="reset-password-form">
+
+            <div class="logo" fxHide.gt-xs>
+                <span>F</span>
+            </div>
+
+            <div class="title">RESET YOUR PASSWORD</div>
+            <div class="description">Sed mollis velit facilisis facilisis viverra</div>
+
+            <form name="resetPasswordForm" [formGroup]="resetPasswordForm" novalidate>
+
+                <md-input-container>
+                    <input mdInput placeholder="Email" formControlName="email">
+                    <md-error *ngIf="resetPasswordFormErrors.email.required">
+                        Email is required
+                    </md-error>
+                    <md-error *ngIf="!resetPasswordFormErrors.email.required && resetPasswordFormErrors.email.email">
+                        Please enter a valid email address
+                    </md-error>
+                </md-input-container>
+
+                <md-input-container>
+                    <input mdInput placeholder="Password" formControlName="password">
+                    <md-error *ngIf="resetPasswordFormErrors.password.required">
+                        Password is required
+                    </md-error>
+                </md-input-container>
+
+                <md-input-container>
+                    <input mdInput placeholder="Password (Confirm)" formControlName="passwordConfirm">
+                    <md-error *ngIf="resetPasswordFormErrors.passwordConfirm.required">
+                        Password confirmation is required
+                    </md-error>
+                </md-input-container>
+
+                <button md-raised-button class="submit-button" color="accent"
+                        aria-label="RESET MY PASSWORD" [disabled]="resetPasswordForm.invalid">
+                    RESET MY PASSWORD
+                </button>
+            </form>
+
+            <div class="login" fxLayout="row" fxLayoutAlign="center center">
+                <a class="link" [routerLink]="'/pages/auth/login-2'">Go back to login</a>
+            </div>
+
+        </div>
+    </div>
+</div>

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 {
+
+                    }
+                }
+            }
+        }
+    }
+}

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;
+            }
+        }
+    }
+}

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
+{
+
+}

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

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',