Implement login and register page

javascript-practice/package-lock.json

@@ -13,6 +13,7 @@
         "regenerator-runtime": "^0.14.0"
       },
       "devDependencies": {
+        "@parcel/transformer-sass": "^2.9.3",
         "parcel": "^2.9.3"
       }
     },
@@ -1494,6 +1495,25 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@parcel/transformer-sass": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-sass/-/transformer-sass-2.9.3.tgz",
+      "integrity": "sha512-i9abj9bKg3xCHghJyTM3rUVxIEn9n1Rl+DFdpyNAD8VZ52COfOshFDQOWNuhU1hEnJOFYCjnfcO0HRTsg3dWmg==",
+      "dev": true,
+      "dependencies": {
+        "@parcel/plugin": "2.9.3",
+        "@parcel/source-map": "^2.1.1",
+        "sass": "^1.38.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0",
+        "parcel": "^2.9.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@parcel/transformer-svg": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/@parcel/transformer-svg/-/transformer-svg-2.9.3.tgz",
@@ -2045,6 +2065,19 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2060,6 +2093,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -2155,6 +2197,33 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -2523,6 +2592,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/get-port": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-4.2.0.tgz",
@@ -2532,6 +2615,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/globals": {
       "version": "13.21.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
@@ -2622,6 +2717,12 @@
         "entities": "^3.0.1"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+      "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2644,6 +2745,18 @@
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "dev": true
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3068,6 +3181,15 @@
       "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
       "dev": true
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -3251,6 +3373,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
@@ -3285,6 +3419,23 @@
         }
       ]
     },
+    "node_modules/sass": {
+      "version": "1.66.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -3314,8 +3465,6 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }

javascript-practice/package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@parcel/transformer-sass": "^2.9.3",
     "parcel": "^2.9.3"
   },
   "dependencies": {

javascript-practice/src/login.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles/_main.scss" />
+    <title>Login - Money Lover</title>
+  </head>
+  <body>
+    <!-- <div class="loader"></div> -->
+    <div class="background">
+      <div class="wrapper">
+        <img class="logo-web" src="./assets/images/logo.svg" alt="Logo web" />
+        <!-- Log in form -->
+        <form action="#" class="form" method="post">
+          <div class="form__container">
+            <h1 class="form__title">Log In</h1>
+            <p class="form__description">Using Money Lover account</p>
+            <input
+              type="email"
+              class="form__input"
+              placeholder="Email"
+              name="email"
+              required
+            />
+            <input
+              type="password"
+              name="password"
+              class="form__input"
+              placeholder="Password"
+              required
+            />
+            <button type="submit" class="form__submit-btn">Login</button>
+            <p class="form__redirect-signup-text">
+              Don't have an account?
+              <a href="/register" class="form__link">Register</a>
+            </p>
+          </div>
+        </form>
+        <!-- End form -->
+      </div>
+    </div>
+  </body>
+</html>

javascript-practice/src/register.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles/_main.scss" />
+    <title>Register - Money Lover</title>
+  </head>
+  <body>
+    <!-- <div class="loader"></div> -->
+    <div class="background">
+      <div class="wrapper">
+        <img class="logo-web" src="./assets/images/logo.svg" alt="Logo web" />
+        <!-- Register form -->
+        <form action="#" class="form" method="post">
+          <div class="form__container">
+            <h1 class="form__title">Register</h1>
+            <p class="form__description">Using Money Lover account</p>
+            <input
+              type="email"
+              class="form__input"
+              placeholder="Email"
+              name="email"
+              required
+            />
+            <input
+              type="password"
+              name="password"
+              class="form__input"
+              placeholder="Password"
+              required
+            />
+            <input
+              type="password"
+              name="password_confirm"
+              class="form__input"
+              placeholder="Confirm Password"
+              required
+            />
+            <button type="submit" class="form__submit-btn">Register</button>
+            <p class="form__redirect-signup-text">
+              Have you an account?
+              <a href="/login" class="form__link">Sign in</a>
+            </p>
+          </div>
+        </form>
+        <!-- End form -->
+      </div>
+    </div>
+  </body>
+</html>

javascript-practice/src/styles/_main.scss

@@ -1 +1,15 @@
-// TODO
+// Abstracts
+@import './abstracts/mixin';
+@import './abstracts/variables';
+
+// Bases
+@import './bases/base';
+@import './bases/reset';
+@import './bases/typography';
+
+// Layouts
+@import './layouts/header';
+@import './layouts/nav';
+
+// Pages
+@import './pages/login-register';

javascript-practice/src/styles/abstracts/_variables.scss

@@ -1,12 +1,17 @@
 $primary-font: 'Roboto';
 
 // Color
+$light-primary-color: #00bc2a;
 $primary-color: #2db84c;
+$dark-primary-color: #009421;
 $primary-text-color: #000;
 $secondary-text-color: #0000008a;
 $secondary-light-text-color: #00000042;
 $receive-money-color: #e51c23;
 $deducted-money-color: #039be5;
+$color-background-input: #f5f5f5;
+$gray: #dddddd;
+$white: #ffffff;
 
 // Font size
 $fs-2x-sm: 11px;

javascript-practice/src/styles/bases/_base.scss

@@ -1 +1,45 @@
-// TODO
+%margin-inline-auto {
+  margin-inline: auto;
+}
+
+%rounded {
+  border-radius: 10px;
+}
+
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #00000066;
+  z-index: 1;
+  transition: opacity 0.75s, visibility 0.75s;
+
+  &--hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &::after {
+    content: '';
+    width: 75px;
+    height: 75px;
+    border: 10px solid $gray;
+    border-top-color: $primary-color;
+    border-radius: 50%;
+    animation: loading 0.75s ease infinite;
+  }
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0turn);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}

javascript-practice/src/styles/bases/_typography.scss

@@ -26,3 +26,8 @@ $font-path: '../assets/fonts';
 
   font-display: swap;
 }
+
+* {
+  font-family: $primary-font, sans-serif;
+  font-size: $fs-sm;
+}

javascript-practice/src/styles/pages/_login-register.scss

@@ -0,0 +1,76 @@
+.background {
+  height: 100vh;
+  background: linear-gradient(#00710f 314px, #ebebeb -100%);
+}
+
+.wrapper {
+  @extend %margin-inline-auto;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+
+.logo-web {
+  padding-top: 54px;
+}
+
+.form {
+  @extend %margin-inline-auto;
+
+  margin-top: 34px;
+  padding-top: 34px;
+  padding-bottom: 40px;
+  background-color: $white;
+  width: 670px;
+  border-radius: 20px;
+
+  &__container {
+    @extend %margin-inline-auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: 19px;
+    width: 280px;
+  }
+
+  &__title {
+    color: $primary-text-color;
+    font-size: $fs-2x-lg;
+    font-weight: 700;
+    line-height: 48px;
+  }
+
+  &__description {
+    margin-top: 15px;
+    color: $secondary-text-color;
+    font-size: $fs-md;
+    line-height: 24px;
+  }
+
+  &__input {
+    @extend %rounded;
+
+    font-size: $fs-md;
+    height: 52px;
+    border: 2px solid $color-background-input;
+    background-color: $color-background-input;
+    padding-inline: 14px;
+  }
+
+  &__submit-btn {
+    @extend %rounded;
+
+    border: none;
+    background: $light-primary-color;
+    color: $white;
+    height: 36px;
+    margin-top: 30px;
+  }
+
+  &__link {
+    color: $primary-color;
+  }
+}