Add main element in html file and fix bug

- Fix checkExistUser call once time
This commit is contained in:
2023-09-04 15:48:39 +07:00
parent 99034fb95f
commit ff394c13b4
6 changed files with 89 additions and 86 deletions
@@ -13,7 +13,7 @@ export default class RegisterController {
} }
init() { init() {
if (this.registerView.checkRegisterFormElExist()) { if (this.registerView.isRegisterPage()) {
this.registerView.addHandlerForm( this.registerView.addHandlerForm(
this.hanlderCheckUserExist.bind(this), this.hanlderCheckUserExist.bind(this),
this.handlerSaveUser.bind(this), this.handlerSaveUser.bind(this),
@@ -12,6 +12,7 @@ export default class CommonService {
} }
async findKeyByProperty(property, value, path = this.defaultPath) { async findKeyByProperty(property, value, path = this.defaultPath) {
this.connectToDb();
const existUser = this.firebaseService.findKeyByPropery( const existUser = this.firebaseService.findKeyByPropery(
path, path,
property, property,
@@ -28,6 +29,7 @@ export default class CommonService {
} }
async getDataFromId(id, path = this.path) { async getDataFromId(id, path = this.path) {
this.connectToDb();
const data = await this.firebaseService.getDataFromId(id, path); const data = await this.firebaseService.getDataFromId(id, path);
if (data) return data; if (data) return data;
return null; return null;
@@ -25,11 +25,9 @@ export default class CommonLoginRegisterView extends CommonView {
return true; return true;
} }
this.showError(CONSTANT.MESSAGE.PASSWORD_NOT_STRONG); this.showError(CONSTANT.MESSAGE.PASSWORD_NOT_STRONG);
this.toogleErrorStyleInputPass();
return false; return false;
} }
this.showError(CONSTANT.MESSAGE.PASSWORD_NOT_MATCH); this.showError(CONSTANT.MESSAGE.PASSWORD_NOT_MATCH);
this.toogleErrorStyleInputPass();
return false; return false;
} }
@@ -48,9 +46,10 @@ export default class CommonLoginRegisterView extends CommonView {
// Reassign again to check error message element haved on page or not // Reassign again to check error message element haved on page or not
this.errorMessageEl = document.querySelector('.form__error-message'); this.errorMessageEl = document.querySelector('.form__error-message');
// If have error message on page, remove it // If have error message on page, remove it with style error input password
if (this.errorMessageEl) { if (this.errorMessageEl) {
this.errorMessageEl.remove(); this.errorMessageEl.remove();
this.toogleErrorStyleInputPass();
} }
} }
@@ -6,7 +6,7 @@ export default class RegisterView extends CommonLoginRegisterView {
constructor() { constructor() {
super(); super();
this.registerForm = document.getElementById('registerForm'); this.registerPage = document.getElementById('registerPage');
} }
/** /**
@@ -100,7 +100,7 @@ export default class RegisterView extends CommonLoginRegisterView {
this.toogleLoaderSpinner(); this.toogleLoaderSpinner();
} }
checkRegisterFormElExist() { isRegisterPage() {
return this.registerForm !== null; return this.registerPage !== null;
} }
} }
+37 -32
View File
@@ -7,38 +7,43 @@
<title>Login - Money Lover</title> <title>Login - Money Lover</title>
</head> </head>
<body> <body>
<!-- <div class="loader"></div> --> <main id="loginPage">
<div class="background"> <div class="background">
<div class="wrapper"> <div class="wrapper">
<img class="logo-web" src="../assets/images/logo.svg" alt="Logo web" /> <img
<!-- Log in form --> class="logo-web"
<form action="#" class="form" method="post"> src="../assets/images/logo.svg"
<div class="form__container"> alt="Logo web"
<h1 class="form__title">Log In</h1> />
<p class="form__description">Using Money Lover account</p> <!-- Log in form -->
<input <form action="#" class="form" method="post">
type="email" <div class="form__container">
class="form__input" <h1 class="form__title">Log In</h1>
placeholder="Email" <p class="form__description">Using Money Lover account</p>
name="email" <input
required type="email"
/> class="form__input"
<input placeholder="Email"
type="password" name="email"
name="password" required
class="form__input" />
placeholder="Password" <input
required type="password"
/> name="password"
<button type="submit" class="form__submit-btn">Login</button> class="form__input"
<p class="form__redirect-signup-text"> placeholder="Password"
Don't have an account? required
<a href="/register" class="form__link">Register</a> />
</p> <button type="submit" class="form__submit-btn">Login</button>
</div> <p class="form__redirect-signup-text">
</form> Don't have an account?
<!-- End form --> <a href="/register" class="form__link">Register</a>
</p>
</div>
</form>
<!-- End form -->
</div>
</div> </div>
</div> </main>
</body> </body>
</html> </html>
+44 -47
View File
@@ -7,54 +7,51 @@
<title>Register - Money Lover</title> <title>Register - Money Lover</title>
</head> </head>
<body> <body>
<!-- <div class="loader hidden"></div> --> <main id="registerPage">
<!-- <div class="overlay"></div> <div class="background">
<div class="modal-box success-form"> <div class="wrapper">
<div class="mark check"></div> <img
<h2 class="modal-box__title">Register success!</h2> class="logo-web"
<p class="modal-box__message">Please login to continue.</p> src="../assets/images/logo.svg"
alt="Logo web"
<button class="modal-box__redirect-btn">OK!</button> />
</div> --> <!-- Register form -->
<div class="background"> <form action="#" class="form" method="post" id="registerForm">
<div class="wrapper"> <div class="form__container">
<img class="logo-web" src="../assets/images/logo.svg" alt="Logo web" /> <h1 class="form__title">Register</h1>
<!-- Register form --> <p class="form__description">Using Money Lover account</p>
<form action="#" class="form" method="post" id="registerForm"> <input
<div class="form__container"> type="email"
<h1 class="form__title">Register</h1> class="form__input"
<p class="form__description">Using Money Lover account</p> placeholder="Email"
<input name="email"
type="email" required
class="form__input" />
placeholder="Email" <input
name="email" type="password"
required name="password"
/> class="form__input"
<input placeholder="Password"
type="password" required
name="password" />
class="form__input" <input
placeholder="Password" type="password"
required name="password_confirm"
/> class="form__input"
<input placeholder="Confirm Password"
type="password" required
name="password_confirm" />
class="form__input" <button type="submit" class="form__submit-btn">Register</button>
placeholder="Confirm Password" <p class="form__redirect-signup-text">
required Have you an account?
/> <a href="/login" class="form__link">Sign in</a>
<button type="submit" class="form__submit-btn">Register</button> </p>
<p class="form__redirect-signup-text"> </div>
Have you an account? </form>
<a href="/login" class="form__link">Sign in</a> <!-- End form -->
</p> </div>
</div>
</form>
<!-- End form -->
</div> </div>
</div> </main>
<script type="module" src="../js/main.js"></script> <script type="module" src="../js/main.js"></script>
</body> </body>
</html> </html>