Merge pull request #34 from Code-For-Humans-School/login-page

Updated the Login-page branch

server/app.js

@@ -22,8 +22,8 @@ app.use(express.static(path.join(__dirname, 'public')));
 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;

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",

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%);
 }

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;

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/[email protected]/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/[email protected]/dist/umd/popper.min.js')
+    script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js')

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

server/views/navbar.pug

@@ -0,0 +1,5 @@
+nav 
+  a(href='/') Home
+  a(href='/login') Login
+  a(href='/logout') Logout
+  a(href='/post') Post