login edits

src/app/app.module.ts

@@ -12,6 +12,9 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AppRoutingModule } from './app.routing';
 import { ComponentsModule } from './components/components.module';
+import { LoginComponent } from './pages/login/login.component';
+import { DashboardComponent } from './pages/dashboard/dashboard.component';
+
 
 
 @NgModule({
@@ -21,13 +24,17 @@ import { ComponentsModule } from './components/components.module';
     HttpClientModule,
     ComponentsModule,
     NgbModule,
-    RouterModule,
+    RouterModule.forRoot([
+      {path: '/login', component: LoginComponent},
+      {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
+    ]),
     AppRoutingModule
   ],
   declarations: [
     AppComponent,
     AdminLayoutComponent,
     AuthLayoutComponent
+
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.routing.ts

@@ -5,11 +5,12 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
 import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
+import { DashboardComponent } from './pages/dashboard/dashboard.component';
 
 const routes: Routes =[
   {
     path: '',
-    redirectTo: 'dashboard',
+    redirectTo: 'login',
     pathMatch: 'full',
   }, {
     path: '',
@@ -32,7 +33,8 @@ const routes: Routes =[
   }, {
     path: '**',
     redirectTo: 'dashboard'
-  }
+  },
+
 ];
 
 @NgModule({

src/app/components/navbar/navbar.component.ts

@@ -12,7 +12,7 @@ export class NavbarComponent implements OnInit {
   public focus;
   public listTitles: any[];
   public location: Location;
-  constructor(location: Location,  private element: ElementRef, private router: Router) {
+  constructor(location: Location,  private element: ElementRef) {
     this.location = location;
   }
 

src/app/components/sidebar/sidebar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
 declare interface RouteInfo {

src/app/layouts/auth-layout/auth-layout.component.html

@@ -61,9 +61,7 @@
   <div class="container">
     <div class="row align-items-center justify-content-xl-between">
       <div class="col-xl-6">
-        <div class="copyright text-center text-xl-left text-muted">
-          &copy; {{ test | date: "yyyy" }} <a href="https://www.creative-tim.com?ref=ada-footer-auth-layout" class="font-weight-bold ml-1" target="_blank">Creative Tim</a>
-        </div>
+
       </div>
       <div class="col-xl-6">
         <ul class="nav nav-footer justify-content-center justify-content-xl-end">

src/app/layouts/auth-layout/auth-layout.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-auth-layout',

src/app/layouts/auth-layout/auth-layout.module.ts

@@ -7,6 +7,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { LoginComponent } from '../../pages/login/login.component';
 import { RegisterComponent } from '../../pages/register/register.component';
+import { ForgotPasswordComponent } from 'src/app/pages/forgot-password/forgot-password.component';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -16,7 +18,9 @@ import { RegisterComponent } from '../../pages/register/register.component';
   ],
   declarations: [
     LoginComponent,
-    RegisterComponent
+    RegisterComponent,
+    ForgotPasswordComponent
+
   ]
 })
 export class AuthLayoutModule { }

src/app/layouts/auth-layout/auth-layout.routing.ts

@@ -2,8 +2,12 @@ import { Routes } from '@angular/router';
 
 import { LoginComponent } from '../../pages/login/login.component';
 import { RegisterComponent } from '../../pages/register/register.component';
+import { ForgotPasswordComponent } from 'src/app/pages/forgot-password/forgot-password.component';
+import { DashboardComponent } from 'src/app/pages/dashboard/dashboard.component';
 
 export const AuthLayoutRoutes: Routes = [
     { path: 'login',          component: LoginComponent },
-    { path: 'register',       component: RegisterComponent }
+    { path: 'register',       component: RegisterComponent },
+    { path: 'forgot-password', component: ForgotPasswordComponent},
+    { path: 'dashboard', component: DashboardComponent }
 ];

src/app/pages/forgot-password/forgot-password.component.html

@@ -0,0 +1,60 @@
+<div class="header bg-gradient-danger py-7 py-lg-8">
+    <div class="container">
+
+        <div class="row justify-content-center">
+
+            <h1 class="text-white">Forgot your password?</h1>
+
+
+        </div>
+
+    </div>
+    <div class="separator separator-bottom separator-skew zindex-100">
+      <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
+      </svg>
+    </div>
+  </div>
+  <!-- Page content -->
+  <div class="container mt--8 pb-5">
+    <div class="row justify-content-center">
+      <div class="col-lg-5 col-md-7">
+        <div class="card bg-secondary shadow border-0">
+
+          <div class="card-body px-lg-5 py-lg-5">
+            <div class="text-center text-muted mb-4">
+              <small>Please enter your email</small>
+            </div>
+            <form role="form">
+              <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text"><i class="ni ni-email-83"></i></span>
+                  </div>
+                  <input class="form-control" placeholder="Email" type="email">
+                </div>
+              </div>
+              <div class="form-group">
+
+              </div>
+              <div class="custom-control custom-control-alternative custom-checkbox">
+
+              </div>
+              <div class="text-center">
+                <button type="button" class="btn btn-primary my-4">Request password reset</button>
+              </div>
+            </form>
+          </div>
+
+        </div>
+
+            <div class="row justify-content-center">
+                <br>
+            <a href="login" class="text-light"><small>Back to sign in</small></a>
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+

src/app/pages/forgot-password/forgot-password.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-forgot-password',
+  templateUrl: './forgot-password.component.html',
+  styleUrls: ['./forgot-password.component.scss']
+})
+export class ForgotPasswordComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/login/login.component.html

@@ -1,13 +1,14 @@
+<title>Sign In</title>
 <div class="header bg-gradient-danger py-7 py-lg-8">
   <div class="container">
-    <div class="header-body text-center mb-7">
+
       <div class="row justify-content-center">
-        <div class="col-lg-5 col-md-6">
+
           <h1 class="text-white">Welcome!</h1>
-          <p class="text-lead text-light">Use these awesome forms to login or create new account in your project for free.</p>
-        </div>
+
+
       </div>
-    </div>
+
   </div>
   <div class="separator separator-bottom separator-skew zindex-100">
     <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -20,22 +21,10 @@ <h1 class="text-white">Welcome!</h1>
   <div class="row justify-content-center">
     <div class="col-lg-5 col-md-7">
       <div class="card bg-secondary shadow border-0">
-        <div class="card-header bg-transparent pb-5">
-          <div class="text-muted text-center mt-2 mb-3"><small>Sign in with</small></div>
-          <div class="btn-wrapper text-center">
-            <a href="javascript:void(0)" class="btn btn-neutral btn-icon">
-              <span class="btn-inner--icon"><img src="../assets/img/icons/common/github.svg"></span>
-              <span class="btn-inner--text">Github</span>
-            </a>
-            <a href="javascript:void(0)" class="btn btn-neutral btn-icon">
-              <span class="btn-inner--icon"><img src="../assets/img/icons/common/google.svg"></span>
-              <span class="btn-inner--text">Google</span>
-            </a>
-          </div>
-        </div>
+
         <div class="card-body px-lg-5 py-lg-5">
           <div class="text-center text-muted mb-4">
-            <small>Or sign in with credentials</small>
+            <small>Sign in with credentials</small>
           </div>
           <form role="form">
             <div class="form-group mb-3">
@@ -61,19 +50,21 @@ <h1 class="text-white">Welcome!</h1>
               </label>
             </div>
             <div class="text-center">
-              <button type="button" class="btn btn-primary my-4">Sign in</button>
+              <button type="button" class="btn btn-primary my-4"  routerLink="dashboard">Sign in</button>
             </div>
           </form>
         </div>
       </div>
       <div class="row mt-3">
         <div class="col-6">
-          <a href="javascript:void(0)" class="text-light"><small>Forgot password?</small></a>
+          <a href="forgot-password" class="text-light"><small>Forgot password?</small></a>
         </div>
         <div class="col-6 text-right">
-          <a href="javascript:void(0)" class="text-light"><small>Create new account</small></a>
+          <a href="register" class="text-light"><small>Create new account</small></a>
         </div>
       </div>
     </div>
+
   </div>
 </div>
+

src/app/pages/login/login.component.ts

@@ -1,16 +1,23 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
+
 export class LoginComponent implements OnInit, OnDestroy {
-  constructor() {}
+  constructor(private router: Router) {}
 
   ngOnInit() {
   }
   ngOnDestroy() {
   }
 
+  onButtonClick() {
+    this.router.navigate(['dashboard']);
+  }
+
 }
+

src/app/pages/register/register.component.html

@@ -4,7 +4,7 @@
       <div class="row justify-content-center">
         <div class="col-lg-5 col-md-6">
           <h1 class="text-white">Welcome!</h1>
-          <p class="text-lead text-light">Use these awesome forms to login or create new account in your project for free.</p>
+
         </div>
       </div>
     </div>
@@ -21,22 +21,11 @@ <h1 class="text-white">Welcome!</h1>
   <div class="row justify-content-center">
     <div class="col-lg-6 col-md-8">
       <div class="card bg-secondary shadow border-0">
-        <div class="card-header bg-transparent pb-5">
-          <div class="text-muted text-center mt-2 mb-4"><small>Sign up with</small></div>
-          <div class="text-center">
-            <a href="javascript:void(0)" class="btn btn-neutral btn-icon mr-4">
-              <span class="btn-inner--icon"><img src="assets/img/icons/common/github.svg"></span>
-              <span class="btn-inner--text">Github</span>
-            </a>
-            <a href="javascript:void(0)" class="btn btn-neutral btn-icon">
-              <span class="btn-inner--icon"><img src="assets/img/icons/common/google.svg"></span>
-              <span class="btn-inner--text">Google</span>
-            </a>
-          </div>
-        </div>
+
+
         <div class="card-body px-lg-5 py-lg-5">
           <div class="text-center text-muted mb-4">
-            <small>Or sign up with credentials</small>
+            <small>Sign up with credentials</small>
           </div>
           <form role="form">
             <div class="form-group">
@@ -79,7 +68,18 @@ <h1 class="text-white">Welcome!</h1>
             </div>
           </form>
         </div>
+
+      </div>
+      <br>
+      <div class="row justify-content-center">
+      <small>Already have an account?</small> 
+      <div><br></div>
+      <a href="login" class="text-light"><small> Login</small></a>
+
       </div>
+
     </div>
   </div>
+
 </div>
+

src/assets/scss/core/footers/_footer.scss

@@ -4,7 +4,9 @@
 
 
 // General styles
-
+.nav-footer{
+    display: none;
+}
 .footer {
     background: $footer-bg;
     padding: $footer-padding-y $footer-padding-x;
@@ -42,6 +44,7 @@
 
     .copyright {
         font-size: $font-size-sm;
+        display: none;
     }
 }
 

src/assets/scss/core/headers/_header.scss

@@ -2,6 +2,9 @@
 // Header
 //
 
+.navbar{
+    display: none;
+}
 .header {
     position: relative;
 }

tsconfig.json

@@ -1,4 +1,5 @@
 {
+
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",