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

This commit is contained in:
QiTao 2020-02-07 23:36:39 -06:00
parent e5f3410b8b
commit b4d16d764e
5 changed files with 71 additions and 4 deletions

View File

@ -7,6 +7,9 @@ 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.
@ -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

View File

@ -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' ],
},
/*

60
app/views/login.pug Normal file
View File

@ -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

View File

@ -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.