|
- <template>
- <form v-if="active === 'register'" v-on:submit="register" id="register-form">
- <h3>Registration</h3>
- <div>
- <label for='sender_name'>Name</label>
- <input id='register-name' required type='name' name='sender_name' placeholder=''
- spellcheck='false'>
- </div>
- <div>
- <label for='sender_email'>Email</label>
- <input v-on:input="checkPasswords" id='register-email' required type='email' name='sender_email' placeholder=''
- spellcheck='false'>
- </div>
- <div>
- <label for='sender_password'>Password</label>
- <input v-on:input="checkPasswords" id='register-password' required type='password' name='sender_password'
- placeholder='' spellcheck='false'>
- </div>
- <div>
- <label for='confirm_password'>Confirm Password</label>
- <input v-on:input="checkPasswords" id='confirm-password' required type='password'
- name='sender_password' placeholder='' spellcheck='false'>
- </div>
- <button class="submit-btn" type="submit">Submit</button>
- </form>
- <form v-if="active === 'forgot'" v-on:submit="register" id="forgot-form">
- <h3>Forgot Password</h3>
- <div>
- <label for='sender_email'>Email</label>
- <input id='forgot-email' required type='email' name='sender_email' placeholder=''
- spellcheck='false'>
- </div>
- <button class="submit-btn" type="submit">Submit</button>
- </form>
- <img v-if="active === 'loading'" type="image/svg+xml" class="loading-icon" src="../../images/loading.svg" alt=""/>
- <div v-on:click="closeArea" class="cancel-button"></div>
- </template>
-
- <script>
- function register(event) {
- fetch("/register", {
- method: 'POST',
- headers: {'Content-Type': 'application/json',
- 'X-XSRF-TOKEN': window.token},
- body: JSON.stringify({"name": document.getElementById("register-name").value,
- "email": document.getElementById("register-email").value,
- "password": document.getElementById("register-password").value}),
- "password_confirmation": document.getElementById("confirm-password").value})
- .then(response => {
- console.log(response.json())
- console.log(response.ok)
- console.log(response.message)
- });
- event.preventDefault();
- }
-
- function checkPasswords() {
- let passInput = document.getElementById('register-password')
- let passInput2 = document.getElementById('confirm-password')
- if (passInput.value != passInput2.value) {
- passInput2.setCustomValidity('Passwords must be matching')
- } else {
- passInput2.setCustomValidity('');
- }
- }
-
- module.exports = {
- data() {
- return {active: 'loading'}
- },
- methods: {
- register,
- checkPasswords,
- closeArea() {
- document.querySelector(".register-area").classList.remove("active")
- }
- }
- }
- </script>
|