Add state variable to register area

resources/images/loading.svg

@@ -0,0 +1 @@
+<svg data-set="loaders" data-loading="lazy" width="30px" height="30px" data-src="https://s2.svgbox.net/loaders.svg?ic=oval" data-icon="oval" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#f67602" color="" data-attributes-set="viewBox,xmlns,stroke,color" data-rendered="true"><g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle stroke-opacity=".5" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"></animateTransform></path></g></svg>

resources/js/main.js

@@ -1,4 +1,4 @@
-import RegisterForm from './register-area/register-form.vue'
+import RegisterArea from './register-area/register-area.vue'
 import '../scss/main.scss'
 import { createApp } from 'vue'
 importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/))
@@ -7,12 +7,9 @@ let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
 let registerToggles = document.querySelectorAll(".register-btn, .register-area\
 	.cancel-button, .services-cards button")
 let token = getCookie('XSRF-TOKEN')
-const app = createApp(RegisterForm)
-
-// app.component('register-form', {
-// 	template: registerForm
-// })
+const app = createApp(RegisterArea)
 
+// app.component('register-area', {template: RegisterArea})
 app.mount('#app')
 
 function importAll(r) {

resources/js/register-area/register-area.vue

@@ -0,0 +1,68 @@
+<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 id='register-email' required type='email' name='sender_email' placeholder=''
+		spellcheck='false'>
+		</div>
+		<div>
+		<label for='sender_password'>Password</label>
+		<input id='register-password' required type='password' name='sender_password'
+		placeholder='' spellcheck='false'>
+		</div>
+		<div>
+		<label for='sender_password'>Confirm Password</label>
+		<input 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();
+	}
+
+	module.exports = {
+		data() {
+		return {active: 'loading'}
+		},
+		methods: {
+			register,
+			closeArea() {
+				document.querySelector(".register-area").classList.remove("active")
+			}
+		}
+	}
+</script>

resources/js/register-area/register-form.vue

@@ -1,57 +0,0 @@
-<template>
-	<form v-on:submit="register" id="register-form" class="login" action="">
-	<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 id='register-email' required type='email' name='sender_email' placeholder=''
-	spellcheck='false'>
-	</div>
-	<div>
-	<label for='sender_password'>Password</label>
-	<input id='register-password' required type='password' name='sender_password'
-	placeholder='' spellcheck='false'>
-	</div>
-	<div>
-	<label for='sender_password'>Confirm Password</label>
-	<input id='confirm-password' required type='password'
-	name='sender_password' placeholder='' spellcheck='false'>
-	</div>
-	<button class="submit-btn" type="submit">Submit</button>
-	<div v-on:click="closeArea" class="cancel-button"></div>
-	</form>
-</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();
-	}
-
-	/* document.getElementById('register-form').addEventListener('submit', register) */
-	/* document.getElementById('register-form').addEventListener('submit', register) */
-	module.exports = {
-		methods: {
-			register,
-			closeArea() {
-				document.querySelector(".register-area").classList.remove("active")
-			}
-		}
-	}
-</script>

resources/scss/main.scss

@@ -462,8 +462,14 @@ footer a {
 }
 
 .loading-icon {
+	display: block;
 	width: 50px;
 	height: 50px;
+	margin: auto;
+}
+
+.register-area .loading-icon {
+	margin-top: 100px;
 }
 
 div.register-area {

resources/views/home.blade.php

@@ -10,10 +10,7 @@
 @section('content')
 	@parent
 	<main>
-	<div id="app" class="register-area">
-	<Register-Form></Register-Form>
-			<img v-if="loading" type="image/svg+xml" class="loading-icon" src="images/loading.svg" alt=""/>
-	</div>
+	<div id="app" class="register-area"></div>
 	<div class='landing-hero'>
 		<div class='hero-filter'>
 			<h2>The web's #1 content promoter</h2>

resources/views/master.blade.php

@@ -48,7 +48,7 @@ spellcheck='false'>
 		<div class='foot-links'>
 			<a href="/terms">Terms & Policy</a>
 			<a href="mail:support@trendplays.com">Help</a>
-			<a href="/reset-password">Reset Password</a>
+			<a id="reset-password" href="/reset-password">Reset Password</a>
 		</div>
 		<small>©Copyright 2021 Trendplays Network, Inc.</small>
 	</footer>