feat: add login module

Author: ui2code

src/app/login/login.component.html

@@ -0,0 +1,45 @@
+<div class="container">
+    <div class="row justify-content-center">
+      <div class="col col-lg-5">
+        <div class="card">
+          
+        <div *ngIf="signUpClicked; else loginComponent">
+            <app-sign-up (onLogin)="getNotification($event)"></app-sign-up>
+        </div>
+        <ng-template #loginComponent>
+          <mat-card>
+              <mat-card-title>Login</mat-card-title>
+          <mat-card-content>
+          <form  (ngSubmit)="submit()">
+            <p>
+              <mat-form-field>
+                <input type="text" matInput placeholder="Username" name="username" [(ngModel)]="username">
+              </mat-form-field>
+            </p>
+
+            <p>
+              <mat-form-field>
+                <input type="password" matInput placeholder="Password" name="pass" [(ngModel)]="password">
+              </mat-form-field>
+            </p>
+
+            <p *ngIf="error" class="error">
+              {{ error }}
+            </p>
+            <div class="button">
+              <p><a href="javascript:void(0)" (click)="forgotPass()">Forgot Password</a> | <a href="javascript:void(0)" (click)="signUp()">Sign Up</a></p>
+              <button type="submit" mat-raised-button>Login</button>
+            </div>
+
+          </form>
+          </mat-card-content>
+          <mat-card-content>
+            <div class="fb-login-button" data-width="" data-size="large" data-button-type="login_with" data-auto-logout-link="false" data-use-continue-as="false" ></div>
+          </mat-card-content>
+          </mat-card>
+        </ng-template>
+
+      </div>
+    </div>
+  </div>
+</div>

src/app/login/login.component.scss

@@ -0,0 +1,33 @@
+:host {
+  display: flex;
+  justify-content: center;
+  margin: 100px 0px;
+}
+
+  .mat-form-field {
+    width: 100%;
+    min-width: 300px;
+  }
+
+  mat-card-title,
+  mat-card-content {
+    display: flex;
+    justify-content: center;
+  }
+
+  .error {
+    padding: 16px;
+    width: 300px;
+    color: white;
+    background-color: red;
+  }
+
+  .button{
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .button button{
+    background: #4a4aff;
+    color: white;
+  }

src/app/login/login.component.ts

@@ -0,0 +1,93 @@
+import { Component, OnInit, NgZone, Input} from '@angular/core';
+import { Router } from '@angular/router';
+
+import { SignUpComponent } from '../sign-up/sign-up.component';
+declare var FB: any;
+
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  @Input() signUpC : SignUpComponent;
+
+  username: String;
+  password: String;
+  error: String;
+  signUpClicked: boolean = false;
+
+  constructor(private ngZone: NgZone, private router : Router) { }
+
+  ngOnInit() {
+    (window as any).fbAsyncInit = () => {
+      FB.init({appId: 'APPID',cookie: true, xfbml: true, version: 'v2.8'});
+      FB.Event.subscribe('auth.authResponseChange', (response) => {
+        if (response.status === 'connected') {
+          this.statusChangeCallback(response)
+        } else if (response.status === 'not_authorized') {
+          console.log("Not authorised")
+        } else {
+           console.log("error in verifying")
+          } });
+    };
+
+    (function(d, s, id){
+       var js, fjs = d.getElementsByTagName(s)[0];
+       if (d.getElementById(id)) {return;}
+       js = d.createElement(s); js.id = id;
+       js.src = "https://connect.facebook.net/en_US/sdk.js";
+       fjs.parentNode.insertBefore(js, fjs);
+     }(document, 'script', 'facebook-jssdk'));
+  }
+
+
+ fetchUserDetail(){
+    FB.api(
+      '/me',
+      'GET',
+      {"fields":"id,name,birthday,email"},
+      (response) => {
+          console.log(response);
+          this.navigate(['/dashboard']);
+      }
+    );
+  }
+
+  public navigate(commands: any[]): void {
+    this.ngZone.run(() => this.router.navigate(commands)).then();
+  }
+
+  statusChangeCallback(res){
+    if (res.status === 'connected') {
+      this.fetchUserDetail();
+    }
+   }
+
+
+  submit(){
+    if(this.username === 'admin' && this.password === 'admin'){
+      // console.log(this.username, this.password)
+      this.router.navigate(['dashboard']);
+    }
+    else{
+      this.error = "Wrong Credentials";
+    }
+  }
+
+  forgotPass(){
+    alert("Yaay! You clicked on Forgot password.");
+  }
+
+  signUp(){
+    this.signUpClicked = true;
+  }
+
+  getNotification(value){
+    if(value === true)
+      this.signUpClicked = false
+  }
+
+}