From fa68e2a9fe8af45a06aafc04c8fa557cca787b49 Mon Sep 17 00:00:00 2001 From: colinjcason Date: Wed, 26 Jun 2024 10:18:32 -0700 Subject: [PATCH 1/4] created login page at route /login using bootstrap --- server/app.js | 5 +++++ server/package-lock.json | 29 +++++++++++++++++++++++++++++ server/package.json | 1 + server/public/stylesheets/style.css | 7 ++++--- server/routes/index.js | 4 ++-- server/views/layout.pug | 10 +++++++++- server/views/login.pug | 16 ++++++++++++++++ server/views/navbar.pug | 5 +++++ 8 files changed, 71 insertions(+), 6 deletions(-) create mode 100644 server/views/login.pug create mode 100644 server/views/navbar.pug diff --git a/server/app.js b/server/app.js index dc39bfc..353d1e7 100644 --- a/server/app.js +++ b/server/app.js @@ -22,6 +22,11 @@ app.get('/api', (req, res) => { console.log(req.path); res.json({ message: 'Hello from server!' }); }); + +app.get('/login', (req, res) => { + res.render('login', { title: 'Login' }); +}); + app.use('/', indexRouter); app.use('/users', usersRouter); diff --git a/server/package-lock.json b/server/package-lock.json index d68d563..af98458 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "axios": "^1.7.2", + "bootstrap": "^5.3.3", "cookie-parser": "~1.4.4", "cors": "^2.8.5", "debug": "~2.6.9", @@ -61,6 +62,16 @@ "node": ">=6.9.0" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@types/node": { "version": "18.19.39", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.39.tgz", @@ -224,6 +235,24 @@ "node": ">= 0.8" } }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", diff --git a/server/package.json b/server/package.json index 1736653..2a1ed07 100644 --- a/server/package.json +++ b/server/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "axios": "^1.7.2", + "bootstrap": "^5.3.3", "cookie-parser": "~1.4.4", "cors": "^2.8.5", "debug": "~2.6.9", diff --git a/server/public/stylesheets/style.css b/server/public/stylesheets/style.css index 9453385..daeb1f7 100644 --- a/server/public/stylesheets/style.css +++ b/server/public/stylesheets/style.css @@ -1,8 +1,9 @@ body { - padding: 50px; + margin: 0; + padding: 0; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } -a { - color: #00B7FF; +.login-container { + background: linear-gradient(90deg, rgb(123, 91, 199) 0%, rgb(234, 56, 141) 100%); } diff --git a/server/routes/index.js b/server/routes/index.js index 9e5e590..025682a 100644 --- a/server/routes/index.js +++ b/server/routes/index.js @@ -2,10 +2,10 @@ var express = require('express'); var router = express.Router(); var axios = require('axios'); require('dotenv').config(); -var OpenAI = require('openai'); +// var OpenAI = require('openai'); // const CHATGPT_API_KEY = process.env.CHATGPT_API_KEY; -const openai = new OpenAI(); +// const openai = new OpenAI(); /* GET home page. */ router.get('/', function(req, res, next) { diff --git a/server/views/layout.pug b/server/views/layout.pug index 15af079..41fd738 100644 --- a/server/views/layout.pug +++ b/server/views/layout.pug @@ -1,7 +1,15 @@ doctype html html head + meta(name='viewport', content='width=device-width, initial-scale=1') title= title - link(rel='stylesheet', href='/stylesheets/style.css') + link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous") + link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css') + link(rel='stylesheet' href='/stylesheets/style.css') body + block content + + script(src='https://code.jquery.com/jquery-3.5.1.slim.min.js') + script(src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js') + script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js') \ No newline at end of file diff --git a/server/views/login.pug b/server/views/login.pug new file mode 100644 index 0000000..250bcb0 --- /dev/null +++ b/server/views/login.pug @@ -0,0 +1,16 @@ +extends layout +block content + + .login-container.vh-100.d-flex.align-items-center.justify-content-center + .card.text-center.bg-dark.text-white.shadow-lg(style="width: 22rem; border-radius: 1rem;") + .card-body.p-5 + h2.fw-bold.mb-2.text-uppercase Login + p.text-white-50.mb-5 Please log in using one of the following options! + + .d-flex.flex-column.align-items-center + button.btn.btn-outline-light.btn-lg.mb-3.w-100(type='button' onclick="window.location.href='/auth/github'") + i.fab.fa-github.fa-lg(style='margin-right: 8px') + | Login with Github + button.btn.btn-outline-light.btn-lg.w-100(type='button' onclick="window.location.href='/auth/linkedin'") + i.fab.fa-linkedin.fa-lg(style='margin-right: 8px') + | Login with Linkedin \ No newline at end of file diff --git a/server/views/navbar.pug b/server/views/navbar.pug new file mode 100644 index 0000000..7ba62b5 --- /dev/null +++ b/server/views/navbar.pug @@ -0,0 +1,5 @@ +nav + a(href='/') Home + a(href='/login') Login + a(href='/logout') Logout + a(href='/post') Post \ No newline at end of file From e50bfe9278dbb6b8ce24f30c925929bc76c0575b Mon Sep 17 00:00:00 2001 From: Roger Shi Date: Wed, 10 Jul 2024 13:29:11 +0800 Subject: [PATCH 2/4] Update app.js --- server/app.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/server/app.js b/server/app.js index 353d1e7..9be5dbc 100644 --- a/server/app.js +++ b/server/app.js @@ -23,15 +23,11 @@ app.get('/api', (req, res) => { res.json({ message: 'Hello from server!' }); }); -app.get('/login', (req, res) => { - res.render('login', { title: 'Login' }); -}); - app.use('/', indexRouter); app.use('/users', usersRouter); - app.listen(port, () => { - console.log(`Server is running on port ${port}`); - }); +app.listen(port, () => { + console.log(`Server is running on port ${port}`); +}); module.exports = app; From e390de8166a51bb0a7e3095e8786df6aaf069a45 Mon Sep 17 00:00:00 2001 From: Roger Shi Date: Wed, 10 Jul 2024 13:31:23 +0800 Subject: [PATCH 3/4] Update users.js --- server/routes/users.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/server/routes/users.js b/server/routes/users.js index 623e430..4418614 100644 --- a/server/routes/users.js +++ b/server/routes/users.js @@ -6,4 +6,8 @@ router.get('/', function(req, res, next) { res.send('respond with a resource'); }); +router.get('/login', (req, res) => { + res.render('login', { title: 'Login' }); +}); + module.exports = router; From b212cee6074d4f25363302ac75e3770c753b10b5 Mon Sep 17 00:00:00 2001 From: Roger Shi Date: Wed, 10 Jul 2024 13:33:24 +0800 Subject: [PATCH 4/4] Update index.js --- server/routes/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server/routes/index.js b/server/routes/index.js index 025682a..9e5e590 100644 --- a/server/routes/index.js +++ b/server/routes/index.js @@ -2,10 +2,10 @@ var express = require('express'); var router = express.Router(); var axios = require('axios'); require('dotenv').config(); -// var OpenAI = require('openai'); +var OpenAI = require('openai'); // const CHATGPT_API_KEY = process.env.CHATGPT_API_KEY; -// const openai = new OpenAI(); +const openai = new OpenAI(); /* GET home page. */ router.get('/', function(req, res, next) {