up

Author: rxzx

src/app/Providers/storageservice.ts

@@ -0,0 +1,23 @@
+import { Injectable, Injector } from '@angular/core';
+
+@Injectable()
+export class StorageService {
+    private baseUrl = '/';
+    constructor(
+    ) {
+    }
+
+    getPropertyFromLS(key) {
+        JSON.stringify(window.localStorage.getItem(key));
+    }
+
+    setPropertyFromLS(key, value) {
+        window.localStorage.setItem(key, JSON.parse(value));
+    }
+
+    removePropertyFromLS(key){
+        window.localStorage.removeItem(key);
+    }
+
+
+}

src/app/app-routing.module.ts

@@ -11,7 +11,7 @@ import { PublicHomeComponent } from './public/home/home.component';
 import { AboutComponent } from './private/about/about.component';
 import { GalleryComponent } from './private/gallery/gallery.component';
 const routes: Routes = [
-  { path: '', redirectTo: 'user/home', pathMatch: 'full' },
+  { path: '', redirectTo: 'sign-in', pathMatch: 'full' },
   {
     path: '',
     component: PublicComponent,

src/app/app.module.ts

@@ -4,7 +4,7 @@ import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { PublicModule } from './public/public.module';
@@ -20,6 +20,7 @@ import { AlwaysAuthGuard, OnlyLoggedInUsersGuard } from './AlwaysAuthGuard ';
     BrowserAnimationsModule,
     HttpClientModule,
     FormsModule,
+    ReactiveFormsModule,
     AppRoutingModule,
     PublicModule,
     PrivateModule,

src/app/public/public.component.css

@@ -0,0 +1,4 @@
+#publicModule{
+    background-color: #f52c2c;
+    height: 100vh;
+}

src/app/public/public.component.html

@@ -1,5 +1,8 @@
 <app-public-header></app-public-header>
-<div class="container">
-  <router-outlet></router-outlet>
+<div id="publicModule">
+  <div class="container">
+    <router-outlet></router-outlet>
+  </div>
 </div>
-<app-public-footer></app-public-footer>
+
+<app-public-footer></app-public-footer>

src/app/public/public.module.ts

@@ -1,3 +1,4 @@
+import { ReactiveFormsModule } from '@angular/forms';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PublicHeaderComponent } from './header/header.component';
@@ -11,6 +12,7 @@ import { AppRoutingModule } from '../app-routing.module';
   imports: [
     CommonModule,
     AppRoutingModule,
+    ReactiveFormsModule
 
   ],
   declarations: [

src/app/public/signin/signin.component.css

@@ -0,0 +1,3 @@
+#signIn {
+    color: #fff;
+  }

src/app/public/signin/signin.component.html

@@ -1,6 +1,18 @@
-<p>
-  signin
-</p>
-<input type="text" placeholder="username">
-<input type="password" placeholder="password">
-<button>login</button>
+<div id="signIn">
+  <div class="row">
+    <div class="col-sm-6 col-md-6 col-lg-6 col-sm-offset-3 col-md-offset-3 col-lg-offset-3">
+      <h1 class="text-center">SignIn</h1>
+      <form [formGroup]="signInForm" (ngSubmit)="onSubmit()" >
+        <div class="form-group">
+          <label for="email">Email address *</label>
+          <input type="email" class="form-control" id="email" [formControl]="signInForm.controls['username']">
+        </div>
+        <div class="form-group">
+          <label for="pwd">Password *</label>
+          <input type="password" class="form-control" id="pwd" formControlName="password" [formControl]="signInForm.controls['password']">
+        </div>
+        <button type="submit" class="btn btn-default ">Submit</button>
+      </form>
+    </div>
+  </div>
+</div>

src/app/public/signin/signin.component.ts

@@ -1,4 +1,8 @@
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
 import { Component, OnInit } from '@angular/core';
+import { User } from '../../shared/models';
+import { FormGroup, FormBuilder, Validators } from '../../../../node_modules/@angular/forms';
 
 @Component({
   selector: 'app-signin',
@@ -7,9 +11,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PublicSigninComponent implements OnInit {
 
-  constructor() { }
+  public signInForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private toastrService:ToastrService,
+    private router: Router
+  ) {
+    this.signInForm = formBuilder.group({
+      username: ['', Validators.required],
+      password: ['', Validators.required],
+    });
+  }
 
   ngOnInit() {
   }
 
+  onSubmit(){
+    let signInData:User = this.signInForm.value;
+    if(signInData.username.toLowerCase() === 'admin' && signInData.password.toLowerCase() === 'admin' ){
+      this.router.navigate(['user/home']);
+    }else{
+      this.toastrService.error('Username or password is wrong', 'Error!', { closeButton: true });
+    } 
+     
+  }
+
 }