account page adjusted

Author: jb923

public/styles/delete-checkin.css

@@ -16,6 +16,7 @@ body {
   background-color: #ffffff;
   margin-top: 6em;
   height: 320px;
+  width: 650px;
   border-radius: 6px;
   padding: 1em;
   box-sizing: border-box;

public/styles/settings.css

@@ -125,7 +125,9 @@ button:hover {
 }
 
 .settings-section#password-section {
-  display: inline-block;
+  /* display: inline-block; */
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   margin-left: 16px;
 }
 
@@ -135,6 +137,7 @@ button:hover {
  font-size: 18px;
  color: #000000;
  font-weight: 600;
+ margin-bottom: 60px;
 }
 
 .password-form{
@@ -144,7 +147,7 @@ button:hover {
 }
 
 .form-group#password {
-  margin-left: 30px;
+  margin-left: 24px;
 }
 
 .form-group#password input {
@@ -157,14 +160,13 @@ button:hover {
 }
 
 .form-group#new-password input {
-  width: 250px;
+  width: 236px;
   border: 1px solid #e2e2e2;
 }
 
-/* .btn.password-btn {
-  display: flex;
-  justify-content: center;
-} */
+.btn__password-container {
+  margin-right: 90px;
+}
 
 .settings-section#delete-section {
   display: inline-block;
@@ -179,7 +181,7 @@ button:hover {
   font-weight: 600;
  }
 
-h4.delete-account {
+h3.delete-account {
   margin-left: 16px;
 }
 
@@ -192,10 +194,11 @@ h4.delete-account {
   display: flex;
   flex-wrap: wrap;
   padding: 1em;
+  margin-left: 165px;
 }
 
+
 #delete-password.form-control {
-display: inline-block;
 width: 250px;
 background-color: #ffffff;
 border: 1px solid #e2e2e2;

utils/demo.js

@@ -0,0 +1,56 @@
+// const logInForm = document.querySelector(".log-in-form");
+// logInForm.addEventListener("submit", async (e) => {
+//   e.preventDefault();
+//   const formData = new FormData(logInForm);
+//   const email = formData.get("email");
+//   const password = formData.get("password");
+//   const body = { email, password };
+//   try {
+//     const res = await fetch(`${process.env.BACKEND_URL}/users/token`, {
+//       method: "POST",
+//       body: JSON.stringify(body),
+//       headers: {
+//         "Content-Type": "application/json",
+//       },
+//     });
+//     if (!res.ok) {
+//       throw res;
+//     }
+//     const {
+//       token,
+//       user: { id },
+//     } = await res.json();
+
+//     localStorage.setItem("TAPPDIN_ACCESS_TOKEN", token);
+//     localStorage.setItem("TAPPDIN_CURRENT_USER_ID", id);
+
+//     window.location.href = "/";
+//   } catch (err) {
+//     if (err.status >= 400 && err.status < 600) {
+//       const errorJSON = await err.json();
+//       const errorsContainer = document.querySelector(".errors-container");
+//       let errorsHtml = [
+//         `
+//         <div class="alert alert-danger">
+//             Something went wrong. Please try again.
+//         </div>
+//       `,
+//       ];
+//       const { errors } = errorJSON;
+//       if (errors && Array.isArray(errors)) {
+//         errorsHtml = errors.map(
+//           (message) => `
+//           <div class="alert alert-danger">
+//               ${message}
+//           </div>
+//         `
+//         );
+//       }
+//       errorsContainer.innerHTML = errorsHtml.join("");
+//     } else {
+//       alert(
+//         "Something went wrong. Please check your internet connection and try again!"
+//       );
+//     }
+//   }
+// });

views/checkin.pug

@@ -1,22 +1,21 @@
-//- 
+//-
 mixin checkin(checkin)
     .checkin
-        head    
+        head
             link(rel="stylesheet" type="text/css" href="/styles/checkin.css")
         img.checkin__profile-picture(src=checkin.User.photo)
         .checkin__main
             p #[a(href=`/users/${checkin.User.id}`) #{checkin.User.firstName} #{checkin.User.lastName}] drank #[a(href=`/beers/${checkin.Beer.id}`) #{checkin.Beer.name}] from #[a(href=`/breweries/${checkin.Beer.Brewery.id}`) #{checkin.Beer.Brewery.name}]
             .checkin__rating
-                p Rating: 
+                p Rating:
                     span.checkin__rating-val=checkin.displayRating
                         //-created from the script
             if checkin.comment
                 p=checkin.comment
-            else 
+            else
                 p No comment
             div.checkin__other-info
                 span.checkin__date=checkin.createdAt
-                if checkin.isSessionUser 
-                    span.checkin__delete #[a(href=`/checkins/${checkin.id}/delete`) Delete checkin]
+                if checkin.isSessionUser
+                    span.checkin__delete #[a(href=`/checkins/${checkin.id}/delete`) Delete check-in]
         img.checkin__profile-picture(src=checkin.Beer.Brewery.image)
-        

views/log-in.pug

@@ -12,9 +12,9 @@ block content
           p.log-in__quote Drink Responsibly
       form(class="log-in-form" method="post" action="/users/log-in")
         include form-elements.pug
-        button.btn.btn-primary(type='submit') Log In
-        button.btn.btn-demo(type='submit') Demo
+        button.btn.btn-primary#login(type='submit') Log In
+        button.btn.btn-primary#demo(type='submit') Demo
       a(href='/sign-up') Don't have an account? Sign up here.
-  //- script(src="js/log-in.js")
+  //- script(src="js/demo.js")
 
   //- include footer

views/settings.pug

@@ -48,7 +48,8 @@ block content
                 .form-group#new-password
                   label(for='new-password') New Password
                   input#new-password.form-control(type="password" name='newPassword')
-                button.btn.password-btn(type="submit") Change Password
+                .btn__password-container
+                  button.btn.password-btn(type="submit") Change Password
             //- .settings-section#social-section
             //-   p.social__section-title Social Connections
             //-   ul.social-connect
@@ -69,4 +70,5 @@ block content
                 .form-group#delete
                   label(for='confirmDeletePassword') Confirm Password
                   input#delete-password.form-control(type='password' name='confirmDeletePassword')
-                button.btn.delete-account-btn Delete Account
+                .btn__delete-container
+                  button.btn.delete-account-btn Delete Account