Signin/signup Working

Author: iamsaquib8

codecamp-front/src/app/app-routing.module.ts

@@ -25,7 +25,7 @@ const appRoutes: Routes = [
     {path: 'contest' , component: ContestComponent},
     {path: 'discuss' , component: DiscussComponent},
     {path: 'profile' , component: ProfileComponent},
-    {path: 'ide', component: IdeComponent}
+    {path: 'ide', component: IdeComponent},
 ];
 
 @NgModule({

codecamp-front/src/app/components/login/login.component.html

@@ -1,11 +1,5 @@
 <div class="container">
-        <div class="row show-hide-message">
-          <div [ngClass]="messageClass">
-            {{ message }}
-          </div>
-        </div>
-      
-        <form [formGroup]="form" (submit)="onSignupSubmit()">      
+        <form [formGroup]="form" (submit)="onSignInSubmit()">      
           <div class="form-group">
             <label for="username">Username</label>
             <input type="text"
@@ -31,6 +25,6 @@
 
           <input 
           [disabled]="!form.valid"
-          type="submit" class="btn btn-primary" value="Sign up">
+          type="submit" class="btn btn-primary" value="Sign In">
         </form>
       </div>

codecamp-front/src/app/components/login/login.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AuthService } from '../../services/auth.service';
 import { Router } from '@angular/router';
 
@@ -8,14 +9,41 @@ import { Router } from '@angular/router';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
-  username: string;
-  password: string;
+  form: FormGroup;
+  message;
+  messageClass;
   constructor(
-    private authService: AuthService, 
-    private router: Router
-  ) { }
+    private authService: AuthService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) { 
+    this.createForm();
+  }
 
   ngOnInit() {
   }
 
+  createForm() {
+    this.form = this.formBuilder.group({
+      password: ['', Validators.compose([
+        Validators.required,
+        Validators.minLength(8)
+      ])],
+      username: ['', Validators.required]
+  });
+}
+
+  onSignInSubmit() {
+    const user = {
+      username: this.form.get('username').value, // Username input field
+      password: this.form.get('password').value // Password input field
+    };
+    this.authService.loginUser(user).subscribe(data => {
+      this.authService.storeUserData(data.token, data.user);
+        // After 2 seconds, redirect to dashboard page
+        setTimeout(() => {
+            this.router.navigate(['/']); // Navigate to dashboard view
+          }, 2000);
+      });
+  }
 }

codecamp-front/src/app/components/navbar/navbar.component.html

@@ -48,26 +48,29 @@
         <a class="nav-link" 
         routerLink="/login" 
         routerLinkActive="active"
+        *ngIf="!authService.loggedIn()"
         >Login</a>
       </li>
 
       <li class="nav-item">
           <a class="nav-link"
           routerLink="/profile" 
           routerLinkActive="active"
+          *ngIf="authService.loggedIn()"
           >My Profile</a>
         </li>
 
       <li class="nav-item">
           <a class="nav-link"
           routerLink="/register" 
           routerLinkActive="active"
+          *ngIf="!authService.loggedIn()"
           >Register</a>
         </li>
         <li class="nav-item" >
           <a class="nav-link"
           (click)="onLogoutClick()" 
-          
+          *ngIf="authService.loggedIn()"
           >Logout</a>
         </li>
     </ul>

codecamp-front/src/app/components/register/register.component.html

@@ -109,7 +109,7 @@
     </div>
 
     <input 
-    [disabled]="!form.valid"
+    [disabled]="!form.valid|| processing "
     type="submit" class="btn btn-primary" value="Sign up">
   </form>
 </div>

codecamp-front/src/app/components/register/register.component.ts

@@ -11,8 +11,8 @@ import { Router } from '@angular/router';
 export class RegisterComponent implements OnInit {
 
   form: FormGroup;
-  message;
-  messageClass;
+  // message;
+  // messageClass;
 
   constructor(
     private authService: AuthService,
@@ -47,6 +47,8 @@ export class RegisterComponent implements OnInit {
     }, { validator: this.matchingPasswords('password', 'confirm')});
   }
 
+
+
   validateEmail(controls) {
     // Create a regular expression
     const regExp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
@@ -69,6 +71,7 @@ export class RegisterComponent implements OnInit {
     };
   }
   onSignupSubmit() {
+
     const user = {
       username: this.form.get('username').value,
       email_id: this.form.get('email_id').value,
@@ -80,8 +83,10 @@ export class RegisterComponent implements OnInit {
       gender: this.form.get('gender').value
     };
     this.authService.registerUser(user).subscribe(data => {
-      console.log(data);
+      if (!data.success) {
+      } else {
+        this.router.navigate(['/login']);
+      }
     });
-    this.router.navigate(['/login']);
   }
 }

codecamp-front/src/app/services/auth.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import {Http, Headers} from '@angular/http';
+import {Http, Headers, RequestOptions} from '@angular/http';
 import { HttpModule } from '@angular/http';
 
 import 'rxjs/add/operator/map';
@@ -9,14 +9,54 @@ import { tokenNotExpired } from 'angular2-jwt';
 export class AuthService {
   authToken: any;
   user: any;
-  domain = 'http://localhost:3000/';
+  domain = 'http://localhost:3000';
+  options;
 
   constructor(
   private http: Http
   ) { }
 
+  createAuthenticationHeaders() {
+    this.loadToken(); // Get token so it can be attached to headers
+    // Headers configuration options
+    this.options = new RequestOptions({
+      headers: new Headers({
+        'Content-Type': 'application/json', // Format set to JSON
+        'authorization': this.authToken // Attach token
+      })
+    });
+  }
+
+  loadToken() {
+    this.authToken = localStorage.getItem('token'); 
+    console.log(this.authToken); // Get token and asssign to variable to be used elsewhere
+  }
   registerUser(user) {
-    return this.http.post(this.domain + 'users/signup', user)
+    return this.http.post(this.domain + '/users/signup', user)
       .map(res => res.json());
   }
+
+  loginUser(user) {
+    this.createAuthenticationHeaders();
+    return this.http.post(this.domain + '/users/signin', user, this.options)
+    .map(res => res.json());
+  }
+
+  storeUserData(token, user) {
+
+    localStorage.setItem('token', token); // Set token in local storage
+    localStorage.setItem('user', JSON.stringify(user)); // Set user in local storage as string
+    this.authToken = token; // Assign token to be used elsewhere
+    this.user = user; // Set user to be used elsewhere
+  }
+
+  loggedIn() {
+    return tokenNotExpired();
+  }
+
+  logout() {
+    this.authToken = null; // Set token to null
+    this.user = null; // Set user to null
+    localStorage.clear(); // Clear local storage
+  }
 }

server/routes/users.js

@@ -24,15 +24,11 @@ router.post('/signup',(req,res)=>{
                 var token = jwt.sign({ username: user.username},'secret', {
                     expiresIn: 86400 // expires in 24 hours
                   });
-<<<<<<< HEAD
-                  res.json({ success: true, message: 'Acount registered!' });
-=======
                   res.status(200).json({
                     'success':true,
                     'msg':'Registration successful , Now you can Login',    
                     'token':token
                 })
->>>>>>> 08e47d897437c805e78a5f0730556facf6bb31a6
               }, (e) => {
                 res.status(400).json({
                     'success':false,
@@ -95,7 +91,11 @@ router.post('/signin',(req,res)=>{
               });
             res.json({
                 'success':true,
-                'msg':'User with Username Exists'
+                'msg':'Successfully logged In',
+                'token': token,
+                'user': {
+                    username: user.username
+                  }
             })
         }
     })

server/utils/db/db.js

@@ -1,11 +1,7 @@
 const mongoose = require('mongoose')
 
 mongoose.Promise = global.Promise
-<<<<<<< HEAD
 mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/OnlineJudge')
-=======
-mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/OnlineJudge',{'useMongoClient':true})
->>>>>>> 08e47d897437c805e78a5f0730556facf6bb31a6
 module.exports = {
   mongoose
 }