New mail confirmation page

src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.html

@@ -0,0 +1,30 @@
+<div id="mail-confirm" fxLayout="column" fusePerfectScrollbar>
+
+    <div id="mail-confirm-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
+
+        <div id="mail-confirm-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+
+            <div class="logo">
+                <mat-icon class="s-96">email</mat-icon>
+            </div>
+
+            <div class="title">Confirm your email address!</div>
+
+            <div class="subtitle">
+                <p>
+                    A confirmation e-mail has been sent to <b>example@mymail.com</b>.
+                </p>
+                <p>
+                    Check your inbox and click on the "Confirm my email" link to confirm your email address.
+                </p>
+            </div>
+
+            <div class="message">
+                <a class="link" [routerLink]="'/pages/auth/login'">Go back to login page</a>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>

src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.scss

@@ -0,0 +1,55 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+
+    #mail-confirm {
+        width: 100%;
+        overflow: auto;
+        background: url('/assets/images/backgrounds/march.jpg') no-repeat;
+        background-size: cover;
+
+        #mail-confirm-form-wrapper {
+            flex: 1 0 auto;
+            padding: 32px;
+
+            @include media-breakpoint('xs') {
+                padding: 16px;
+            }
+
+            #mail-confirm-form {
+                max-width: 480px;
+                padding: 48px;
+                background: #FFFFFF;
+                text-align: center;
+                @include mat-elevation(7);
+
+                @include media-breakpoint('xs') {
+                    padding: 24px;
+                    width: 100%;
+                }
+
+                .logo {
+                    margin: 0 auto 32px auto;
+                }
+
+                .title {
+                    font-size: 20px;
+                    margin-top: 16px;
+                }
+
+                .subtitle {
+                    margin: 16px auto;
+                    max-width: 300px;
+                    color: rgba(0, 0, 0, 0.54);
+                    font-size: 15px;
+                }
+
+                .message {
+                    font-weight: 500;
+                    text-align: center;
+                    margin-top: 40px;
+                }
+            }
+        }
+    }
+}

src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts

@@ -0,0 +1,27 @@
+import { Component} from '@angular/core';
+
+import { FuseConfigService } from '../../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../../core/animations';
+
+@Component({
+    selector   : 'fuse-mail-confirm',
+    templateUrl: './mail-confirm.component.html',
+    styleUrls  : ['./mail-confirm.component.scss'],
+    animations : fuseAnimations
+})
+export class FuseMailConfirmComponent
+{
+
+    constructor(
+        private fuseConfig: FuseConfigService
+    )
+    {
+        this.fuseConfig.setSettings({
+            layout: {
+                navigation: 'none',
+                toolbar   : 'none',
+                footer    : 'none'
+            }
+        });
+    }
+}

src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { FuseMailConfirmComponent } from './mail-confirm.component';
+
+const routes = [
+    {
+        path     : 'pages/auth/mail-confirm',
+        component: FuseMailConfirmComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        FuseMailConfirmComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class MailConfirmModule
+{
+
+}

src/app/main/content/pages/pages.module.ts

@@ -6,9 +6,10 @@ 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 { LockModule } from './authentication/lock/lock.module';
+import { MailConfirmModule } from './authentication/mail-confirm/mail-confirm.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';
@@ -31,6 +32,7 @@ import { SearchModule } from './search/search.module';
         ResetPasswordModule,
         ResetPassword2Module,
         LockModule,
+        MailConfirmModule,
 
         // Coming-soon
         ComingSoonModule,

src/app/navigation.model.ts

@@ -135,6 +135,11 @@ export class NavigationModel
                                 'title': 'Lock Screen',
                                 'type' : 'item',
                                 'url'  : '/pages/auth/lock'
+                            },
+                            {
+                                'title': 'Mail Confirmation',
+                                'type' : 'item',
+                                'url'  : '/pages/auth/mail-confirm'
                             }
                         ]
                     },