Created
March 20, 2023 11:58
-
-
Save dosandk/79d476ef1addd2d32d96655f4e024dfb to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { FormBuilder } from '../../../../modules/form-builder'; | |
| import { Validators } from '../../../../modules/form-builder/validators'; | |
| class SomeForm { | |
| element; | |
| subElements = {}; | |
| constructor(data) { | |
| this.data = data; | |
| this.init(); | |
| } | |
| init () { | |
| this.formBuilder = new FormBuilder(); | |
| this.render(); | |
| this.getSubElements(); | |
| } | |
| get template () { | |
| // abstract | |
| return ``; | |
| } | |
| getSubElements() { | |
| const result = {}; | |
| const elements = this.element.querySelectorAll('[data-element]'); | |
| for (const element of elements) { | |
| const name = element.dataset.element; | |
| result[name] = element; | |
| } | |
| this.subElements = result; | |
| } | |
| render () { | |
| const wrapper = document.createElement('div'); | |
| wrapper.innerHTML = this.template; | |
| this.element = wrapper.firstElementChild; | |
| } | |
| toggleUiErrorsToElement(formElement, errorElementReference) { | |
| formElement.invalid ? | |
| formElement.reference.classList.add('is-invalid') : | |
| formElement.reference.classList.remove('is-invalid'); | |
| if (formElement.errors) { | |
| const errorsTemplates = formElement.errors.map(error => { | |
| return `<div>${error}</div>`; | |
| }) | |
| errorElementReference.innerHTML = errorsTemplates.join(''); | |
| errorElementReference.removeAttribute('hidden'); | |
| } else { | |
| errorElementReference.setAttribute('hidden', true); | |
| } | |
| } | |
| remove () { | |
| } | |
| destroy () { | |
| } | |
| } | |
| export default class SignInForm extends SomeForm { | |
| constructor() { | |
| super(); | |
| this.formBuilder.init({ | |
| email: { | |
| defaultValue: '', | |
| elementRef: this.subElements.email, | |
| validators: [Validators.isEmail()], | |
| }, | |
| password: { | |
| defaultValue: '', | |
| elementRef: this.subElements.password, | |
| validators: [Validators.minLength(4)], | |
| }, | |
| }); | |
| } | |
| get template () { | |
| return ` | |
| <form data-element="signInForm" class="signup-form"> | |
| <div class="form-floating mb-3"> | |
| <input data-element="email" type="email" class="form-control" id="emailId" placeholder="[email protected]" required> | |
| <label for="emailId">Email address</label> | |
| <div hidden data-element="emailError" class="mt-1 text-danger"></div> | |
| </div> | |
| <div class="form-floating mb-3"> | |
| <input data-element="password" type="password" class="form-control" id="passwordId" placeholder="Password" required> | |
| <label for="passwordId">Password</label> | |
| <div hidden data-element="passwordError" class="mt-1 text-danger"></div> | |
| </div> | |
| <div class="d-flex justify-content-center mb-4"> | |
| <button data-element="submitBtn" type="submit" class="btn btn-primary">Sign In</button> | |
| </div> | |
| </form> | |
| `; | |
| } | |
| } | |
| class SignUpForm extends SomeForm { | |
| constructor() { | |
| super(); | |
| this.formBuilder.init({ | |
| email: { | |
| defaultValue: '', | |
| elementRef: this.subElements.email, | |
| validators: [Validators.isEmail()], | |
| }, | |
| password: { | |
| defaultValue: '', | |
| elementRef: this.subElements.password, | |
| validators: [Validators.minLength(4)], | |
| }, | |
| confirmPassword: { | |
| defaultValue: '', | |
| elementRef: this.subElements.passwordConfirm, | |
| validators: [Validators.minLength(4), Validators.confirmControls(this.subElements.password)], | |
| } | |
| }) | |
| } | |
| get template () { | |
| return ` | |
| <form data-element="signUpForm" class="signup-form"> | |
| <div class="form-floating mb-3"> | |
| <input data-element="email" class="form-control" id="emailId" placeholder="[email protected]" required> | |
| <label for="emailId">Email address</label> | |
| <div hidden data-element="emailError" class="mt-1 text-danger"></div> | |
| </div> | |
| <div class="form-floating mb-4"> | |
| <input data-element="password" type="password" class="form-control" id="passwordId" placeholder="password" required> | |
| <label for="passwordId">Password</label> | |
| <div hidden data-element="passwordError" class="mt-1 text-danger"></div> | |
| </div> | |
| <div class="form-floating mb-4"> | |
| <input data-element="passwordConfirm" type="password" class="form-control" id="confirmPasswordId" placeholder="Password" required> | |
| <label for="confirmPasswordId">Confirm Password</label> | |
| <div hidden data-element="confirmPasswordError" class="mt-1 text-danger"></div> | |
| </div> | |
| <div class="d-flex justify-content-center mb-4"> | |
| <button data-element="submitBtn" type="submit" class="btn btn-primary">Sign Up</button> | |
| </div> | |
| </form>`; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment