From 05b0707771f5b531d1b3777e3bf6e6b46e3ae98c Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Wed, 12 May 2021 11:35:15 -0400
Subject: [PATCH] Add state variable to register area

---
 resources/images/loading.svg                 |  1 +
 resources/js/main.js                         |  9 +--
 resources/js/register-area/register-area.vue | 68 ++++++++++++++++++++
 resources/js/register-area/register-form.vue | 57 ----------------
 resources/scss/main.scss                     |  6 ++
 resources/views/home.blade.php               |  5 +-
 resources/views/master.blade.php             |  2 +-
 7 files changed, 80 insertions(+), 68 deletions(-)
 create mode 100644 resources/images/loading.svg
 create mode 100644 resources/js/register-area/register-area.vue
 delete mode 100644 resources/js/register-area/register-form.vue

diff --git a/resources/images/loading.svg b/resources/images/loading.svg
new file mode 100644
index 0000000..f9cd097
--- /dev/null
+++ b/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>
diff --git a/resources/js/main.js b/resources/js/main.js
index 0c4795f..fb4a83b 100644
--- a/resources/js/main.js
+++ b/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) {
diff --git a/resources/js/register-area/register-area.vue b/resources/js/register-area/register-area.vue
new file mode 100644
index 0000000..e47aedd
--- /dev/null
+++ b/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>
diff --git a/resources/js/register-area/register-form.vue b/resources/js/register-area/register-form.vue
deleted file mode 100644
index c5e61c7..0000000
--- a/resources/js/register-area/register-form.vue
+++ /dev/null
@@ -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>
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index 762c681..c5f3f01 100644
--- a/resources/scss/main.scss
+++ b/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 {
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 9cac00a..4ecddb8 100644
--- a/resources/views/home.blade.php
+++ b/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>
diff --git a/resources/views/master.blade.php b/resources/views/master.blade.php
index 427b9e4..587c872 100644
--- a/resources/views/master.blade.php
+++ b/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>