From 6feebb663d84e9b2317ab76d608d1946a24a4460 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 29 Aug 2023 12:04:16 +0700
Subject: [PATCH] Init user model and common file

---
 .../src/js/constants/constant.js              | 15 +++++
 javascript-practice/src/js/helpers/helpers.js | 29 ++++++++++
 javascript-practice/src/js/model.js           |  1 -
 .../src/js/models/userModel.js                |  7 +++
 .../src/js/services/firebaseService.js        | 55 +++++++++++++++++++
 javascript-practice/src/pages/register.html   | 13 +++--
 6 files changed, 113 insertions(+), 7 deletions(-)
 create mode 100644 javascript-practice/src/js/constants/constant.js
 create mode 100644 javascript-practice/src/js/helpers/helpers.js
 delete mode 100644 javascript-practice/src/js/model.js
 create mode 100644 javascript-practice/src/js/models/userModel.js
 create mode 100644 javascript-practice/src/js/services/firebaseService.js

diff --git a/javascript-practice/src/js/constants/constant.js b/javascript-practice/src/js/constants/constant.js
new file mode 100644
index 0000000..5014b9e
--- /dev/null
+++ b/javascript-practice/src/js/constants/constant.js
@@ -0,0 +1,15 @@
+export const databaseURL =
+  'https://javascript-training-81f7a-default-rtdb.asia-southeast1.firebasedatabase.app';
+export const regex =
+  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+export const PASSWORD_NOT_MATCH = 'Password not match! Please try again!';
+export const PASSWORD_NOT_STRONG =
+  'Password must at least one uppercase, one lowercase letter, one number and one special character!';
+export const ERROR_MESSAGE_DEFAULT = 'Something went wrong!';
+export const TIME_OUT_SEC = 3;
+export const TIME_OUT_ERROR = {
+  status: 408,
+  message: 'Connection time out! Please try again!',
+};
+export const TYPE_FORM = { success: 'success', error: 'error' };
+export const MARK_ICON = { success: 'check', error: 'error' };
diff --git a/javascript-practice/src/js/helpers/helpers.js b/javascript-practice/src/js/helpers/helpers.js
new file mode 100644
index 0000000..6409c57
--- /dev/null
+++ b/javascript-practice/src/js/helpers/helpers.js
@@ -0,0 +1,29 @@
+import { TIME_OUT_SEC, TIME_OUT_ERROR, regex } from '../constants/constant';
+import FirebaseService from '../services/firebaseService';
+
+export const validatePassword = (password) => {
+  return regex.test(password);
+};
+
+export const timeout = (s) => {
+  return new Promise((reject) => {
+    setTimeout(() => {
+      reject(TIME_OUT_ERROR);
+    }, s * 1000);
+  });
+};
+
+export const createIdUser = () => {
+  return new Date().getTime();
+};
+
+export const timeOutConnect = async (action) => {
+  const result = await Promise.race([action, timeout(TIME_OUT_SEC)]);
+
+  if (result && result.status === TIME_OUT_ERROR.status) {
+    FirebaseService.disconnect();
+    throw new Error(`${result.message}`);
+  }
+
+  return result;
+};
diff --git a/javascript-practice/src/js/model.js b/javascript-practice/src/js/model.js
deleted file mode 100644
index 70b786d..0000000
--- a/javascript-practice/src/js/model.js
+++ /dev/null
@@ -1 +0,0 @@
-// TODO
diff --git a/javascript-practice/src/js/models/userModel.js b/javascript-practice/src/js/models/userModel.js
new file mode 100644
index 0000000..0bf71a4
--- /dev/null
+++ b/javascript-practice/src/js/models/userModel.js
@@ -0,0 +1,7 @@
+export default class User {
+  constructor({ email, password, walletName = '' }) {
+    this.email = email;
+    this.password = password;
+    this.walletName = walletName;
+  }
+}
diff --git a/javascript-practice/src/js/services/firebaseService.js b/javascript-practice/src/js/services/firebaseService.js
new file mode 100644
index 0000000..6d41520
--- /dev/null
+++ b/javascript-practice/src/js/services/firebaseService.js
@@ -0,0 +1,55 @@
+import { initializeApp } from 'firebase/app';
+import {
+  getDatabase,
+  ref,
+  set,
+  goOffline,
+  goOnline,
+  onValue,
+} from 'firebase/database';
+import { databaseURL } from '../constants/constant';
+
+class FirebaseService {
+  constructor() {
+    const firebaseConfig = {
+      databaseURL,
+    };
+    this.app = initializeApp(firebaseConfig);
+    this.db = getDatabase(this.app);
+  }
+
+  save(data, path) {
+    return set(ref(this.db, path), data);
+  }
+
+  disconnect() {
+    goOffline(this.db);
+  }
+
+  reconnect() {
+    goOnline(this.db);
+  }
+
+  findKeyByPropery(path, property, value) {
+    return new Promise((resolve) => {
+      onValue(
+        ref(this.db, path),
+        (snapshot) => {
+          let result = false;
+          snapshot.forEach((childSnapshot) => {
+            const data = childSnapshot.val();
+            if (data[property] === value) {
+              result = true;
+            }
+          });
+          resolve(result);
+        },
+        {
+          onlyOnce: true,
+        },
+      );
+    });
+  }
+}
+
+export default new FirebaseService();
diff --git a/javascript-practice/src/pages/register.html b/javascript-practice/src/pages/register.html
index 3f60266..7a729f1 100644
--- a/javascript-practice/src/pages/register.html
+++ b/javascript-practice/src/pages/register.html
@@ -7,20 +7,20 @@
     <title>Register - Money Lover</title>
   </head>
   <body>
-    <!-- <div class="loader"></div> -->
-    <div class="overlay"></div>
-    <div class="modal-box">
-      <div class="checkmark"></div>
+    <!-- <div class="loader hidden"></div> -->
+    <!-- <div class="overlay"></div>
+    <div class="modal-box success-form">
+      <div class="mark check"></div>
       <h2 class="modal-box__title">Register success!</h2>
       <p class="modal-box__message">Please login to continue.</p>
 
       <button class="modal-box__redirect-btn">OK!</button>
-    </div>
+    </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">
+        <form action="#" class="form" method="post" id="registerForm">
           <div class="form__container">
             <h1 class="form__title">Register</h1>
             <p class="form__description">Using Money Lover account</p>
@@ -55,5 +55,6 @@
         <!-- End form -->
       </div>
     </div>
+    <script type="module" src="../js/main.js"></script>
   </body>
 </html>