Task #17 - Created login page added to routing and replaced name mentions with app_name token

app/controllers/Home.controller.js

@@ -7,12 +7,15 @@ const Controller = require('libflitter/controller/Controller')
  * are used as handlers for routes specified in the route files.
  */
 class Home extends Controller {
+    static get services(){
+        return [...super.services, 'configs']
+    }
 
     /*
      * Serve the main welcome page.
      */
     welcome(req, res){
-
+        
         /*
          * Return the welcome view.
          * The page() method is added by Flitter and passes some
@@ -20,6 +23,10 @@ class Home extends Controller {
          */
         return res.page('welcome', {user: req.user})
     }
+    async get_login(req, res){
+        const app_name = this.configs.get('app.name')
+        return res.page('login', {app_name})
+    }
 }
 
 module.exports = Home

app/routing/routers/index.routes.js

@@ -26,7 +26,6 @@ const index = {
      * handler's exec() method.
      */
     middleware: [
-        ['HomeLogger', {note: 'arguments can be specified as the second element in this array'}],
         // 'MiddlewareName', // Or without arguments
     ],
 
@@ -46,6 +45,7 @@ const index = {
         // Placeholder for auth dashboard. You'd replace this with
         // your own route protected by 'middleware::auth:UserOnly'
         '/dash': [ 'controller::Home.welcome' ],
+        '/login': [ 'middleware::auth:GuestOnly', 'controller::Home.get_login' ],
     },
 
     /*

app/views/login.pug

@@ -0,0 +1,60 @@
+html
+    head
+        title Flitter
+        meta(name="viewport" content="width=device-width, initial-scale=1")
+        link(rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous")
+        script(src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous")
+        script(src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous")
+        script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous")
+        script(src="https://kit.fontawesome.com/5043ba9cc5.js" crossorigin="anonymous")
+        style(type="text/css").
+            @import url('https://fonts.googleapis.com/css?family=Rajdhani');
+            html,
+            body {
+                background-color:#343a40;
+            }
+            #intro {
+                color: #cccccc;
+                text-align: center;
+            }
+            #login {
+                width: 50em;
+            }
+            .login-container {
+                display: grid;
+                align-items: center;
+                border: 4px solid #ccc;
+                padding: 0.01em 0.02em;
+                border-radius: .35rem;
+            }
+            .login-container div a {
+                width: 100%;
+            }
+            .icons {
+                font-size: 1.6em;
+                padding: 1.1em 1.1em 1.1em 1.1em;
+            }
+
+    body
+    .container#intro
+        h1 Hi, Welcome to #{app_name}. 
+        h2 Choose your login method.
+
+    .container#login
+        .login-container
+            div
+                a.btn.btn-light.btn-lg(href="/auth/github_oauth/login")
+                    i.icons.fab.fa-github
+                    span Login with GitHub
+            div
+                a.btn.btn-light.btn-lg(href="google.com")
+                    i.icons.fab.fa-google
+                    span Login with Google
+            div
+                a.btn.btn-light.btn-lg(href="microsoft.com")
+                    i.icons.fab.fa-microsoft
+                    span Login with Microsoft
+            div
+                a.btn.btn-light.btn-lg(href="microsoft.com")
+                    i.icons.fab.fa-apple
+                    span Login with Apple

app/views/welcome.pug

@@ -34,7 +34,7 @@ html
                 font-size: 24pt;
                 color: #00323d;
             }
-body
+    body
         .flitter-container
             img.flitter-image(src="/assets/flitter.png")
             a.flitter-name(href="https://flitter.garrettmills.dev/" target="_blank") powered by flitter

config/app.config.js

@@ -4,7 +4,7 @@ const app_config = {
      * The name of the application.
      * Used through-out the application as the proper display name.
      */
-    name: env("APP_NAME", "Flitter"),
+    name: env("APP_NAME", "unknown"),
 
     /*
      * URL of the application.