From cdbae74d6c2dfa9055dacd0fa1d8b403212894d8 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Fri, 28 Jul 2017 16:03:32 +0300 Subject: [PATCH] pages + typography + some scss tweaks --- package-lock.json | 5 + package.json | 1 + .../countdown/countdown.component.html | 39 +++ .../countdown/countdown.component.scss | 29 ++ .../countdown/countdown.component.ts | 53 ++++ .../layout/navbar/navbar.component.html | 1 + .../layout/navbar/navbar.component.scss | 22 +- .../layout/navbar/navbar.component.ts | 32 +-- .../components/navigation/navigation.model.ts | 10 +- src/app/core/modules/shared.module.ts | 7 +- src/app/core/scss/core.scss | 1 + src/app/core/scss/fuse.scss | 2 +- src/app/core/scss/partials/_global.scss | 22 -- src/app/core/scss/partials/_reset.scss | 74 ++++++ src/app/core/scss/partials/_typography.scss | 247 +++++++++++++++++- .../{_theme-variables.scss => _theme.scss} | 0 src/app/core/services/layout.service.ts | 2 + .../forgot-password.component.html | 39 +++ .../forgot-password.component.scss | 79 ++++++ .../forgot-password.component.ts | 64 +++++ .../authentication/lock/lock.component.html | 48 ++++ .../authentication/lock/lock.component.scss | 77 ++++++ .../authentication/lock/lock.component.ts | 66 +++++ .../login-2/login-2.component.html | 11 +- .../login-2/login-2.component.ts | 20 +- .../authentication/login/login.component.html | 6 +- .../authentication/login/login.component.ts | 20 +- .../register-2/register-2.component.html | 82 ++++++ .../register-2/register-2.component.scss | 195 ++++++++++++++ .../register-2/register-2.component.ts | 67 +++++ .../register/register.component.html | 4 +- .../register/register.component.ts | 20 +- .../reset-password.component.html | 53 ++++ .../reset-password.component.scss | 79 ++++++ .../reset-password.component.ts | 68 +++++ .../coming-soon/coming-soon.component.html | 49 ++++ .../coming-soon/coming-soon.component.scss | 95 +++++++ .../coming-soon/coming-soon.component.ts | 61 +++++ .../pages/errors/404/error-404.component.html | 18 ++ .../pages/errors/404/error-404.component.scss | 46 ++++ .../pages/errors/404/error-404.component.ts | 24 ++ .../pages/errors/500/error-500.component.html | 17 ++ .../pages/errors/500/error-500.component.scss | 39 +++ .../pages/errors/500/error-500.component.ts | 24 ++ src/app/main/pages/pages.module.ts | 56 +++- src/index.html | 5 +- 46 files changed, 1876 insertions(+), 103 deletions(-) create mode 100644 src/app/core/components/countdown/countdown.component.html create mode 100644 src/app/core/components/countdown/countdown.component.scss create mode 100644 src/app/core/components/countdown/countdown.component.ts create mode 100644 src/app/core/scss/partials/_reset.scss rename src/app/core/scss/variables/{_theme-variables.scss => _theme.scss} (100%) create mode 100644 src/app/main/pages/authentication/forgot-password/forgot-password.component.html create mode 100644 src/app/main/pages/authentication/forgot-password/forgot-password.component.scss create mode 100644 src/app/main/pages/authentication/forgot-password/forgot-password.component.ts create mode 100644 src/app/main/pages/authentication/lock/lock.component.html create mode 100644 src/app/main/pages/authentication/lock/lock.component.scss create mode 100644 src/app/main/pages/authentication/lock/lock.component.ts create mode 100644 src/app/main/pages/authentication/register-2/register-2.component.html create mode 100644 src/app/main/pages/authentication/register-2/register-2.component.scss create mode 100644 src/app/main/pages/authentication/register-2/register-2.component.ts create mode 100644 src/app/main/pages/authentication/reset-password/reset-password.component.html create mode 100644 src/app/main/pages/authentication/reset-password/reset-password.component.scss create mode 100644 src/app/main/pages/authentication/reset-password/reset-password.component.ts create mode 100644 src/app/main/pages/coming-soon/coming-soon.component.html create mode 100644 src/app/main/pages/coming-soon/coming-soon.component.scss create mode 100644 src/app/main/pages/coming-soon/coming-soon.component.ts create mode 100644 src/app/main/pages/errors/404/error-404.component.html create mode 100644 src/app/main/pages/errors/404/error-404.component.scss create mode 100644 src/app/main/pages/errors/404/error-404.component.ts create mode 100644 src/app/main/pages/errors/500/error-500.component.html create mode 100644 src/app/main/pages/errors/500/error-500.component.scss create mode 100644 src/app/main/pages/errors/500/error-500.component.ts diff --git a/package-lock.json b/package-lock.json index 19f0df55..4fa50c1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5728,6 +5728,11 @@ "minimist": "0.0.8" } }, + "moment": { + "version": "2.18.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz", + "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8=" + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", diff --git a/package.json b/package.json index 3bc0b0ff..cd07fd96 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "core-js": "^2.4.1", "firebase": "^4.1.3", "hammerjs": "^2.0.8", + "moment": "^2.18.1", "ngx-color-picker": "^4.2.0", "ngx-perfect-scrollbar": "^4.5.2", "rxjs": "^5.4.2", diff --git a/src/app/core/components/countdown/countdown.component.html b/src/app/core/components/countdown/countdown.component.html new file mode 100644 index 00000000..7b747cf4 --- /dev/null +++ b/src/app/core/components/countdown/countdown.component.html @@ -0,0 +1,39 @@ +
+ +
+
+ {{countdown.days}} +
+
+ days +
+
+ +
+
+ {{countdown.hours}} +
+
+ hours +
+
+ +
+
+ {{countdown.minutes}} +
+
+ minutes +
+
+ +
+
+ {{countdown.seconds}} +
+
+ seconds +
+
+ +
\ No newline at end of file diff --git a/src/app/core/components/countdown/countdown.component.scss b/src/app/core/components/countdown/countdown.component.scss new file mode 100644 index 00000000..b09ceb86 --- /dev/null +++ b/src/app/core/components/countdown/countdown.component.scss @@ -0,0 +1,29 @@ +:host { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + .fuse-countdown { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + .time { + display: flex; + flex-direction: column; + padding: 0 12px; + + .value { + font-size: 34px; + line-height: 34px; + padding-bottom: 8px; + } + + .title { + color: rgba(0, 0, 0, 0.54); + } + } + } +} \ No newline at end of file diff --git a/src/app/core/components/countdown/countdown.component.ts b/src/app/core/components/countdown/countdown.component.ts new file mode 100644 index 00000000..e8630d29 --- /dev/null +++ b/src/app/core/components/countdown/countdown.component.ts @@ -0,0 +1,53 @@ +import { Component, Input, OnInit } from '@angular/core'; +import * as moment from 'moment'; +import { Observable } from 'rxjs/Observable'; + +@Component({ + selector : 'fuse-countdown', + templateUrl: './countdown.component.html', + styleUrls : ['./countdown.component.scss'] +}) +export class FuseCountdownComponent implements OnInit +{ + @Input('eventDate') eventDate; + countdown: any; + + constructor() + { + this.countdown = { + days : '', + hours : '', + minutes: '', + seconds: '' + }; + } + + ngOnInit() + { + const currDate = moment(); + const eventDate = moment(this.eventDate); + + let diff = eventDate.diff(currDate, 'seconds'); + + const countDown = + Observable + .interval(1000) + .map(value => { + return diff = diff - 1; + }) + .map(value => { + const timeLeft = moment.duration(value, 'seconds'); + + return { + days : timeLeft.asDays().toFixed(0), + hours : timeLeft.hours(), + minutes: timeLeft.minutes(), + seconds: timeLeft.seconds() + }; + }); + + countDown.subscribe(value => { + this.countdown = value; + }); + } +} diff --git a/src/app/core/components/layout/navbar/navbar.component.html b/src/app/core/components/layout/navbar/navbar.component.html index 5c489bb9..67c7ccee 100644 --- a/src/app/core/components/layout/navbar/navbar.component.html +++ b/src/app/core/components/layout/navbar/navbar.component.html @@ -13,6 +13,7 @@ +
diff --git a/src/app/core/components/layout/navbar/navbar.component.scss b/src/app/core/components/layout/navbar/navbar.component.scss index e48932f9..14d9cbf7 100644 --- a/src/app/core/components/layout/navbar/navbar.component.scss +++ b/src/app/core/components/layout/navbar/navbar.component.scss @@ -1,6 +1,16 @@ @import "../../../scss/fuse"; -:host { +body { + + &.fuse-nav-bar-folded { + + .content-wrapper { + padding-left: 64px !important; + } + } +} + +fuse-navbar { display: flex; flex-direction: column; width: 256px; @@ -76,16 +86,6 @@ font-size: 16px; } } - - .toggle-button-navbar { - /* border-radius: 50%; - position: relative; - cursor: pointer; - width: 32px; - height: 32px; - padding: 4px; - box-sizing: border-box;*/ - } } .nav-bar-content { diff --git a/src/app/core/components/layout/navbar/navbar.component.ts b/src/app/core/components/layout/navbar/navbar.component.ts index 93c76a2e..c6198b7b 100644 --- a/src/app/core/components/layout/navbar/navbar.component.ts +++ b/src/app/core/components/layout/navbar/navbar.component.ts @@ -1,13 +1,14 @@ -import {Component, HostBinding, HostListener, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core'; +import { Component, HostBinding, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { AppComponent } from '../../../../app.component'; import { Subscription } from 'rxjs/Subscription'; import { FuseMatchMedia } from '../../../services/match-media.service'; import { FuseNavbarService } from './navbar.service'; @Component({ - selector : 'fuse-navbar', - templateUrl: './navbar.component.html', - styleUrls : ['./navbar.component.scss'] + selector : 'fuse-navbar', + templateUrl : './navbar.component.html', + styleUrls : ['./navbar.component.scss'], + encapsulation: ViewEncapsulation.None }) export class FuseNavbarComponent implements OnInit, OnDestroy { @@ -31,17 +32,18 @@ export class FuseNavbarComponent implements OnInit, OnDestroy this.isFoldedOpen = false; this.updateCssClasses(); - this.matchMediaWatcher = this.fuseMatchMedia.onMediaChange.subscribe((mediaStep) => - { - if ( mediaStep === 'xs' ) - { - this.closeBar(); - } - else - { - this.openBar(); - } - }); + this.matchMediaWatcher = + this.fuseMatchMedia.onMediaChange + .subscribe((mediaStep) => { + if ( mediaStep === 'xs' ) + { + this.closeBar(); + } + else + { + this.openBar(); + } + }); } openBar() diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts index 66f4bfcb..b0f34e84 100644 --- a/src/app/core/components/navigation/navigation.model.ts +++ b/src/app/core/components/navigation/navigation.model.ts @@ -101,7 +101,7 @@ export class FuseNavigation { 'title': 'Login v2', 'type' : 'nav-item', - 'url' : '/pages/auth/login-v2' + 'url' : '/pages/auth/login-2' }, { 'title': 'Register', @@ -111,7 +111,7 @@ export class FuseNavigation { 'title': 'Register v2', 'type' : 'nav-item', - 'url' : '/pages/auth/register-v2' + 'url' : '/pages/auth/register-2' }, { 'title': 'Forgot Password', @@ -126,7 +126,7 @@ export class FuseNavigation { 'title': 'Lock Screen', 'type' : 'nav-item', - 'url' : '/pages/auth/lock-screen' + 'url' : '/pages/auth/lock' } ] }, @@ -144,12 +144,12 @@ export class FuseNavigation { 'title': '404', 'type' : 'nav-item', - 'url' : '/pages/errors/404' + 'url' : '/pages/errors/error-404' }, { 'title': '500', 'type' : 'nav-item', - 'url' : '/pages/errors/500' + 'url' : '/pages/errors/error-500' } ] }, diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index 8a2ce09e..0e00301d 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -16,12 +16,14 @@ import { FusePipesModule } from '../pipes/pipes.module'; import { ColorPickerModule } from 'ngx-color-picker'; import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component'; import { NgxDnDModule } from '@swimlane/ngx-dnd'; +import { FuseCountdownComponent } from '../components/countdown/countdown.component'; @NgModule({ declarations : [ FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective, - FuseConfirmDialogComponent + FuseConfirmDialogComponent, + FuseCountdownComponent ], imports : [ FlexLayoutModule, @@ -47,7 +49,8 @@ import { NgxDnDModule } from '@swimlane/ngx-dnd'; PerfectScrollbarModule, ReactiveFormsModule, ColorPickerModule, - NgxDnDModule + NgxDnDModule, + FuseCountdownComponent ], entryComponents: [FuseConfirmDialogComponent] }) diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss index 17a56077..422faa0c 100644 --- a/src/app/core/scss/core.scss +++ b/src/app/core/scss/core.scss @@ -27,6 +27,7 @@ @include angular-material-typography($custom-typography); // Partials +@import "partials/reset"; @import "partials/normalize"; @import "partials/spacing"; @import "partials/global"; diff --git a/src/app/core/scss/fuse.scss b/src/app/core/scss/fuse.scss index 70f6dffe..184e2c33 100644 --- a/src/app/core/scss/fuse.scss +++ b/src/app/core/scss/fuse.scss @@ -1,5 +1,5 @@ // Variables -@import "variables/theme-variables"; +@import "variables/theme"; // Mixins @import "mixins/breakpoints"; diff --git a/src/app/core/scss/partials/_global.scss b/src/app/core/scss/partials/_global.scss index 1426778e..dfdf4f60 100644 --- a/src/app/core/scss/partials/_global.scss +++ b/src/app/core/scss/partials/_global.scss @@ -1,27 +1,5 @@ -* { - box-sizing: border-box; -} - -html { - -} - -html, body { - margin: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - body { - &.fuse-nav-bar-folded { - - .content-wrapper { - padding-left: 64px; - } - } - > md-sidenav-container { height: 100%; } diff --git a/src/app/core/scss/partials/_reset.scss b/src/app/core/scss/partials/_reset.scss new file mode 100644 index 00000000..7170d080 --- /dev/null +++ b/src/app/core/scss/partials/_reset.scss @@ -0,0 +1,74 @@ +/*----------------------------------------------------------------*/ +/* Reset +/*----------------------------------------------------------------*/ +* { + text-rendering: optimizeLegibility; + -o-text-rendering: optimizeLegibility; + -ms-text-rendering: optimizeLegibility; + -moz-text-rendering: optimizeLegibility; + -webkit-text-rendering: optimizeLegibility; + -webkit-tap-highlight-color: transparent; + box-sizing: border-box; + + &:before, &:after { + box-sizing: border-box; + } + + // Remove focus outline + &:focus { + outline: none; + } +} + +html, body { + margin: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +// Reset non angular-material input's default browser/os styles +*:not(md-input-container) { + + > input, + > input[type="text"], + > input[type="tel"], + > input[type="email"], + > input[type="search"], + > input[type="password"], + > input[type="button"], + > button, + > input[type="submit"], + > input[type="image"], + > textarea { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + border: none; + padding: 0; + margin: 0; + } +} + +*:not(md-input-container) { + + > input[type="button"], + > button, + > input[type="submit"] { + background: none; + } +} + +button { + border-radius: 0; + font-family: inherit; + font-size: inherit; + padding: 0; + margin: 0; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} \ No newline at end of file diff --git a/src/app/core/scss/partials/_typography.scss b/src/app/core/scss/partials/_typography.scss index ab9e0919..74bebc5f 100644 --- a/src/app/core/scss/partials/_typography.scss +++ b/src/app/core/scss/partials/_typography.scss @@ -1,3 +1,248 @@ +html { + font-size: 62.5%; + font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif; + line-height: 1.4 !important; + letter-spacing: -0.1px !important; +} + +body { + font-size: 14px; +} + +html, body { + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; +} + +// Headings +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-weight: normal; +} + +h1, .h1 { + font-size: 24px; +} + +h2, .h2 { + font-size: 20px; +} + +h3, .h3 { + font-size: 16px; +} + +h4, .h4 { + font-size: 15px; +} + +h5, .h5 { + font-size: 13px; +} + +h6, .h6 { + font-size: 12px; +} + +// Links +a { + text-decoration: none; + + &:hover, &:active { + text-decoration: underline; + } +} + +// Abbr +abbr { + cursor: help; + border-bottom: 1px dotted rgba(0, 0, 0, 0.54); +} + +// Blockquote +blockquote { + border-left: 3px solid rgba(0, 0, 0, 0.12); + font-style: italic; + margin: 1em 0; + padding-left: 16px; + + footer { + font-style: normal; + + &:before { + content: '\2014 \00A0'; + } + } + + &.reverse { + border-left: none; + border-right: 3px solid rgba(0, 0, 0, 0.12); + text-align: right; + padding-left: 0; + padding-right: 16px; + + footer { + + &:before { + content: ''; + } + + &:after { + content: '\2014 \00A0'; + } + } + } +} + +// Code +code { + font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;; + + &:not(.highlight) { + background: rgba(0, 0, 0, 0.065); + color: #106CC8; + margin: 0 1px; + padding: 2px 3px; + border-radius: 2px; + } +} + +// Definition lists +dl { + + dt { + font-weight: bold; + } + + dd { + margin: 4px 0 16px 0; + } +} + +// Mark +mark { + background: #F7F49A; +} + +// Pre +pre { + line-height: 1.6; + margin: 8px 16px; + white-space: pre-wrap; +} + +// Small +small { + font-size: 80%; +} + +// Table +table { + + thead { + + tr { + + th { + text-align: left; + } + } + } +} + +// Text format helpers +.text-italic { + font-style: italic; +} + +.text-semibold { + font-weight: 600; +} + +.text-bold, +strong { + font-weight: 700; +} + +.text-strike { + text-decoration: line-through; +} + +.text-super { + vertical-align: super; +} + +.text-sub { + vertical-align: sub; +} + +.text-capitalize { + text-transform: capitalize; +} + +.text-lowercase { + text-transform: lowercase; +} + +.text-uppercase { + text-transform: uppercase; +} + +// Text align helpers +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +// Font weight helpers +@for $weight from 1 through 9 { + + .font-weight-#{$weight * 100} { + font-weight: #{$weight * 100}; + } +} + +// Font size helpers +@for $size from 1 through 60 { + + .font-size-#{$size * 2} { + font-size: #{$size * 2}px; + } +} + +// Line height helpers +@for $lineHeight from 1 through 60 { + + .line-height-#{$lineHeight * 2} { + line-height: #{$lineHeight * 2}px; + } +} + +// Boxed text +.text-boxed { + border-radius: 2px; + padding: 4px 8px; + margin: 0 8px; + font-size: 11px; + font-weight: 500; + color: rgba(0, 0, 0, 0.54); + background-color: rgba(0, 0, 0, 0.12); + white-space: nowrap; +} + +// Boxed text light +.text-boxed-light { + @extend .text-boxed; + background-color: rgba(255, 255, 255, 0.7); +} + // Truncate .text-truncate { display: block; @@ -9,4 +254,4 @@ // Nowrap .text-nowrap { white-space: nowrap; -} +} \ No newline at end of file diff --git a/src/app/core/scss/variables/_theme-variables.scss b/src/app/core/scss/variables/_theme.scss similarity index 100% rename from src/app/core/scss/variables/_theme-variables.scss rename to src/app/core/scss/variables/_theme.scss diff --git a/src/app/core/services/layout.service.ts b/src/app/core/services/layout.service.ts index e688e1a9..69d74a02 100644 --- a/src/app/core/services/layout.service.ts +++ b/src/app/core/services/layout.service.ts @@ -24,8 +24,10 @@ export class FuseLayoutService footer : 'none' // 'above', 'below', none }; + // Create the behavior subject this.onSettingsChanged = new BehaviorSubject(this.defaultSettings); + // Reload the default settings on every navigation start router.events.subscribe( (event) => { if ( event instanceof NavigationStart ) diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.component.html b/src/app/main/pages/authentication/forgot-password/forgot-password.component.html new file mode 100644 index 00000000..1c7b3cdf --- /dev/null +++ b/src/app/main/pages/authentication/forgot-password/forgot-password.component.html @@ -0,0 +1,39 @@ +
+ +
+ +
+ + + +
RECOVER YOUR PASSWORD
+ +
+ + + + + Email is required + + + Please enter a valid email address + + + + +
+ + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.component.scss b/src/app/main/pages/authentication/forgot-password/forgot-password.component.scss new file mode 100644 index 00000000..76283b12 --- /dev/null +++ b/src/app/main/pages/authentication/forgot-password/forgot-password.component.scss @@ -0,0 +1,79 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #forgot-password { + height: 100%; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #forgot-password-form-wrapper { + flex: 1 0 auto; + padding: 32px; + + @include media-breakpoint('xs') { + padding: 16px; + } + + #forgot-password-form { + width: 384px; + max-width: 384px; + padding: 32px; + text-align: center; + background: #FFFFFF; + @include mat-elevation(7); + + @include media-breakpoint('xs') { + padding: 24px; + width: 100%; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + margin: 32px auto; + color: #FFFFFF; + border-radius: 2px; + background: mat-color($accent); + } + + .title { + font-size: 17px; + margin: 16px 0 32px 0; + } + + form { + width: 100%; + text-align: left; + + md-input-container { + width: 100%; + } + + .submit-button { + width: 220px; + margin: 16px auto; + display: block; + + @include media-breakpoint('xs') { + width: 90%; + } + } + } + + .login { + margin: 32px auto 24px auto; + width: 250px; + font-weight: 500; + + .text { + margin-right: 8px; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts b/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts new file mode 100644 index 00000000..9e869549 --- /dev/null +++ b/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts @@ -0,0 +1,64 @@ +import { Component, OnInit } from '@angular/core'; + +import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector : 'fuse-forgot-password', + templateUrl: './forgot-password.component.html', + styleUrls : ['./forgot-password.component.scss'] +}) +export class ForgotPasswordComponent implements OnInit +{ + forgotPasswordForm: FormGroup; + forgotPasswordFormErrors: any; + + constructor( + private layoutService: FuseLayoutService, + private formBuilder: FormBuilder + ) + { + this.layoutService.setSettings({ + 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/pages/authentication/lock/lock.component.html b/src/app/main/pages/authentication/lock/lock.component.html new file mode 100644 index 00000000..66dc6be4 --- /dev/null +++ b/src/app/main/pages/authentication/lock/lock.component.html @@ -0,0 +1,48 @@ +
+ +
+ +
+ +
+
+ + lock +
+ +
+
YOUR SESSION IS LOCKED
+
+ Due to inactivity, your session is locked. Enter your password to continue. +
+
+
+ +
+ + + + + + + + + Password is required + + + + +
+ +
+ Are you not Katherine? +
+ +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/pages/authentication/lock/lock.component.scss b/src/app/main/pages/authentication/lock/lock.component.scss new file mode 100644 index 00000000..28a3d1ef --- /dev/null +++ b/src/app/main/pages/authentication/lock/lock.component.scss @@ -0,0 +1,77 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #lock { + height: 100%; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #lock-form-wrapper { + flex: 1 0 auto; + padding: 32px; + + @include media-breakpoint('xs') { + padding: 16px; + } + + #lock-form { + width: 384px; + max-width: 384px; + padding: 48px 32px 32px 32px; + background: #FFFFFF; + @include mat-elevation(7); + + @include media-breakpoint('xs') { + padding: 24px; + width: 100%; + } + + .title { + font-size: 17px; + margin-bottom: 8px; + } + + .subtitle { + color: rgba(0, 0, 0, 0.54); + } + + .avatar-container { + position: relative; + margin-right: 16px; + + md-icon { + position: absolute; + bottom: 0; + right: 0; + color: mat-color($mat-red, 500); + } + } + + form { + width: 100%; + margin: 32px 0 0 0; + + md-input-container { + width: 100%; + } + + .submit-button { + width: 220px; + margin: 16px auto; + display: block; + + @include media-breakpoint('xs') { + width: 90%; + } + } + } + + .message { + font-weight: 500; + text-align: center; + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/authentication/lock/lock.component.ts b/src/app/main/pages/authentication/lock/lock.component.ts new file mode 100644 index 00000000..8cf9da21 --- /dev/null +++ b/src/app/main/pages/authentication/lock/lock.component.ts @@ -0,0 +1,66 @@ +import { Component, OnInit } from '@angular/core'; + +import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector : 'fuse-lock', + templateUrl: './lock.component.html', + styleUrls : ['./lock.component.scss'] +}) +export class LockComponent implements OnInit +{ + lockForm: FormGroup; + lockFormErrors: any; + + constructor( + private layoutService: FuseLayoutService, + private formBuilder: FormBuilder + ) + { + this.layoutService.setSettings({ + navigation: 'none', + toolbar : 'none', + footer : 'none' + }); + + this.lockFormErrors = { + username: {}, + password: {} + }; + } + + ngOnInit() + { + this.lockForm = this.formBuilder.group({ + username: [{value: 'Katherine', disabled: true}, Validators.required], + password: ['', Validators.required] + }); + + this.lockForm.valueChanges.subscribe(() => { + this.onLockFormValuesChanged(); + }); + } + + onLockFormValuesChanged() + { + for ( const field in this.lockFormErrors ) + { + if ( this.lockFormErrors.hasOwnProperty(field) ) + { + continue; + } + + // Clear previous errors + this.lockFormErrors[field] = {}; + + // Get the control + const control = this.lockForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.lockFormErrors[field] = control.errors; + } + } + } +} diff --git a/src/app/main/pages/authentication/login-2/login-2.component.html b/src/app/main/pages/authentication/login-2/login-2.component.html index 5c92c15b..a73d9df4 100644 --- a/src/app/main/pages/authentication/login-2/login-2.component.html +++ b/src/app/main/pages/authentication/login-2/login-2.component.html @@ -51,13 +51,16 @@ Remember Me - Forgot Password? + + Forgot Password? + - +
@@ -78,7 +81,7 @@
Don't have an account? - Create an account + Create an account
diff --git a/src/app/main/pages/authentication/login-2/login-2.component.ts b/src/app/main/pages/authentication/login-2/login-2.component.ts index 10a29939..8cc139e1 100644 --- a/src/app/main/pages/authentication/login-2/login-2.component.ts +++ b/src/app/main/pages/authentication/login-2/login-2.component.ts @@ -43,18 +43,20 @@ export class Login2Component implements OnInit { for ( const field in this.loginFormErrors ) { - if ( this.loginFormErrors.hasOwnProperty(field) ) + if ( !this.loginFormErrors.hasOwnProperty(field) ) { - // Clear previous errors - this.loginFormErrors[field] = {}; + continue; + } - // Get the control - const control = this.loginForm.get(field); + // Clear previous errors + this.loginFormErrors[field] = {}; - if ( control && control.dirty && !control.valid ) - { - this.loginFormErrors[field] = control.errors; - } + // Get the control + const control = this.loginForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.loginFormErrors[field] = control.errors; } } } diff --git a/src/app/main/pages/authentication/login/login.component.html b/src/app/main/pages/authentication/login/login.component.html index 333c7986..33818ed2 100644 --- a/src/app/main/pages/authentication/login/login.component.html +++ b/src/app/main/pages/authentication/login/login.component.html @@ -34,11 +34,13 @@ Remember Me - Forgot Password? + + Forgot Password? + diff --git a/src/app/main/pages/authentication/login/login.component.ts b/src/app/main/pages/authentication/login/login.component.ts index 38d46ebd..23c501b1 100644 --- a/src/app/main/pages/authentication/login/login.component.ts +++ b/src/app/main/pages/authentication/login/login.component.ts @@ -46,18 +46,20 @@ export class LoginComponent implements OnInit { for ( const field in this.loginFormErrors ) { - if ( this.loginFormErrors.hasOwnProperty(field) ) + if ( !this.loginFormErrors.hasOwnProperty(field) ) { - // Clear previous errors - this.loginFormErrors[field] = {}; + continue; + } - // Get the control - const control = this.loginForm.get(field); + // Clear previous errors + this.loginFormErrors[field] = {}; - if ( control && control.dirty && !control.valid ) - { - this.loginFormErrors[field] = control.errors; - } + // Get the control + const control = this.loginForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.loginFormErrors[field] = control.errors; } } } diff --git a/src/app/main/pages/authentication/register-2/register-2.component.html b/src/app/main/pages/authentication/register-2/register-2.component.html new file mode 100644 index 00000000..800c869d --- /dev/null +++ b/src/app/main/pages/authentication/register-2/register-2.component.html @@ -0,0 +1,82 @@ +
+ +
+ + +
+ 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. +
+
+ +
+ +
+ + + +
CREATE AN ACCOUNT
+
Sed mollis velit facilisis facilisis viverra
+ +
+ + + + + Name is required + + + + + + + Email is required + + + Please enter a valid email address + + + + + + + Password is required + + + + + + + Password confirmation is required + + + +
+ + I read and accept + + terms and conditions +
+ + + +
+ +
+ Already have an account? + Login +
+
+
+
\ No newline at end of file diff --git a/src/app/main/pages/authentication/register-2/register-2.component.scss b/src/app/main/pages/authentication/register-2/register-2.component.scss new file mode 100644 index 00000000..000c0ba7 --- /dev/null +++ b/src/app/main/pages/authentication/register-2/register-2.component.scss @@ -0,0 +1,195 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #register { + height: 100%; + overflow: hidden; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #register-intro { + padding: 128px; + + @include media-breakpoint('sm') { + padding: 128px 64px; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + margin-bottom: 32px; + color: #FFFFFF; + border-radius: 2px; + text-align: center; + background: mat-color($accent); + } + + .title { + font-size: 42px; + font-weight: 300; + line-height: 1; + } + + .description { + padding-top: 8px; + font-size: 14px; + max-width: 600px; + } + } + + #register-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%; + } + + #register-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%; + } + } + + md-checkbox { + margin: 0; + } + + .terms { + font-size: 13px; + margin: 16px 0 32px 0; + + a { + margin-left: 4px; + } + } + + .submit-button { + width: 100%; + margin: 16px auto; + display: block; + + @include media-breakpoint('xs') { + width: 80%; + } + } + } + + .separator { + font-size: 15px; + font-weight: 600; + margin: 24px auto; + position: relative; + overflow: hidden; + width: 100px; + text-align: center; + color: rgba(0, 0, 0, 0.54); + + .text { + display: inline-flex; + position: relative; + padding: 0 8px; + z-index: 9999; + + &:before, &:after { + content: ''; + display: block; + width: 30px; + position: absolute; + top: 10px; + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + + &:before { + right: 100%; + } + + &:after { + left: 100%; + } + } + } + + button { + + &.google, + &.facebook { + width: 70%; + text-transform: none; + color: #FFFFFF; + font-size: 13px; + + @include media-breakpoint('xs') { + width: 60%; + } + + md-icon { + color: #FFFFFF; + margin: 0 8px 0 0; + } + } + + &.google { + background-color: #D73D32; + margin-bottom: 8px; + } + + &.facebook { + background-color: rgb(63, 92, 154); + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/authentication/register-2/register-2.component.ts b/src/app/main/pages/authentication/register-2/register-2.component.ts new file mode 100644 index 00000000..dfea9acb --- /dev/null +++ b/src/app/main/pages/authentication/register-2/register-2.component.ts @@ -0,0 +1,67 @@ +import { Component, OnInit } from '@angular/core'; + +import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector : 'fuse-register-2', + templateUrl: './register-2.component.html', + styleUrls : ['./register-2.component.scss'] +}) +export class Register2Component implements OnInit +{ + registerForm: FormGroup; + registerFormErrors: any; + + constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder) + { + this.layoutService.setSettings({ + navigation: 'none', + toolbar : 'none', + footer : 'none' + }); + + this.registerFormErrors = { + name : {}, + email : {}, + password : {}, + passwordConfirm: {} + }; + } + + ngOnInit() + { + this.registerForm = this.formBuilder.group({ + name : ['', Validators.required], + email : ['', [Validators.required, Validators.email]], + password : ['', Validators.required], + passwordConfirm: ['', Validators.required] + }); + + this.registerForm.valueChanges.subscribe(() => { + this.onRegisterFormValuesChanged(); + }); + } + + onRegisterFormValuesChanged() + { + for ( const field in this.registerFormErrors ) + { + if ( !this.registerFormErrors.hasOwnProperty(field) ) + { + continue; + } + + // Clear previous errors + this.registerFormErrors[field] = {}; + + // Get the control + const control = this.registerForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.registerFormErrors[field] = control.errors; + } + } + } +} diff --git a/src/app/main/pages/authentication/register/register.component.html b/src/app/main/pages/authentication/register/register.component.html index fb8d974c..82367534 100644 --- a/src/app/main/pages/authentication/register/register.component.html +++ b/src/app/main/pages/authentication/register/register.component.html @@ -36,7 +36,7 @@ - + Password confirmation is required @@ -50,7 +50,7 @@ diff --git a/src/app/main/pages/authentication/register/register.component.ts b/src/app/main/pages/authentication/register/register.component.ts index 86cf8fd1..0145f400 100644 --- a/src/app/main/pages/authentication/register/register.component.ts +++ b/src/app/main/pages/authentication/register/register.component.ts @@ -48,18 +48,20 @@ export class RegisterComponent implements OnInit { for ( const field in this.registerFormErrors ) { - if ( this.registerFormErrors.hasOwnProperty(field) ) + if ( !this.registerFormErrors.hasOwnProperty(field) ) { - // Clear previous errors - this.registerFormErrors[field] = {}; + continue; + } - // Get the control - const control = this.registerForm.get(field); + // Clear previous errors + this.registerFormErrors[field] = {}; - if ( control && control.dirty && !control.valid ) - { - this.registerFormErrors[field] = control.errors; - } + // Get the control + const control = this.registerForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.registerFormErrors[field] = control.errors; } } } diff --git a/src/app/main/pages/authentication/reset-password/reset-password.component.html b/src/app/main/pages/authentication/reset-password/reset-password.component.html new file mode 100644 index 00000000..0a25a144 --- /dev/null +++ b/src/app/main/pages/authentication/reset-password/reset-password.component.html @@ -0,0 +1,53 @@ +
+ +
+ +
+ + + +
RESET YOUR PASSWORD
+ +
+ + + + + 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/pages/authentication/reset-password/reset-password.component.scss b/src/app/main/pages/authentication/reset-password/reset-password.component.scss new file mode 100644 index 00000000..1745c596 --- /dev/null +++ b/src/app/main/pages/authentication/reset-password/reset-password.component.scss @@ -0,0 +1,79 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #reset-password { + height: 100%; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #reset-password-form-wrapper { + flex: 1 0 auto; + padding: 32px; + + @include media-breakpoint('xs') { + padding: 16px; + } + + #reset-password-form { + width: 384px; + max-width: 384px; + padding: 32px; + text-align: center; + background: #FFFFFF; + @include mat-elevation(7); + + @include media-breakpoint('xs') { + padding: 24px; + width: 100%; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + margin: 32px auto; + color: #FFFFFF; + border-radius: 2px; + background: mat-color($accent); + } + + .title { + font-size: 17px; + margin: 16px 0 32px 0; + } + + form { + width: 100%; + text-align: left; + + md-input-container { + width: 100%; + } + + .submit-button { + width: 220px; + margin: 16px auto; + display: block; + + @include media-breakpoint('xs') { + width: 90%; + } + } + } + + .login { + margin: 32px auto 24px auto; + width: 250px; + font-weight: 500; + + .text { + margin-right: 8px; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/authentication/reset-password/reset-password.component.ts b/src/app/main/pages/authentication/reset-password/reset-password.component.ts new file mode 100644 index 00000000..2c881180 --- /dev/null +++ b/src/app/main/pages/authentication/reset-password/reset-password.component.ts @@ -0,0 +1,68 @@ +import { Component, OnInit } from '@angular/core'; + +import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector : 'fuse-reset-password', + templateUrl: './reset-password.component.html', + styleUrls : ['./reset-password.component.scss'] +}) +export class ResetPasswordComponent implements OnInit +{ + resetPasswordForm: FormGroup; + resetPasswordFormErrors: any; + + constructor( + private layoutService: FuseLayoutService, + private formBuilder: FormBuilder + ) + { + this.layoutService.setSettings({ + 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/pages/coming-soon/coming-soon.component.html b/src/app/main/pages/coming-soon/coming-soon.component.html new file mode 100644 index 00000000..17e20a5f --- /dev/null +++ b/src/app/main/pages/coming-soon/coming-soon.component.html @@ -0,0 +1,49 @@ +
+ +
+ +
+ +
+ + + +
Hey! Thank you for checking out our app.
+
It’s not quite ready yet, but we are working hard and it will be ready in + approximately: +
+ + + +
+ +
+ +
+ If you would like to be notified when the app is ready, you can subscribe to our e-mail list. +
+ + + + + Email is required + + + Please enter a valid email address + + + + + +
+ +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/pages/coming-soon/coming-soon.component.scss b/src/app/main/pages/coming-soon/coming-soon.component.scss new file mode 100644 index 00000000..0defe7e3 --- /dev/null +++ b/src/app/main/pages/coming-soon/coming-soon.component.scss @@ -0,0 +1,95 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #coming-soon { + height: 100%; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #coming-soon-form-wrapper { + flex: 1 0 auto; + padding: 32px; + + @include media-breakpoint('xs') { + padding: 16px; + } + + #coming-soon-form { + width: 384px; + max-width: 384px; + background: #FFFFFF; + text-align: center; + @include mat-elevation(7); + + @include media-breakpoint('xs') { + width: 100%; + } + + .top { + width: 100%; + padding: 32px; + + @include media-breakpoint('xs') { + padding: 24px; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + margin: 32px auto; + color: #FFFFFF; + border-radius: 2px; + background: mat-color($accent); + } + + .title { + font-size: 17px; + margin-top: 16px; + } + + .subtitle { + margin: 16px auto 0 auto; + text-align: center; + max-width: 300px; + color: rgba(0, 0, 0, 0.54); + font-size: 15px; + } + + fuse-countdown { + margin: 48px auto 16px auto; + } + } + + form { + width: 100%; + padding: 32px; + text-align: center; + background: mat-color($mat-grey, 100); + + .message { + font-weight: 500; + margin: 8px auto 32px auto; + } + + md-input-container { + width: 320px; + margin: 8px auto 16px auto; + } + + .subscribe-button { + width: 220px; + margin: 16px auto; + + @include media-breakpoint('xs') { + width: 90%; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/coming-soon/coming-soon.component.ts b/src/app/main/pages/coming-soon/coming-soon.component.ts new file mode 100644 index 00000000..f264d448 --- /dev/null +++ b/src/app/main/pages/coming-soon/coming-soon.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +import { FuseLayoutService } from '../../../core/services/layout.service'; + +@Component({ + selector : 'fuse-coming-soon', + templateUrl: './coming-soon.component.html', + styleUrls : ['./coming-soon.component.scss'] +}) +export class ComingSoonComponent implements OnInit +{ + comingSoonForm: FormGroup; + comingSoonFormErrors: any; + + constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder) + { + this.layoutService.setSettings({ + navigation: 'none', + toolbar : 'none', + footer : 'none' + }); + + this.comingSoonFormErrors = { + email: {} + }; + } + + ngOnInit() + { + this.comingSoonForm = this.formBuilder.group({ + email: ['', [Validators.required, Validators.email]] + }); + + this.comingSoonForm.valueChanges.subscribe(() => { + this.onRegisterFormValuesChanged(); + }); + } + + onRegisterFormValuesChanged() + { + for ( const field in this.comingSoonFormErrors ) + { + if ( !this.comingSoonFormErrors.hasOwnProperty(field) ) + { + continue; + } + + // Clear previous errors + this.comingSoonFormErrors[field] = {}; + + // Get the control + const control = this.comingSoonForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.comingSoonFormErrors[field] = control.errors; + } + } + } +} diff --git a/src/app/main/pages/errors/404/error-404.component.html b/src/app/main/pages/errors/404/error-404.component.html new file mode 100644 index 00000000..62f44227 --- /dev/null +++ b/src/app/main/pages/errors/404/error-404.component.html @@ -0,0 +1,18 @@ +
+ +
+ +
404
+ +
Sorry but we could not find the page you are looking for
+ +
+ search + +
+ + Go back to dashboard + +
+ +
\ No newline at end of file diff --git a/src/app/main/pages/errors/404/error-404.component.scss b/src/app/main/pages/errors/404/error-404.component.scss new file mode 100644 index 00000000..53b669ab --- /dev/null +++ b/src/app/main/pages/errors/404/error-404.component.scss @@ -0,0 +1,46 @@ +@import "../../../../core/scss/fuse"; + +:host { + + #error-404 { + + .content { + width: 90%; + max-width: 512px !important; + margin-top: 128px; + + .error-code { + font-size: 112px; + text-align: center; + line-height: 1; + margin-bottom: 16px; + font-weight: 500; + } + + .message { + font-size: 24px; + text-align: center; + color: rgba(0, 0, 0, 0.54); + } + + .search { + width: 100%; + height: 56px; + line-height: 56px; + margin: 48px auto 16px auto; + padding: 16px; + background: #FFFFFF; + @include mat-elevation(1); + + input { + padding: 0 0 0 16px; + } + } + + .back-link { + font-size: 15px; + text-align: center; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/errors/404/error-404.component.ts b/src/app/main/pages/errors/404/error-404.component.ts new file mode 100644 index 00000000..245cc598 --- /dev/null +++ b/src/app/main/pages/errors/404/error-404.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; + +import { FuseLayoutService } from '../../../../core/services/layout.service'; + +@Component({ + selector : 'fuse-error-404', + templateUrl: './error-404.component.html', + styleUrls : ['./error-404.component.scss'] +}) +export class Error404Component implements OnInit +{ + constructor(private layoutService: FuseLayoutService) + { + this.layoutService.setSettings({ + navigation: 'none', + toolbar : 'none', + footer : 'none' + }); + } + + ngOnInit() + { + } +} diff --git a/src/app/main/pages/errors/500/error-500.component.html b/src/app/main/pages/errors/500/error-500.component.html new file mode 100644 index 00000000..7af8898b --- /dev/null +++ b/src/app/main/pages/errors/500/error-500.component.html @@ -0,0 +1,17 @@ +
+ +
+ +
500
+ +
Well, you broke the internet!
+ +
+ Just kidding, looks like we have an internal issue, please try again in couple minutes +
+ + Report this problem + +
+ +
diff --git a/src/app/main/pages/errors/500/error-500.component.scss b/src/app/main/pages/errors/500/error-500.component.scss new file mode 100644 index 00000000..fddbcaf8 --- /dev/null +++ b/src/app/main/pages/errors/500/error-500.component.scss @@ -0,0 +1,39 @@ +@import "../../../../core/scss/fuse"; + +:host { + + #error-500 { + + .content { + width: 90%; + max-width: 512px !important; + margin-top: 128px; + + .error-code { + font-size: 112px; + line-height: 1; + text-align: center; + margin-bottom: 16px; + font-weight: 500; + } + + .message { + font-size: 24px; + text-align: center; + color: rgba(0, 0, 0, 0.54); + } + + .sub-message { + font-size: 17px; + text-align: center; + color: rgba(0, 0, 0, 0.54); + margin: 16px auto 48px auto; + } + + .report-link { + text-align: center; + font-size: 15px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/errors/500/error-500.component.ts b/src/app/main/pages/errors/500/error-500.component.ts new file mode 100644 index 00000000..f0ad2fec --- /dev/null +++ b/src/app/main/pages/errors/500/error-500.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; + +import { FuseLayoutService } from '../../../../core/services/layout.service'; + +@Component({ + selector : 'fuse-error-500', + templateUrl: './error-500.component.html', + styleUrls : ['./error-500.component.scss'] +}) +export class Error500Component implements OnInit +{ + constructor(private layoutService: FuseLayoutService) + { + this.layoutService.setSettings({ + navigation: 'none', + toolbar : 'none', + footer : 'none' + }); + } + + ngOnInit() + { + } +} diff --git a/src/app/main/pages/pages.module.ts b/src/app/main/pages/pages.module.ts index 3f281eae..d2e6e16d 100644 --- a/src/app/main/pages/pages.module.ts +++ b/src/app/main/pages/pages.module.ts @@ -5,19 +5,54 @@ import { RouterModule } from '@angular/router'; import { LoginComponent } from './authentication/login/login.component'; import { Login2Component } from './authentication/login-2/login-2.component'; import { RegisterComponent } from './authentication/register/register.component'; +import { Register2Component } from './authentication/register-2/register-2.component'; +import { ForgotPasswordComponent } from './authentication/forgot-password/forgot-password.component'; +import { ResetPasswordComponent } from './authentication/reset-password/reset-password.component'; +import { LockComponent } from './authentication/lock/lock.component'; +import { ComingSoonComponent } from './coming-soon/coming-soon.component'; +import { Error404Component } from './errors/404/error-404.component'; +import { Error500Component } from './errors/500/error-500.component'; const routes = [ { - path : 'pages/auth/login', - component : LoginComponent + path : 'pages/auth/login', + component: LoginComponent }, { - path : 'pages/auth/login-2', - component : Login2Component + path : 'pages/auth/login-2', + component: Login2Component }, { - path : 'pages/auth/register', - component : RegisterComponent + path : 'pages/auth/register', + component: RegisterComponent + }, + { + path : 'pages/auth/register-2', + component: Register2Component + }, + { + path : 'pages/auth/forgot-password', + component: ForgotPasswordComponent + }, + { + path : 'pages/auth/reset-password', + component: ResetPasswordComponent + }, + { + path : 'pages/auth/lock', + component: LockComponent + }, + { + path : 'pages/coming-soon', + component: ComingSoonComponent + }, + { + path : 'pages/errors/error-404', + component: Error404Component + }, + { + path : 'pages/errors/error-500', + component: Error500Component } ]; @@ -29,7 +64,14 @@ const routes = [ declarations: [ LoginComponent, Login2Component, - RegisterComponent + RegisterComponent, + Register2Component, + ForgotPasswordComponent, + ResetPasswordComponent, + LockComponent, + ComingSoonComponent, + Error404Component, + Error500Component ] }) export class PagesModule diff --git a/src/index.html b/src/index.html index 4e2bb5e3..807cb5c5 100644 --- a/src/index.html +++ b/src/index.html @@ -15,9 +15,6 @@ - - - - +