Registeration app

src/app/app.module.ts

@@ -4,20 +4,22 @@ import { RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { LoginComponent } from './login/login.component';
-import { AdminComponent } from './admin/admin.component';
 import { HomeComponent } from './home/home.component'
 import { AuthService } from './auth.service'
 import { UserService } from './user.service'
 import { AuthGuard } from './auth.guard';
-import { LogoutComponent } from './logout/logout.component'
+import { LogoutComponent } from './logout/logout.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { RegisterComponent } from './register/register.component'
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
-    AdminComponent,
     HomeComponent,
-    LogoutComponent
+    LogoutComponent,
+    DashboardComponent,
+    RegisterComponent
   ],
   imports: [
     BrowserModule,
@@ -32,10 +34,14 @@ import { LogoutComponent } from './logout/logout.component'
         component: LogoutComponent
       },
       {
-        path: 'admin',
-        component: AdminComponent,
+        path: 'dashboard',
+        component: DashboardComponent,
         canActivate: [AuthGuard]
       },
+      {
+        path: 'register',
+        component: RegisterComponent
+      },
       {
         path: '',
         component: HomeComponent

src/app/auth.service.ts

@@ -6,6 +6,11 @@ interface myData {
   message: string
 }
 
+interface registerResponse {
+  success: boolean,
+  message: string
+}
+
 @Injectable()
 export class AuthService {
 
@@ -21,10 +26,17 @@ export class AuthService {
     return this.loggedInStatus
   }
 
-  getUserDetails(username, password) {
+  getUserDetails(email, password) {
     // post these details to API server return user info if correct
-    return this.http.post<myData>('/api/auth.php', {
-      username,
+    return this.http.post<myData>('/api/login', {
+      email,
+      password
+    })
+  }
+
+  registerUser(email, password) {
+    return this.http.post<registerResponse>('/api/register', {
+      email,
       password
     })
   }

src/app/dashboard/dashboard.component.html

@@ -0,0 +1,8 @@
+<div id="message">
+    <p>{{quote}} by {{email}} </p>
+    <a routerLink="/logout" class="button">Logout</a>
+    <div id="controls">
+        <input type="text" value="{{quote}}" id="myQuote">
+        <input type="button" value="Update Quote" (click)="updateQuote($event)">
+    </div>
+</div>

src/app/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { UserService } from '../user.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.css']
+})
+export class DashboardComponent implements OnInit {
+
+  quote = "Loading your personal quote"
+  email = "Getting your email..."
+
+  constructor(private user: UserService, private router: Router) { }
+
+  ngOnInit() {
+    this.user.getData().subscribe(data => {
+      if(data.status) {
+        this.quote = data.quote
+        this.email = data.email
+      } else {
+        this.router.navigate(['logout'])
+      }
+    })
+  }
+
+  updateQuote(event) {
+    const value = event.target.parentNode.querySelector('#myQuote').value
+    this.user.updateQuote(value).subscribe(data => {
+      if(data.success) {
+        alert("Your quote was updated")
+      } else {
+        alert("Some problem")
+      }
+    })
+  }
+
+}

src/app/home/home.component.html

@@ -1,5 +1,6 @@
 <h1>World's best app</h1>
 <div id="buttons">
   <a routerLink="/login" class="button">Login</a>
-  <a routerLink="/admin" class="button">Go to admin</a>
+  <a routerLink="/register" class="button">Register</a>
+  <a routerLink="/dashboard" class="button">Dashboard</a>
 </div>

src/app/login/login.component.ts

@@ -23,7 +23,7 @@ export class LoginComponent implements OnInit {
 
     this.Auth.getUserDetails(username, password).subscribe(data => {
       if(data.success) {
-        this.router.navigate(['admin'])
+        this.router.navigate(['dashboard'])
         this.Auth.setLoggedIn(true)
       } else {
         window.alert(data.message)

src/app/register/register.component.css

@@ -0,0 +1,35 @@
+form {
+    display: flex;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items:center;
+    padding: 20px;
+    background: #eee;
+    border-radius: 20px;
+}
+
+input#username, input#password, input#cpassword {
+    outline: 0;
+    font-size: 20px;
+    padding: 5px 10px;
+    margin: 5px;
+    min-width: 300px;
+}
+
+button#submit {
+    margin: 20px;
+    padding: 20px;
+    border-radius: 10px;
+    font-size: 20px;
+    cursor: pointer;
+}

src/app/register/register.component.html

@@ -0,0 +1,17 @@
+<form (submit)="registerUser($event)">
+  <div class="container">
+    <h2>Register Here</h2>
+  <div>
+    <input type="text" autocomplete="off" placeholder="Username" id="username">
+  </div>
+  <div>
+    <input type="password" autocomplete="off" placeholder="Password" id="password">
+  </div>
+  <div>
+    <input type="password" autocomplete="off" placeholder="Confirm Password" id="cpassword">
+  </div>
+  <div>
+    <button type="submit" id="submit">Submit</button>
+  </div>
+</div>
+</form>

src/app/admin/admin.component.spec.ts → src/app/register/register.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AdminComponent } from './admin.component';
+import { RegisterComponent } from './register.component';
 
-describe('AdminComponent', () => {
-  let component: AdminComponent;
-  let fixture: ComponentFixture<AdminComponent>;
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AdminComponent ]
+      declarations: [ RegisterComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AdminComponent);
+    fixture = TestBed.createComponent(RegisterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/register/register.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../auth.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.css']
+})
+export class RegisterComponent implements OnInit {
+
+  constructor(private auth: AuthService, private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  registerUser(event) {
+    event.preventDefault()
+    const errors = []
+    const target = event.target
+    const username = target.querySelector('#username').value
+    const password = target.querySelector('#password').value
+    const cpassword = target.querySelector('#cpassword').value
+
+    if(password != cpassword) {
+      errors.push("Passwords do not match")
+    }
+
+    // more validation
+
+    if(errors.length === 0) {
+      this.auth.registerUser(username, password).subscribe(data => {
+        console.log(data)
+        if(data.success) {
+          this.router.navigate(['dashboard'])
+        }
+      })
+    }
+    console.log(username, password)
+  }
+
+}

src/app/user.service.ts

@@ -3,14 +3,19 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 
 interface myData {
-  message: string,
-  success: boolean
+  email: string,
+  status: boolean,
+  quote: string
 }
 
 interface isLoggedIn {
   status: boolean
 }
 
+interface quoteStatus {
+  success: boolean
+}
+
 interface logoutStatus {
   success: boolean
 }
@@ -19,16 +24,22 @@ export class UserService {
 
   constructor(private http: HttpClient) { }
 
-  getSomeData() {
-    return this.http.get<myData>('/api/database.php')
+  getData() {
+    return this.http.get<myData>('/api/data')
+  }
+
+  updateQuote(value) {
+    return this.http.post<quoteStatus>('/api/quote', {
+      value
+    })
   }
 
   isLoggedIn(): Observable<isLoggedIn> {
-    return this.http.get<isLoggedIn>('/api/isloggedin.php')
+    return this.http.get<isLoggedIn>('/api/isloggedin')
   }
 
   logout() {
-    return this.http.get<logoutStatus>('/api/logout.php')
+    return this.http.get<logoutStatus>('/api/logout')
   }
 
 }