Fixes #1 login interface

README.md_

@@ -1,3 +0,0 @@
-# LDAPManager
-
-

app.ts

@@ -9,7 +9,7 @@ import LDAPFactory from './src/ldapInterface';
 import { Session } from './src/Security';
 import Security from './src/Security';
 
-const debug = require('debug')('my express app');
+const debug = require('debug')('LDAPManager:http');
 const app = express();
 
 declare global {
@@ -76,7 +76,7 @@ app.use((err: any, req: any, res: any, next: any) => { // eslint-disable-line @t
     });
 });
 
-app.set('port', process.env.PORT || 3000);
+app.set('port', process.env.PORT || 8080);
 
 const server = app.listen(app.get('port'), function () {
     debug(`Express server listening on port ${(server.address() as AddressInfo).port}`);

public/stylesheets/main.css

@@ -11,6 +11,25 @@ a {
     background-color: #dbfffd;
 }
 
+.content.page-login .logo {
+    height: 33vh;
+    max-height: 200px;
+}
+
+.content.page-login > .row {
+    height: 100vh;
+    max-width: 340px;
+    margin: auto;
+}
+.content.page-login > .row > .col {
+    border: 1px solid var(--bs-border-color);
+    border-radius: calc(var(--bs-border-radius) - 1px);
+}
+.button-wrapper {
+    display: inline-flex;
+    justify-content: end;
+}
+
 #menuBar {
     display: inline-block;
     position: fixed;
@@ -66,4 +85,4 @@ label.LDAPAttribute > input {
 #ldifOutput {
     width: 100%;
     height: auto;
-}
+}

views/index.pug

@@ -1,11 +1,13 @@
 extends layout
 include ../templates/tree.pug
 
+block append scripts
+  script(src='/javascripts/tree.js', language='javascript')
+
 block content
     div(id="menuBar")
       div
         +treeroot(tree)
-        script(src='/javascripts/tree.js', language='javascript')
         script.
-          makeTree(document.querySelectorAll("#menuBar>div>ul.treeroot")[0]);
+          $(() => makeTree(document.querySelectorAll("#menuBar>div>ul.treeroot")[0]));
     iframe(id="page",name="page",src="home")

views/layout.pug

@@ -2,6 +2,12 @@ doctype html
 html
   head
     title= title
+    link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css', integrity='sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH', crossorigin='anonymous')
     link(rel='stylesheet', href='/stylesheets/main.css')
+    link(rel='icon', type='image/x-icon', href='/img/OIG3.png')
+    meta(name='viewport', content='width=device-width, initial-scale=1')
   body
-    block content
+    block scripts
+      script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js', integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz", crossorigin="anonymous")
+      script(src='https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js', integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs", crossorigin="anonymous")
+    block content

views/login.pug

@@ -1,10 +1,23 @@
 extends layout
 
 block content
-  h1= title
-  form(method='post')
-    if loginFail
-      p Login fail
-    input(type='text' name='username' value=previousUsername placeholder='Username' required)
-    input(type='password' name='password' placeholder='Password' required)
-    input(type='submit' value='Login')
+  div(class='page-wrapper')
+    div(class='content page-login container container-md')
+      div(class='row align-items-center')
+        div(class='col g-3')
+          form(method='post')
+            div(class='mb-3 text-center')
+              img(src='/img/OIG3.png' class='logo')
+              h1 LDAP Manager
+            if loginFail
+              p(class='alert alert-danger') Login fail
+            div(class='mb-3')
+              label(class='form-label' for='input-username') Username
+              input(class='form-control' type='text' name='username' id='input-username' value=previousUsername placeholder='' required)
+            div(class='mb-3')
+              label(class='form-label' for='input-password') Password
+              input(class='form-control' type='password' id='input-password' name='password' placeholder='' required)
+            div(class='mb-3 row')
+              div(class='col button-wrapper')
+                input(type='submit' class='btn btn-primary' value='Login')
+