purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

New Reset and Forgot password styles

Browse Source
This commit is contained in:
Sercan Yemen 2017-10-09 14:17:27 +03:00
parent 533f5f3f3f
commit 55e1d8b2bc
11 changed files with 582 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html Normal file
View File

@ -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>

124
src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss Normal file
View File

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

68
src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts Normal file
View File

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

27
src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts Normal file
View File

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

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

@ -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>

69
src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html Normal file
View File

@ -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>

124
src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss Normal file
View File

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

72
src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts Normal file
View File

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

27
src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts Normal file
View File

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

4
src/app/main/content/pages/pages.module.ts
View File

@ -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

10
src/app/navigation.model.ts
View File

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