Merge pull request #2 from Val-gee/valentina

Split login and sign up portion of web application onto two different pages
Val-gee · Feb 17, 2024 · e7b40f6 · e7b40f6
2 parents 2b9cb3b + e972a3e
commit e7b40f6
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# 14 Challenge: The Tech Blog
+# The Tech Blog
 
 ## Description
 

diff --git a/controllers/homeRoutes.js b/controllers/homeRoutes.js
@@ -93,4 +93,15 @@ router.get('/login', async (req, res) => {
     res.render('login');
 });
 
+router.get('/signup', async (req, res) => {
+    console.log(`GET /signup`);
+
+    if (req.session.logged_in) {
+        res.redirect('/dashboard');
+        return;
+    }
+
+    res.render('signup');
+});
+
 module.exports = router;
diff --git a/public/js/login.js b/public/js/login.js
@@ -21,7 +21,7 @@ const loginFormHandler = async (event) => {
 
 const signupFormHandler = async (event) => {
     event.preventDefault();
-
+    
     const name = document.querySelector('#name-signup').value.trim();
     const email = document.querySelector('#email-signup').value.trim();
     const password = document.querySelector('#password-signup').value.trim();
@@ -41,6 +41,20 @@ const signupFormHandler = async (event) => {
     }
 };
 
+const signUpButtonChange = async(event) => {
+    event.preventDefault();
+
+    console.log('switched to signup page');
+
+    const response = await fetch(`/signup`);
+
+    if (response.ok) {
+        document.location.replace('/signup');
+    }
+};
+
+document.querySelector('.sign-up').addEventListener('click', signUpButtonChange);
+
 document.querySelector('.login-form').addEventListener('submit', loginFormHandler);
 
 document.querySelector('.signup-form').addEventListener('submit', signupFormHandler);
diff --git a/views/login.handlebars b/views/login.handlebars
@@ -1,6 +1,6 @@
-<div class="row">
-    <div class="col-md-6">
-        <h2>Login</h2>
+<div class="row justify-content-around">
+    <div class="col-md-4 border border-dark">
+        <h2 class="text-center">Login</h2>
         <form class="form login-form">
             <div class="form-group">
                 <label for="email-login">Email:</label>
@@ -10,28 +10,9 @@
                 <label for="password-login">Password:</label>
                 <input class="form-input" type="password" id="password-login" />
             </div>
-            <div class="form-group">
-                <button class="btn btn-primary" type="submit">Login</button>
-            </div>
-        </form>
-    </div>
-    <div class="col-md-6">
-        <h2>Sign up</h2>
-        <form class="form signup-form">
-            <div class="form-group">
-                <label for="name-signup">Name:</label>
-                <input class="form-input" type="text" id="name-signup" />
-            </div>
-            <div class="form-group">
-                <label for="email-signup">Email:</label>
-                <input class="form-input" type="text" id="email-signup" />
-            </div>
-            <div class="form-group">
-                <label for="password-signup">Password:</label>
-                <input class="form-input" type="password" id="password-signup" />
-            </div>
-            <div class="form-group">
-                <button class="btn btn-primary" type="submit">Sign up!</button>
+            <div class="row justify-content-center form-group">
+                <button class="btn btn-dark" type="submit">Login</button>
+                <button class="sign-up btn btn-dark" type="click">or Sign Up</button>
             </div>
         </form>
     </div>

diff --git a/views/signup.handlebars b/views/signup.handlebars
@@ -0,0 +1,24 @@
+<div class="row justify-content-around">
+    <div class="col-md-4 border border-dark">
+        <h2 class="text-center">Sign up</h2>
+        <form class="justify-content-center form signup-form">
+            <div class="form-group">
+                <label for="name-signup">Name:</label>
+                <input class="form-input" type="text" id="name-signup" />
+            </div>
+            <div class="form-group">
+                <label for="email-signup">Email:</label>
+                <input class="form-input" type="text" id="email-signup" />
+            </div>
+            <div class="form-group">
+                <label for="password-signup">Password:</label>
+                <input class="form-input" type="password" id="password-signup" />
+            </div>
+            <div class="form-group">
+                <button class="btn btn-dark" type="submit">Sign up!</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script src="/js/login.js"></script>