kylejava · kylejava · Feb 26, 2022 · Feb 26, 2022 · Feb 26, 2022 · Feb 26, 2022
diff --git a/static/css/login-style.css b/static/css/login-style.css
@@ -0,0 +1,133 @@
+
+
+
+body {
+  --color-primary: #008601;
+  --color-primary-dark: #006400;
+  --color-secondary: #252c6a;
+  --color-error: #cc3333;
+  --color-success: #4bb544;
+  --border-radius: 4px;
+
+  margin: 0;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  background: #FFFFFF;
+  background-size: cover;
+}
+
+.container {
+  width: 400px;
+  max-width: 400px;
+  margin: 1rem;
+  padding: 2rem;
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
+  border-radius: var(--border-radius);
+  background: #ffffff;
+}
+
+.conatiner,
+.form__input,
+.form__button {
+  font: 500 1rem 'Quicksand', sans-serif;
+}
+
+.form--hidden {
+  display: none;
+}
+
+.form > *:first-child {
+  margin-top: 0;
+}
+
+.form > *:last-child {
+  margin-bottom: 0;
+}
+
+.form__title {
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.form__message {
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.form__message--success {
+  color: var(--color-success);
+}
+
+.form__message--error {
+  color: var(--color-error);
+}
+
+.form__input-group {
+  margin-bottom: 1rem;
+}
+
+.form__input {
+  display: block;
+  width: 100%;
+  padding: 0.75rem;
+  box-sizing: border-box;
+  border-radius: var(--border-radius);
+  border: 1px solid #dddddd;
+  outline: none;
+  background: #eeeeee;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.form__input:focus {
+  border-color: var(--color-primary);
+  background: #ffffff;
+}
+
+.form__input--error {
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+.form__input-error-message {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--color-error);
+}
+
+.form__button {
+  width: 100%;
+  padding: 1rem 2rem;
+  font-weight: bold;
+  font-size: 1.1rem;
+  color: #ffffff;
+  border: none;
+  border-radius: var(--border-radius);
+  outline: none;
+  cursor: pointer;
+  background: var(--color-primary);
+}
+
+.form__button:hover {
+  background: var(--color-primary-dark);
+}
+
+.form__button:active {
+  transform: scale(0.98);
+}
+
+.form__text {
+  text-align: center;
+}
+
+.form__link {
+  color: var(--color-secondary);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.form__link:hover {
+  text-decoration: underline;
+}
diff --git a/static/src/auth.js b/static/src/auth.js
@@ -0,0 +1,13 @@
+
+
+const firebaseConfig = {
+    apiKey: "AIzaSyC2SY3gkNRr9quEjFwdbW1oJ_Ucd_fwiCo",
+    authDomain: "devjam-daf50.firebaseapp.com",
+    projectId: "devjam-daf50",
+    storageBucket: "devjam-daf50.appspot.com",
+    messagingSenderId: "381014972193",
+    appId: "1:381014972193:web:38290d870f32a681a95060",
+    measurementId: "G-2GS3KH99EY"
+  };
+
+firebase.initializeApp(config);
diff --git a/templates/createAccount.html b/templates/createAccount.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <title>Login / Sign Up Form</title>
+    <link rel="stylesheet" href="/static/css/login-style.css">
+  </head>
+  <body>
+    <!-- Navbar starts here -->
+    <nav id="navbar" class="navbar navbar-expand-lg">
+      <div class="container-fluid">
+        <div class="display-6" id="name">
+          Save My Wallet
+        </div>
+          <span class="navbar-toggler-icon"></span>
+      </div>
+    </nav>
+    <div class="container">
+      <form class="form" id="createAccount">
+        <h1 class="form__title">Create Account</h1>
+        <div class="form__message form__message--error"></div>
+        <div class="form__input-group">
+          <input type="text" class="form__input" autofocus placeholder="Email Address">
+          <div class="form__input-error-message"></div>
+        </div>
+        <div class="form__input-group">
+          <input type="password" class="form__input" autofocus placeholder="Password">
+          <div class="form__input-error-message"></div>
+        </div>
+        <div class="form__input-group">
+          <input type="password" class="form__input" autofocus placeholder="Confirm password">
+          <div class="form__input-error-message"></div>
+        </div>
+        <button class="form__button" type="submit">Continue</button>
+        <p class="form__text">
+          <a class="form__link" href="/templates/login.html" id="linkLogin">Already have an account? Sign in</a>
+        </p>
+      </form>
+
+    </div>
+      <script src="./login.js"></script>
+
+  </body>
+</html>
diff --git a/templates/index.html b/templates/index.html
@@ -19,8 +19,8 @@
         </div>
           <span class="navbar-toggler-icon"></span>
         <div class="collapse navbar-collapse" id="navbarNav">
-          <a id="loginbutton" class="btn btn-secondary" href="#" role="button">Login</a>
-          <a id="signupbutton" class="btn btn-secondary" href="#" role="button">Signup</a>
+          <a id="loginbutton" class="btn btn-secondary" href="/templates/login.html" role="button">Login</a>
+          <a id="signupbutton" class="btn btn-secondary" href="/templates/createAccount.html" role="button">Signup</a>
         </div>
       </div>
     </nav>

diff --git a/templates/login.html b/templates/login.html
@@ -8,8 +8,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <title>Login / Sign Up Form</title>
-    <link rel="stylesheet"href="{{ url_for('static', filename='stylesheets/login-style.css') }}">
 
+    <link rel="stylesheet"href="{{ url_for('static', filename='stylesheets/login-style.css') }}">
   </head>
   <body>
     <!-- Navbar starts here -->
@@ -24,7 +24,9 @@
     <div class="container">
       <form class="form" id="login">
         <h1 class="form__title">Login</h1>
+
         <div class="form__message form__message--error">Inccorect username/password combination.</div>
+
         <div class="form__input-group">
           <input type="text" class="form__input" autofocus placeholder="Email">
           <div class="form__input-error-message"></div>
@@ -33,14 +35,43 @@ <h1 class="form__title">Login</h1>
           <input type="password" class="form__input" autofocus placeholder="Password">
           <div class="form__input-error-message"></div>
         </div>
+
         <button class="form_button" type="submit">Continue</button>
+
         <p class="form__text">
           <a href="#" class="form__link">Forgot your password?</a>
         </p>
         <p class="form__text">
+
+          <a href="/templates/createAccount.html" class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
+        </p>
+      </form>
+      <!-- <form class="form form--hidden" id="createAccount">
+      <h1 class="form__title">Create Account</h1>
+      <div class="form__message form__message--error"></div>
+      <div class="form__input-group">
+        <input type="text" class="form__input" autofocus placeholder="Email Address">
+        <div class="form__input-error-message"></div>
+      </div>
+      <div class="form__input-group">
+        <input type="password" class="form__input" autofocus placeholder="Password">
+        <div class="form__input-error-message"></div>
+      </div>
+      <div class="form__input-group">
+        <input type="password" class="form__input" autofocus placeholder="Confirm password">
+        <div class="form__input-error-message"></div>
+      </div>
+      <button class="form__button" type="submit">Continue</button>
+      <p class="form__text">
+        <a class="form__link" href="/templates/createAccount.html" id="linkLogin">Already have an account? Sign in</a>
+      </p>
+      </form> -->
+
+
           <a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
         </p>
       </form>
+
     </div>
       <script src="./login.js"></script>
 

diff --git a/templates/login.js b/templates/login.js
@@ -0,0 +1,14 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const loginForm = document.querSelector("#login");
+  const createAccountForm = document.querSelector("#createAccount");
+
+  document.querySelector("#linkCreateAccount").addEventListener("click", () => {
+    loginForm.classList.add("form--hidden");
+    createAccountForm.classList.remove("form--hidden");
+  });
+
+  document.querySelector("#linkLogin").addEventListener("click", () => {
+    loginForm.classList.add("form--hidden");
+    createAccountForm.classList.remove("form--hidden");
+  });
+});