Adding readme

README.md

@@ -0,0 +1,9 @@
+## Todo Project
+
+<p>This project is created using Angular 5. It will help you create an new todo list and separate todo tasks for each list. The logic for authentication and adding new name to a list is still not in place but you can add using the + button. You can go past the login form by entering any details to get to the list</p>
+
+## Steps to install
+
+1. Git clone the repo and `cd` into it.
+2. Run `npm install` and `npm start` to run the project
+3. Start creating the todo lists and tasks, deleting and updating.

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
 import { User } from './users/user';
 import { Subscription }   from 'rxjs/Subscription';
 import { AuthService } from './auth.service';
@@ -12,8 +12,7 @@ import { AuthService } from './auth.service';
 
 export class AppComponent implements OnInit, OnDestroy { 
 
-
-	constructor( private authService: AuthService ) { }
+	constructor(@Inject(AuthService) private authService: AuthService ) { }
 
 	ngOnInit() {
 

src/app/app.module.ts

@@ -11,7 +11,7 @@ import { AuthService } from './auth.service';
 
 
 @NgModule({
-	imports: [ BrowserModule , FormsModule,AppRoutingModule ],
+	imports: [ BrowserModule , FormsModule,AppRoutingModule, HttpModule],
 	declarations: [ AppComponent,LoginComponent,HomeComponent ],
 	providers: [ AuthService ],	
 	bootstrap: [ AppComponent ]

src/app/auth.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { Http, Response, Headers, RequestOptions } from '@angular/http';
 import { Observable } from 'rxjs/observable';
 import { User } from './users/user';
@@ -8,15 +8,34 @@ import 'rxjs/add/operator/map';
 @Injectable()
 export class AuthService {
 
-  // private base_url = 'http://127.0.0.1:3000/api/user';
-  // token: string;
-  // private userSource = new Subject<User>();
-  // user$ = this.userSource.asObservable();
+  private base_url = 'http://127.0.0.1:3000/api/user';
+  token: string;
+  private userSource = new Subject<User>();
+  user$ = this.userSource.asObservable();
 
-  constructor() { }
+  constructor( @Inject(Http) public http: Http) { }
 
   setUser(user: User) {
     this.userSource.next(user);
   }
 
+  registerUser(user: User) : Observable<boolean> {
+  	let body = JSON.stringify(user);
+  	let headers = new Headers();
+  		headers.append('Content-Type','application/json');
+  	let options = new RequestOptions({ headers: headers });
+  	return this.http.post(`${this.base_url}/register`, body, options).map( (res) => this.setToken(res) );
+  }
+
+  setToken(res:any){
+  	let body = JSON.parse(res['_body']);
+  	if(body['success'] == true ){
+  		this.token = body['token'];
+  		localStorage.setItem('currentUser', JSON.stringify({
+  			email: body['user']['email'],
+  			token: this.token
+  		}));
+  	}
+  	return body;
+  }
 }

src/app/home/home.component.html

@@ -1,22 +1,36 @@
 <section class="main">
 	<div class="main-todo" *ngFor="let item of items">
-		<div class = "todos">
-			<h4 class = tasks-title>Todo App</h4>
-			<form #form="ngForm" (ngSubmit) = "addTodo(form.value.newTodo, item)">
-				<input name="newTodo" class="tasks-name" ngModel>
-				<button type="submit" [disabled]="!form.value.newTodo" class="tasks-button">Add task</button>
+		<div class="todos">
+			<h4 class="tasks-title">Todo App</h4>
+			<form #form="ngForm" (ngSubmit)="addTodo(form.value.newTodo, item)">
+				<input name="newTodo" class="tasks-name" ngModel />
+				<button
+					type="submit"
+					[disabled]="!form.value.newTodo"
+					class="tasks-button"
+				>
+					Add task
+				</button>
 			</form>
 			<ul class="tasks-list">
-				<li class = "tasks-items" *ngFor = "let todo of item.todos; let i = index">
-					<input type="checkbox" class="task-new" [(ngModel)]="todo.completed">
+				<li class="tasks-items" *ngFor="let todo of item.todos; let i = index">
+					<input
+						type="checkbox"
+						class="task-new"
+						[(ngModel)]="todo.completed"
+					/>
 					<div *ngIf="todo.isEditing; else elseBlock">
-						<input [ngClass] = "{'checked': todo.completed}" value={{todo.newTodo}} class="newtodo" 
-						[(ngModel)]="todo.newTodo">
+						<input
+							[ngClass]="{ checked: todo.completed }"
+							value="{{ todo.newTodo }}"
+							class="newtodo"
+							[(ngModel)]="todo.newTodo"
+						/>
 					</div>
 					<ng-template #elseBlock>
 						{{ todo.newTodo }}
 					</ng-template>
-					<span class="edit-icon" (click) = "editTodo(todo)">
+					<span class="edit-icon" (click)="editTodo(todo)">
 						<div *ngIf="todo.isEditing; else showSave">
 							<button class="tasks-button">
 								<i class="fa fa-save fa-fw"></i>
@@ -28,22 +42,28 @@ <h4 class = tasks-title>Todo App</h4>
 							</button>
 						</ng-template>
 					</span>
-					<span class="delete-icon" (click) = "deleteTodo(item,i)">
+					<span class="delete-icon" (click)="deleteTodo(item, i)">
 						<button class="tasks-button">
 							<i class="fa fa-trash-o fa-fw delete-icon"></i>
 						</button>
 					</span>
 				</li>
 			</ul>
 			<div class="delete-task">
-				<button type="submit" (click)="deleteTodoItems(item)" class="tasks-button">Delete tasks</button>
+				<button
+					type="submit"
+					(click)="deleteTodoItems(item)"
+					class="tasks-button"
+				>
+					Delete tasks
+				</button>
 			</div>
 		</div>
 	</div>
 	<div class="add-new">
-		<input name="todo-title" class="todo-title">
-		<button class="add-list" (click) = "addNewList()">
+		<input name="todo-title" class="todo-title" />
+		<button class="add-list" (click)="addNewList()">
 			<i class="fa fa-plus add-button"></i>
 		</button>
 	</div>
-	</section>
+</section>

src/app/login/login.component.ts

@@ -1,16 +1,12 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-
+import { Component, OnInit, OnDestroy } from "@angular/core";
 
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+	selector: "app-login",
+	templateUrl: "./login.component.html",
+	styleUrls: ["./login.component.scss"]
 })
 export class LoginComponent implements OnInit {
+	constructor() {}
 
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
+	ngOnInit() {}
+}