[Temp, Task] #43 basic login page, not yet used as middleware

Type-Style · Feb 16, 2024 · 6ebece8 · 6ebece8
1 parent d077414
commit 6ebece8
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 36 deletions.
diff --git a/httpdocs/css/login.css b/httpdocs/css/login.css
@@ -0,0 +1,20 @@
+form {
+	margin-inline: auto;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	max-width: 500px;
+	gap: 10px;
+}
+input, button {
+	flex-grow: 1;
+}
+textarea, h1 {
+	flex-basis: 100%;
+}
+textarea {
+	height: 50vh;
+}
+h1 {
+	text-align: center;
+}
diff --git a/httpdocs/login.html b/httpdocs/login.html
diff --git a/src/controller/read.ts b/src/controller/read.ts
@@ -2,33 +2,51 @@ import express, { Request, Response, NextFunction } from 'express';
 import * as file from '@src/scripts/file';
 import { create as createError } from '@src/middleware/error';
 import { validationResult, query } from 'express-validator';
+import logger from '@src/scripts/logger';
 
 const router = express.Router();
 
-router.get('/', 
-    [query('index').isInt().withMessage("not an integer")
+router.get('/',
+  [query('index').isInt().withMessage("not an integer")
     .isLength({ max: 3 }).withMessage("not in range")
     .toInt()],
-  async function getRead(req:Request, res:Response, next:NextFunction) {
-  const errors = validationResult(req);
-  if (!errors.isEmpty()) {
-    return createError(res, 400, JSON.stringify({errors: errors.array()}), next)
-  }
+  async function getRead(req: Request, res: Response, next: NextFunction) {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return createError(res, 400, JSON.stringify({ errors: errors.array() }), next)
+    }
 
-  const fileObj: File.Obj = file.getFile(res, next);
-  fileObj.content = await file.readAsJson(res, fileObj.path, next)
-  if (!fileObj.content || !Array.isArray(fileObj.content.entries)) {
-    return createError(res, undefined, `File corrupt: ${fileObj.path}`, next);
-  }
+    const fileObj: File.Obj = file.getFile(res, next);
+    fileObj.content = await file.readAsJson(res, fileObj.path, next)
+    if (!fileObj.content || !Array.isArray(fileObj.content.entries)) {
+      return createError(res, undefined, `File corrupt: ${fileObj.path}`, next);
+    }
 
-  let entries = fileObj.content.entries;
+    let entries = fileObj.content.entries;
 
-  if (req.query.index) {
-    entries = entries.slice(Number(req.query.index));
-  }
+    if (req.query.index) {
+      entries = entries.slice(Number(req.query.index));
+    }
 
-  res.json({entries});
+    res.json({ entries });
+  });
+
+
+
+// TODO will be converted to middleware
+// TODO write test for checking the limit on request body
+router.get("/login/", async function login(req: Request, res: Response) {
+  logger.log("login was called");
+  res.locals.text = "start";
+
+  res.render("login-form");
 });
 
+router.post("/login/", async function postLogin(req: Request, res: Response) {
+  logger.log("post login was called");
+  logger.log(req.body);
+  res.locals.text = "post recieved";
+  res.render("login-form");
+});
 
 export default router;
diff --git a/views/login-form.ejs b/views/login-form.ejs
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset='utf-8'>
+	<title>Login Form - Lorex</title>
+	<meta name='viewport' content='width=device-width, initial-scale=1'>
+	<link rel='stylesheet' type='text/css' href='/css/login.css'>
+</head>
+
+<body>
+	<form class="login" action="/read/login/" method="post">
+		<h1>Text: <%= locals.text %></h1>
+		<input name="user" class="login__input" placeholder="User name / Email">
+		<input name="password" type="password" class="login__input" placeholder="Password">
+		<button type="submit">Submit</button>
+		<textarea name="text"></textarea>
+	</form>
+</body>
+
+</html>