Login and dashboard routes/views

herberthk · Jun 19, 2020 · 707962c · 707962c
1 parent 5731cd1
commit 707962c
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -1,5 +1,8 @@
+const path = require('path')
 const express = require('express')
 const dotenv = require('dotenv')
+const morgan = require('morgan')
+const exphbs = require('express-handlebars')
 const connectDB = require('./config/db')
 
 // Load config
@@ -9,6 +12,27 @@ connectDB()
 
 const app = express()
 
+// Logging
+if (process.env.NODE_ENV === 'development') {
+ app.use(morgan('dev'))
+}
+
+// Handlebars
+app.engine(
+ '.hbs',
+ exphbs({
+ defaultLayout: 'main',
+ extname: '.hbs',
+ })
+)
+app.set('view engine', '.hbs')
+
+// Static folder
+app.use(express.static(path.join(__dirname, 'public')))
+
+// Routes
+app.use('/', require('./routes/index'))
+
 const PORT = process.env.PORT || 3000
 
 app.listen(

diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,22 @@
+p {
+ margin: 10px 0 !important;
+}
+
+.login-container {
+ width: 400px;
+ margin-top: 50px;
+ text-align: center;
+}
+
+.fa-small {
+ font-size: 16px !important;
+}
+
+.btn-float {
+ float: left;
+ margin-right: 10px;
+}
+
+.img-small {
+ width: 180px;
+}
diff --git a/routes/index.js b/routes/index.js
@@ -0,0 +1,18 @@
+const express = require('express')
+const router = express.Router()
+
+// @desc Login/Landing page
+// @route GET /
+router.get('/', (req, res) => {
+ res.render('login', {
+ layout: 'login',
+ })
+})
+
+// @desc Dashboard
+// @route GET /dashboard
+router.get('/dashboard', (req, res) => {
+ res.render('dashboard')
+})
+
+module.exports = router
diff --git a/views/dashboard.hbs b/views/dashboard.hbs
@@ -0,0 +1 @@
+<h1>Dashboard</h1>
diff --git a/views/layouts/login.hbs b/views/layouts/login.hbs
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
+ integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
+ <link rel="stylesheet" href="/css/style.css">
+ <title>StoryBooks Login</title>
+</head>
+
+<body>
+ <div class="container login-container">
+ <div class="card">
+ <div class="card-content">
+ {{{body}}}
+ </div>
+ </div>
+ </div>
+
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+</body>
+
+</html>
diff --git a/views/layouts/main.hbs b/views/layouts/main.hbs
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
+ integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
+ <link rel="stylesheet" href="/css/style.css">
+ <title>StoryBooks</title>
+</head>
+
+<body>
+ {{> _header}}
+ {{> _add_btn}}
+ <div class="container">
+ {{{body}}}
+ </div>
+
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.14.1/ckeditor.js"
+ integrity="sha256-bEIQpI72w9NJuIVhTLFUF2/8uxl0u5800r8ddViuv+o=" crossorigin="anonymous"></script>
+
+ <script>
+ M.Sidenav.init(document.querySelector('.sidenav'))
+ M.FormSelect.init(document.querySelector('#status'))
+
+ CKEDITOR.replace('body', {
+ plugins: 'wysiwygarea, toolbar, basicstyles, link'
+ })
+ </script>
+</body>
+
+</html>
diff --git a/views/login.hbs b/views/login.hbs
@@ -0,0 +1,10 @@
+<h3><i class="fas fa-book-reader"></i> StoryBooks</h3>
+<div class="section">
+ <p class="lead">Create public and private stories from your life</p>
+</div>
+<div class="divider"></div>
+<div class="section">
+ <a href="/auth/google" class="btn red darken-1">
+ <i class="fab fa-google left"></i> Log In With Google
+ </a>
+</div>
diff --git a/views/partials/_add_btn.hbs b/views/partials/_add_btn.hbs
@@ -0,0 +1,3 @@
+<div class="fixed-action-btn">
+ <a href="/stories/add" class="btn-floating btn-large waves-effect waves-light red"><i class="fas fa-plus"></i></a>
+</div>
diff --git a/views/partials/_header.hbs b/views/partials/_header.hbs
@@ -0,0 +1,12 @@
+<nav class="grey darken-3">
+ <div class="nav-wrapper container">
+
+ <a href="#!" class="brand-logo center">StoryBooks</a>
+ <a href="#" data-target="mobile-demo" class="sidenav-trigger show-on-large"><i class="fas fa-bars"></i></a>
+ <ul class="sidenav" id="mobile-demo">
+ <li><a href="/stories">Public Stories</a></li>
+ <li><a href="/dashboard">Dashboard</a></li>
+ <li><a href="/auth/logout">Logout</a></li>
+ </ul>
+ </div>
+</nav>