Fix MVC design pattern

javascript-practice/src/js/controllers/registerController.js

@@ -4,42 +4,20 @@ export default class RegisterController {
     this.service = service;
   }
 
-  async controlRegister() {
-    try {
-      // Load spinner
-      this.registerView.toogleLoaderSpinner();
+  hanlderCheckUserExist(email) {
+    return this.service.userService.checkUserExist(email);
+  }
 
-      // Get data from form
-      const user = this.registerView.getDataFromForm();
-
-      // Save user
-      if (user) {
-        // Check user exist
-        const userExist = await this.service.userService.checkUserExist(
-          user.email,
-        );
-        if (userExist) {
-          throw Error('User is exists! Please try another email!');
-        } else {
-          await this.service.userService.saveUser(user);
-          // Show popup success
-          this.registerView.initRegisterSuccessPopup();
-          this.registerView.tooglePopupForm();
-        }
-      }
-    } catch (error) {
-      // Show popup error
-      this.registerView.initErrorPopup(error);
-      this.registerView.tooglePopupForm();
-    }
-
-    // Close spinner
-    this.registerView.toogleLoaderSpinner();
+  handlerSaveUser(user) {
+    return this.service.userService.saveUser(user);
   }
 
   init() {
-    if (this.registerView.registerForm !== null) {
-      this.registerView.addHandlerForm(this.controlRegister.bind(this));
+    if (this.registerView.checkRegisterFormElExist()) {
+      this.registerView.addHandlerForm(
+        this.hanlderCheckUserExist.bind(this),
+        this.handlerSaveUser.bind(this),
+      );
       this.registerView.addHandlerInputFormChange();
     }
   }

javascript-practice/src/js/views/commonLoginRegisterView.js

@@ -31,18 +31,6 @@ export default class CommonLoginRegisterView extends CommonView {
     return false;
   }
 
-  /**
-   * Add event listener for form input
-   * @param {Function} handler The function need to be set event
-   */
-  addHandlerForm(handler) {
-    this.parentElement.addEventListener('submit', (e) => {
-      e.preventDefault();
-      this.clearErrorMessage();
-      handler();
-    });
-  }
-
   /**
    * Show or hide style error input password
    */

javascript-practice/src/js/views/registerView.js

@@ -32,13 +32,16 @@ export default class RegisterView extends CommonLoginRegisterView {
   /**
    * Implement register success popup in site
    */
-  initRegisterSuccessPopup() {
+  showRegisterSuccessPopup() {
     const typePopup = TYPE_POPUP.success;
     const title = 'Register Commpleted';
     const content = 'Please login to continue!';
     const btnContent = 'OK';
 
     this.initPopupContent(typePopup, title, content, btnContent);
+
+    // Show popup
+    this.tooglePopupForm();
   }
 
   /**
@@ -51,5 +54,53 @@ export default class RegisterView extends CommonLoginRegisterView {
     const btnContent = 'Got it!';
 
     this.initPopupContent(typePopup, title, content, btnContent);
+
+    // Show popup
+    this.tooglePopupForm();
+  }
+
+  /**
+   * Add event listener for form input
+   * @param {Function} handler The function need to be set event
+   */
+  addHandlerForm(checkExistUser, saveUser) {
+    this.parentElement.addEventListener('submit', (e) => {
+      e.preventDefault();
+      this.clearErrorMessage();
+      this.submitForm(checkExistUser, saveUser);
+    });
+  }
+
+  async submitForm(checkExistUser, saveUser) {
+    try {
+      // Load spinner
+      this.toogleLoaderSpinner();
+
+      // Get data from form
+      const user = this.getDataFromForm();
+
+      // Save user
+      if (user) {
+        // Check user exist
+        const userExist = await checkExistUser(user.email);
+        if (userExist) {
+          throw Error('User is exists! Please try another email!');
+        } else {
+          await saveUser(user);
+          // Show popup success
+          this.showRegisterSuccessPopup();
+        }
+      }
+    } catch (error) {
+      // Show popup error
+      this.initErrorPopup(error);
+    }
+
+    // Close spinner
+    this.toogleLoaderSpinner();
+  }
+
+  checkRegisterFormElExist() {
+    return this.registerForm !== null;
   }
 }