From b46209f9fd020893fd2f4dfad31c5f76704605d9 Mon Sep 17 00:00:00 2001
From: Jonny Ngo Luong <jonnynl@stud.ntnu.no>
Date: Sat, 20 Feb 2021 23:50:29 +0100
Subject: [PATCH] feat: added user login form, request and endpoint (#8)
---
.../user-login-form.component.html | 12 ++++-
.../user-login-form.component.ts | 52 ++++++++++++++++++-
.../user-registration-form.component.ts | 2 +-
client/src/app/users/user.service.ts | 33 +++++++++++-
.../src/controllers/userController/index.ts | 17 ++++--
5 files changed, 108 insertions(+), 8 deletions(-)
diff --git a/client/src/app/users/user-login-form/user-login-form.component.html b/client/src/app/users/user-login-form/user-login-form.component.html
index 0df1f07..eef16a7 100644
--- a/client/src/app/users/user-login-form/user-login-form.component.html
+++ b/client/src/app/users/user-login-form/user-login-form.component.html
@@ -1 +1,11 @@
-<p>user-login-form works!</p>
+<div class="loginForm">
+ <h3>Login</h3>
+
+ <app-text-input [(inputModel)]="username" label="Brukernavn" (blur)="checkForm()"></app-text-input>
+
+ <app-text-input [(inputModel)]="password" label="Passord" (blur)="checkForm()"></app-text-input>
+
+ <p>{{statusMessage}}</p>
+
+ <app-button (click)="loginUser()" text="Login"></app-button>
+</div>
diff --git a/client/src/app/users/user-login-form/user-login-form.component.ts b/client/src/app/users/user-login-form/user-login-form.component.ts
index 1176557..24057cb 100644
--- a/client/src/app/users/user-login-form/user-login-form.component.ts
+++ b/client/src/app/users/user-login-form/user-login-form.component.ts
@@ -1,4 +1,7 @@
import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { User } from 'src/app/models/user.model';
+import { UserService } from '../user.service';
@Component({
selector: 'app-user-login-form',
@@ -6,10 +9,57 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./user-login-form.component.scss']
})
export class UserLoginFormComponent implements OnInit {
+ username: string = "";
+ password: string = "";
- constructor() { }
+ statusMessage: string = "";
+
+ constructor(private userService: UserService, private router: Router) { }
ngOnInit(): void {
}
+ /**
+ * Validates form.
+ */
+ checkForm(): boolean {
+ if (this.username == "") {
+ this.setStatusMessage("Brukernavn kan ikke være tom");
+ return false;
+ }
+ else if (this.password == "") {
+ this.setStatusMessage("Passordet kan ikke være tom");
+ return false;
+ }
+
+ this.setStatusMessage("");
+ return true;
+ }
+
+ /**
+ * Login the user if it is valid.
+ */
+ loginUser() {
+ if (this.checkForm()) {
+ const request = {
+ username: this.username,
+ password: this.password,
+ };
+
+ // Adds user to database and changes page afterwards
+ this.userService.login(request).then(status => {
+ console.log("User login: " + JSON.stringify(status));
+ this.router.navigateByUrl("/");
+ }).catch(error => {
+ console.log("Error adding user: " + error);
+ });
+ }
+ }
+
+ /**
+ * Sets a status message.
+ */
+ setStatusMessage(message: string) {
+ this.statusMessage = message;
+ }
}
diff --git a/client/src/app/users/user-registration-form/user-registration-form.component.ts b/client/src/app/users/user-registration-form/user-registration-form.component.ts
index 2774920..ac3c25c 100644
--- a/client/src/app/users/user-registration-form/user-registration-form.component.ts
+++ b/client/src/app/users/user-registration-form/user-registration-form.component.ts
@@ -54,7 +54,7 @@ export class UserRegistrationFormComponent implements OnInit {
// Adds user to database and changes page afterwards
this.userService.addUser(newUser).then(status => {
- console.log("User was added: " + status);
+ console.log("User was added: " + JSON.stringify(status));
this.router.navigateByUrl("/");
}).catch(error => {
console.log("Error adding user: " + error);
diff --git a/client/src/app/users/user.service.ts b/client/src/app/users/user.service.ts
index 2767961..d5ad7a4 100644
--- a/client/src/app/users/user.service.ts
+++ b/client/src/app/users/user.service.ts
@@ -2,15 +2,44 @@ import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { User } from '../models/user.model';
+interface IUserLogin {
+ username: string;
+ password: string;
+}
+
@Injectable({
providedIn: 'root'
})
export class UserService {
-
userUrl = "api/user/"
+ loginUrl = "api/user/login"
constructor(private http: HttpClient) { }
+ /**
+ * Get request of user from database on login request.
+ */
+ login(body: IUserLogin): Promise<string> {
+ return new Promise<string>(
+ (resolve, reject) => {
+ this.login_user(body).subscribe((data: any) => {
+ try {
+ resolve(data.data);
+ } catch (err: any) {
+ reject(err);
+ }
+ },
+ (err: any) => {
+ console.log(err.message);
+ reject(err);
+ });
+ }
+ );
+ }
+
+ private login_user(body: IUserLogin) {
+ return this.http.post(this.loginUrl, body);
+ }
/**
* Adds user to database.
*/
@@ -19,7 +48,7 @@ export class UserService {
(resolve, reject) => {
this.add_user(user).subscribe((data: any) => {
try {
- resolve(data.status);
+ resolve(data.data);
} catch (err: any) {
reject(err);
}
diff --git a/server/src/controllers/userController/index.ts b/server/src/controllers/userController/index.ts
index 8bc393a..f45e65b 100644
--- a/server/src/controllers/userController/index.ts
+++ b/server/src/controllers/userController/index.ts
@@ -27,24 +27,35 @@ router.route('/').post(async (request: Request, response: Response) => {
// Get all users `/api/user/`
router.route('/').get(async (_: Request, response: Response) => {
try {
- const input = "SELECT * FROM user;"
+ const input = "SELECT userId, username, email, create_time FROM user;"
response.status(200).json(await query(input,""));
} catch (error) {
response.status(400).send("Bad Request");
}
});
-// Get post with id `/api/user/:id`
+// Get user with id `/api/user/:id`
router.route('/:userId').get(async (request: Request, response: Response) => {
const userId = request.params.userId;
try {
- const input = `SELECT * FROM user WHERE userId=?;`
+ const input = `SELECT userId, username, email, create_time FROM user WHERE userId=?;`
response.status(200).json(await query(input,[userId]));
} catch (error) {
response.status(400).send("Bad Request");
}
});
+// Get user with username and password `/api/user/`
+router.route('/login').post(async (request: Request, response: Response) => {
+ const {username, password} = request.body;
+ try {
+ const input = "SELECT userId, username, email, create_time FROM user WHERE username=? AND password=?;"
+ response.status(200).json(await query(input,[username, password]));
+ } catch (error) {
+ response.status(400).send("Bad Request");
+ }
+});
+
/* ============================= UPDATE ============================= */
// Update user from id `/api/user/:id`
router.route('/:userId').put(async (request: Request, response: Response) => {
--
GitLab