Add more ES6 code

3 years ago · ab67f6726f
--- a/javascript-vue/js/app.js
+++ b/javascript-vue/js/app.js
@@ -0,0 +1 @@
 require('./bootstrap');
--- a/javascript-vue/js/bootstrap.js
+++ b/javascript-vue/js/bootstrap.js
@@ -0,0 +1,28 @@
 window._ = require('lodash');

 /**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

 window.axios = require('axios');

 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

 /**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

 // import Echo from 'laravel-echo';

 // window.Pusher = require('pusher-js');

 // window.Echo = new Echo({
 //     broadcaster: 'pusher',
 //     key: process.env.MIX_PUSHER_APP_KEY,
 //     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
 //     forceTLS: true
 // });
--- a/javascript-vue/js/icons/eye-fill.vue
+++ b/javascript-vue/js/icons/eye-fill.vue
@@ -0,0 +1,8 @@
 <template>
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
 fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
  <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0
  1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
 </svg>
 </template>
--- a/javascript-vue/js/icons/instagram.vue
+++ b/javascript-vue/js/icons/instagram.vue
@@ -0,0 +1,67 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 551.034 551.034" style="enable-background:new 0 0 551.034 551.034;" xml:space="preserve">
 <g>
 	
 		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="275.517" y1="4.57" x2="275.517" y2="549.72" gradientTransform="matrix(1 0 0 -1 0 554)">
 		<stop  offset="0" style="stop-color:#E09B3D"/>
 		<stop  offset="0.3" style="stop-color:#C74C4D"/>
 		<stop  offset="0.6" style="stop-color:#C21975"/>
 		<stop  offset="1" style="stop-color:#7024C4"/>
 	</linearGradient>
 	<path style="fill:url(#SVGID_1_);" d="M386.878,0H164.156C73.64,0,0,73.64,0,164.156v222.722
 		c0,90.516,73.64,164.156,164.156,164.156h222.722c90.516,0,164.156-73.64,164.156-164.156V164.156
 		C551.033,73.64,477.393,0,386.878,0z M495.6,386.878c0,60.045-48.677,108.722-108.722,108.722H164.156
 		c-60.045,0-108.722-48.677-108.722-108.722V164.156c0-60.046,48.677-108.722,108.722-108.722h222.722
 		c60.045,0,108.722,48.676,108.722,108.722L495.6,386.878L495.6,386.878z"/>
 	
 		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="275.517" y1="4.57" x2="275.517" y2="549.72" gradientTransform="matrix(1 0 0 -1 0 554)">
 		<stop  offset="0" style="stop-color:#E09B3D"/>
 		<stop  offset="0.3" style="stop-color:#C74C4D"/>
 		<stop  offset="0.6" style="stop-color:#C21975"/>
 		<stop  offset="1" style="stop-color:#7024C4"/>
 	</linearGradient>
 	<path style="fill:url(#SVGID_2_);" d="M275.517,133C196.933,133,133,196.933,133,275.516s63.933,142.517,142.517,142.517
 		S418.034,354.1,418.034,275.516S354.101,133,275.517,133z M275.517,362.6c-48.095,0-87.083-38.988-87.083-87.083
 		s38.989-87.083,87.083-87.083c48.095,0,87.083,38.988,87.083,87.083C362.6,323.611,323.611,362.6,275.517,362.6z"/>
 	
 		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="418.31" y1="4.57" x2="418.31" y2="549.72" gradientTransform="matrix(1 0 0 -1 0 554)">
 		<stop  offset="0" style="stop-color:#E09B3D"/>
 		<stop  offset="0.3" style="stop-color:#C74C4D"/>
 		<stop  offset="0.6" style="stop-color:#C21975"/>
 		<stop  offset="1" style="stop-color:#7024C4"/>
 	</linearGradient>
 	<circle style="fill:url(#SVGID_3_);" cx="418.31" cy="134.07" r="34.15"/>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/javascript-vue/js/icons/loading.vue
+++ b/javascript-vue/js/icons/loading.vue
@@ -0,0 +1,3 @@
 <template>
 <svg class="loading-icon" 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="currentColor" 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>
 </template>
--- a/javascript-vue/js/icons/plus-fill.vue
+++ b/javascript-vue/js/icons/plus-fill.vue
@@ -0,0 +1,5 @@
 <template>
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
 </svg>
 </template>
--- a/javascript-vue/js/icons/plus.vue
+++ b/javascript-vue/js/icons/plus.vue
@@ -0,0 +1,6 @@
 <template>
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
 </svg>
 </template>
--- a/javascript-vue/js/icons/youtube.vue
+++ b/javascript-vue/js/icons/youtube.vue
@@ -0,0 +1,39 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 461.001 461.001" style="enable-background:new 0 0 461.001 461.001;" xml:space="preserve">
 <path style="fill:#F61C0D;" d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
 	c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
 	C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
 	c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"/>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/javascript-vue/js/main.js
+++ b/javascript-vue/js/main.js
@@ -0,0 +1,116 @@
 import RegisterArea from './register-area/register-area.vue'
 import Panel from './panel/panel.vue'
 import '../scss/main.scss'
 import { createApp } from 'vue'
 importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/))

 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')

 function importAll(r) {
 	return r.keys().map(r)
 }

 function getCookie(name) {
  var re = new RegExp(name + "=([^;]+)")
  var value = re.exec(document.cookie)

  return (value != null) ? unescape(value[1]) : null
 }

 function getToken() {
 	return fetch("/sanctum/csrf-cookie", {
 		method: 'GET'
 	}).then( () => {
 		token = getCookie('XSRF-TOKEN')
 		return token
 	})
 }

 function login(event) {
 	getToken().then(fetch("/login", {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': token},
 		body: JSON.stringify({"email":
 			document.getElementById("login_email").value,
 		"password": document.getElementById("login_password").value}),
 	}).then(response => {
 		if (response.ok) {
 			window.location.assign("/panel")
 		} else {
 			document.querySelector("#login_form .error").innerText =
 				"Invalid credentials."
 		}
 	}))
 	event.preventDefault()
 	// event.stopPropogation()
 }


 //Attempt to resend the verification link
 function resendLink(event) {
 	fetch("/resend-verification", {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': token},
 	}).then(response => {
 		if (response.ok) {
 			event.target.parentNode.getElementsByTagName('h3')[0].innerText =
 			"The link has been resent."
 		} else {
 			event.target.parentNode.getElementsByTagName('h3')[0].innerText =
 			`${response.status} : ${response.statusText}`
 		}})
 	event.preventDefault();
 }

 function toggleNav() {
 	heroText.forEach(item => {
 		item.classList.toggle("hidden")
 	})
 	document.querySelector("nav form.login").classList.toggle("active")
 	this.classList.toggle("toggled")
 }


 if (window.location.pathname == '/') {
 	document.getElementById('nav_toggle').addEventListener('click', toggleNav)
 	document.querySelector('#login_form button').addEventListener('click', login)
 	const app = createApp(RegisterArea).mount('#app')
 	// app.token = token
 	if (!token) {app.token = getToken()}

 	//Triggers for registration menu
 	for (let i = 0; i < registerToggles.length; i++) {
 		registerToggles[i].addEventListener("click", function() {
 		document.querySelector(".register-area").classList.add("active")
 		app.active = 'register'
 		})
 	}
 	document.getElementById("forgot-password-btn").onclick = event => {
 		document.querySelector(".register-area").classList.add("active")
 		app.active = 'forgot'
 		event.preventDefault()
 	}

 	//FAQ collapsibles
 	let cols = document.getElementsByClassName("collapsible");

 	for (let i = 0; i < cols.length; i++) {
 		cols[i].addEventListener("click", function() {
 			this.classList.toggle("active");
 		});
 	}
 } else if (window.location.pathname == '/verify-email') {
 	document.getElementById('resend_verification').addEventListener("click", resendLink)
 } else if (window.location.pathname == '/panel') {
 	const app = createApp(Panel).mount('#panel')
 	getToken().then(()=> {app.token = token})
 	window.onhashchange = ()=>{app.active = location.hash}
 }

--- a/javascript-vue/js/panel/admin.vue
+++ b/javascript-vue/js/panel/admin.vue
--- a/javascript-vue/js/panel/credits.vue
+++ b/javascript-vue/js/panel/credits.vue
@@ -0,0 +1,188 @@
 <template>
 <section class="select-credits">
 <div class="credits-pane"><h2>10 Credits</h2>
 <h3>$10.99</h3><div><span>Qty</span><input min="0" max="1000" v-model="packs.credits10" type="number"></div>
 </div>

 <div class="credits-pane"><div><h2>50 Credits</h2><span>+5 Free Credits</span></div>
 <h3>$54.99 </h3><div><span>Qty</span><input min="0" max="1000" v-model="packs.credits50" type="number"></div>
 </div>

 <div class="credits-pane"><div><h2>100 Credits</h2><span>+10 Free Credits</span></div>
 <h3>$109.99</h3> <div><span>Qty</span><input min="0" max="1000" v-model="packs.credits100" type="number"></div>
 </div>

 <div class="credits-pane"><div><h2>1000 Credits</h2><span>+150 Free Credits</span></div>
 <h3>$1010.00</h3> <div><span>Qty</span><input min="0" max="1000" v-model="packs.credits1000" type="number"></div>
 </div>
 	<h3>Total: ${{total.toLocaleString('en')}}</h3>
 	<div id="credits-errors"></div>
 </section>

 <section id="payment-section">
 	<h4>Select a payment method</h4>

 	<div class="sliding-menu">
 	<a @click="method = 'payeer'" :class="{selected: method == 'payeer'}">Payeer</a>
 	<a @click="method = 'pm'" :class="{selected: method == 'pm'}">Perfect Money</a>
 	<div :class="{right: (method == 'pm')}" class="menu-slider"><div></div></div>
 	</div>

 	<div v-if="method == 'payeer'" class="payment-window">
 	<img src="../../images/payeer.png" alt="">
 	<p>Payeer allows you to pay securely by transfering your choice of cryptocurrency
 	to a temporary address.
 	</p>
 	</div>

 	<div v-if="method == 'pm'" class="payment-window">
 	<img src="../../images/perfect_money.svg" alt="">
 	<p>Pay by transfering USD from your Perfect Money wallet.</p>
 	</div>

 	<div id="agreement-check">
 	<input v-model="agreed" type="checkbox"><label>I have read and agree to the <a
 	href="/terms-and-policy">Terms and Policy</a> and will not pursue a dispute or chargeback.</label>
 	<div id="payment-error"></div>
 	</div>
 </section>

 <section class="credits-confirm">
 	<button @click="pay" :disabled="!ready"
 	class="brand-btn">Buy<loading v-if="loading"></loading></button>
 </section>

 </template>

 <script>
 import Loading from '../icons/loading.vue'

 function total() {
 	return this.packs.credits10*10.99 + this.packs.credits50*54.99
 	+ this.packs.credits100*109.99 + this.packs.credits1000*1010
 }

 //Gets the secret key specific to chosen payment amount and user
 function getSecret() {
 	document.getElementById('credits-errors').textContent = ''
 	this.loading = true
 	return fetch('/panel/secret', {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'packs': this.packs})
 	}).then((response) => {
 		if (response.ok) {
 			return response.text()
 		} else {
 			document.getElementById('credits-errors').textContent =
 			`${response.status}: ${response.statusText}`
 		}
 	}).then(secret => {
 		this.loading = false
 		return secret
 	})
 }

 function pay() {
 	if (this.method == 'payeer') {
 		this.payPayeer()
 	} else if (this.method == 'pm') {
 		this.payPm()
 	}
 }

 function makeInput(name, value) {
 	let input = document.createElement('input')
 	input.type = 'hidden'
 	input.name = name
 	input.value = value
 	return input
 }

 function payPayeer() {
 	fetch('/panel/payeer', {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'packs': this.packs})
 		}).then(response => {return response.json()}).then(data => {
 			let form = document.createElement('form')
 			document.body.appendChild(form)
 			form.method = 'POST'
 			form.action = 'https://payeer.com/merchant/'
 			form.appendChild(this.makeInput('m_shop', data.shop))
 			form.appendChild(this.makeInput('m_orderid', data.transaction))
 			form.appendChild(this.makeInput('m_amount', data.amount))
 			form.appendChild(this.makeInput('m_curr', 'USD'))
 			form.appendChild(this.makeInput('m_desc', data.description))
 			form.appendChild(this.makeInput('m_sign', data.signature))
 			form.appendChild(this.makeInput('m_params', data.params))
 			form.appendChild(this.makeInput('m_cipher_method', 'AES-256-CBC'))
 			form.submit()
 			/* console.log(data.signature) */
 		})

 }

 function payPm() {
 	fetch('/panel/pm', {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'packs': this.packs})
 		}).then(response => {return response.json()}).then(data => {
 			let form = document.createElement('form')
 			document.body.appendChild(form)
 			form.method = 'POST'
 			form.action = 'https://perfectmoney.is/api/step1.asp'
 			form.appendChild(this.makeInput('PAYEE_ACCOUNT', data.account))
 			form.appendChild(this.makeInput('PAYEE_NAME', 'Trendplays Network'))
 			form.appendChild(this.makeInput('PAYMENT_AMOUNT', data.amount))
 			form.appendChild(this.makeInput('PAYMENT_UNITS', 'USD'))
 			form.appendChild(this.makeInput('PAYMENT_ID', data.transaction))
 			form.appendChild(this.makeInput('STATUS_URL',
 			'https://trendplays.com/hooks/pm-transaction'))
 			form.appendChild(this.makeInput('PAYMENT_URL',
 			'https://trendplays.com/panel/transaction-complete'))
 			form.appendChild(this.makeInput('PAYMENT_URL_METHOD', 'POST'))
 			form.appendChild(this.makeInput('NOPAYMENT_URL',
 			'https://trendplays.com/panel/transaction-failed'))
 			form.appendChild(this.makeInput('NOPAYMENT_URL_METHOD', 'GET'))
 			form.appendChild(this.makeInput('SUGGESTED_MEMO', data.description))
 			form.appendChild(this.makeInput('SUGGESTED_MEMO_NOCHANGE', true))
 			form.submit()
 		})
 }

 function ready() {
 	if (this.packs.credis10 < 0) {
 		return false
 	} else if (this.packs.credis50 < 0) {
 		return false	
 	} else if (this.packs.credis100 < 0) {
 		return false
 	} else if (this.packs.credis1000 < 0) {
 		return false
 	}

 	return this.total > 0 && !this.loading && this.agreed
 }

 export default {
 	components:{Loading},
 	data() {
 		return {packs: {credits10: 0, credits50: 0,
 		credits100: 0, credits1000: 0}, loading: false, method: 'payeer',
 		agreed: false
 		}
 	},
 	computed: {total, ready},
 	methods: {getSecret, pay, payPm, payPayeer, makeInput},
 	props: ['preferred', 'token'],
 	emits: ['purchaseComplete'],
 }
 </script>
--- a/javascript-vue/js/panel/edit-cards.vue
+++ b/javascript-vue/js/panel/edit-cards.vue
@@ -0,0 +1,82 @@
 <template>
 <div v-if="cards && cards.length > 0">
 <div class="saved-cards-heading">
 <h5>Card</h5> <h5>Default</h5> <h5>Delete</h5>
 </div>
 <div v-for="card in cards" :key="card.id" class="saved-card">
 	<span>{{card.card.brand[0].toUpperCase() + card.card.brand.substring(1)}}
 	(••••{{card.card.last4}})</span> 
 	<span><input :checked="card.id == preferred" :value="card.id" name="selected-card" type="radio"
 	@change="change(card.id)"></span>
 	<span><img @click="remove(card.id)" src="../../images/close-icon-black.svg"/></span>
 </div>
 <p id="billing-error"></p>
 </div>
 </template>

 <script>
 function get() {
 	fetch('/panel/cards', {
 		method: 'GET',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token}
 	}).then((response) => {response.json().then(data => {
 		this.cards = data.data
 	})})
 }

 function change(card) {
 	fetch('/panel/change-card', {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'card': card})
 	}).then((response) => {
 		if (response.ok) {
 			response.json().then((data) => {
 				this.cards = data.data
 			})
 		} else {
 			console.log('bad')
 			document.getElementById("billing-error").textContent =
 			`${response.status}: ${response.statusText}`
 		}
 	})
 }

 function remove(card) {
 	if (card.length == 1) {
 		return
 	}

 	fetch('/panel/delete-card', {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'card': card})
 	}).then((response) => {
 		if (response.ok) {
 			response.json().then((data) => {
 				this.cards = data.data
 			})
 		} else {
 			document.getElementById("billing-error").textContent =
 			`${response.status}: ${response.statusText}`
 		}
 	})
 }

 export default {
 	data() {
 		return {cards: null}
 	},
 	methods: {get, change, remove},
 	created() {
 		this.get()
 	},
 	props: ['token', 'preferred'],
 }
 </script>
--- a/javascript-vue/js/panel/order-item.vue
+++ b/javascript-vue/js/panel/order-item.vue
@@ -0,0 +1,71 @@
 <template>
 <div id="overlay" v-if="selected">

 	<img @click="$emit('close')" class="cancel icon"
 	src="../../images/cancel-icon2.svg" alt=""/>
 	<div class="overlay-item">
 		<img v-if="selected.service.site == 'youtube'" class="icon"
 		src="../../images/youtube-icon.svg" alt=""/>
 		<img v-if="selected.service.site == 'instagram'" class="icon"
 		src="../../images/instagram-icon.svg" alt=""/>
 		<img v-if="selected.service.site == 'twitter'" class="icon"
 		src="../../images/twitter.svg" alt=""/>
 		<img v-if="selected.service.site == 'tiktok'" class="icon"
 		src="../../images/tik-tok.svg" alt=""/>
 		<h3>{{selected.service.name}}</h3>

 	<div class="details">
 		<ul>
 			<li><b>Status:</b> <span>{{selected.status.charAt(0).toUpperCase() +
 			selected.status.slice(1)}}</span></li>
 			<li><b>Quantity:</b> <span>{{selected.quantity}}</span></li>
 			<li><b>Remaining:</b> <span>{{selected.remaining}}</span></li>
 			<li><b>URL:</b> <span>{{selected.url}}</span></li>
 		</ul>
 	</div>

 	<div v-if="selected.status == 'processing' || selected.status ==
 	'error'" class="change-url">
 		<h4>URL</h4>
 		<div><input v-model="url" type="url" id="url"></div> 
 		<button @click="saveURL" :disabled="loading">Save
 		<loading-icon v-if="loading"></loading-icon></button>
 		<p id="overlay-error">{{errorMessage}}</p>
 	</div>

 	</div>

 	</div>
 </template>

 <script>
 import LoadingIcon from '../icons/loading.vue'

 function saveURL() {
 	fetch('/panel/save-url', {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'url': this.url, 'order': this.selected.id})
 		}).then(response => {
 			if (response.ok) {
 				this.errorMessage = 'Saved'
 				this.$emit('changeUrl', this.url)
 			} else {
 				this.errorMessage = 'An error occured'
 			}
 		})

 }

 export default {
 	data() {
 		return {loading: false, errorMessage: '', url: this.selected.url}
 	},
 	components: {LoadingIcon},
 	methods: {saveURL},
 	props: ['selected', 'token'],
 	emits: ['changeUrl', 'close']
 }
 </script>
--- a/javascript-vue/js/panel/orders.vue
+++ b/javascript-vue/js/panel/orders.vue
@@ -0,0 +1,100 @@
 <template>
 <div>
 	<section class="pending-pane">
 	<div class="actions"><a class="new-order" href="#new-order">New</a><a
 	class="new-order" href="#credits">Add Credits</a></div>
 	<h4>Pending Orders</h4>
 	<ul>
 		<template v-bind:key='order.id' v-for="order in orders">
 		<div class="pending-item" v-if="order.status == 'pending'">
 			<div class="pending-heading">
 			<li @click="togglePending($event)">{{order.service.name}} ({{order.updated_at}})</li>
 			<img class="chevron" src="../../images/chevron-down.svg" alt="">
 			</div>
 		<div class="pending-content">
 			<p>ID: {{order.id}}<br>URL: {{order.url}}<br>Quantity:
 			{{order.quantity}}<br>Note: {{order.note}}</p>
 		</div>
 		</div>
 		</template>
 	</ul>
 	</section>
 	<div class="info-grey"><p>Orders are typically completed within 1-5
 	days.</p><div></div></div>
 	<section class="history-pane">
 		<h4>Order History</h4>

 	<div class="table-scroller">
 	<table>
 		<thead><th>Date</th><th>ID</th><th>Name</th><th>Status</th>
 		<th>Quantity</th></thead>
 		<tbody>
 		<tr v-bind:key='order.id' v-for='order in
 		orders.slice(historyPage*10-10, historyPage*10)'>
 		<td>{{order.updated_at}}</td>
 		<td>{{order.id}}</td>
 		<td>{{order.service.name}}</td>
 		<td :class="order.status"
 		class="status"><span>{{order.status.charAt(0).toUpperCase() +
 		order.status.slice(1)}}</span></td>
 		<td>{{order.quantity}}</td>
 		<td> <eye @click="select(order)"></eye> </td>
 		</tr>
 		</tbody>
 	</table>
 	</div>

 	<img @click="moveHistory(false)" class="nav-btn left"
 	src="../../images/arrow-left-circle-fill.svg" alt=""/>
 	<p class="nav-legend">{{historyPage}}/{{Math.ceil(orders.length/10)}}</p>
 	<img @click="moveHistory(true)" class="nav-btn right"
 	src="../../images/arrow-right-circle-fill.svg" alt=""/>

 	</section>

 	<order-item v-if="selected" @close="close" :selected="selected"
 	:token="token" @change-url="(url) => selected.url = url"></order-item>

 </div>
 </template>

 <script>
 import Eye from '../icons/eye-fill.vue'
 import OrderItem from './order-item.vue'

 function togglePending(event) {
 	event.target.parentNode.parentNode.classList.toggle('selected')
 }

 function moveHistory(forward) {
 	if (forward) {
 		this.historyPage += 1
 	} else {
 		this.historyPage -= 1
 	}
 	if (this.historyPage < 1) {
 		this.historyPage = 1
 		return
 	} else if (this.historyPage > this.orders.length/10+1) {
 		this.historyPage -= 1
 		return
 	}
 }

 function close() {
 	this.selected = null
 }

 function select(order) {
 	this.selected = order
 }

 export default {
 	components: {Eye, OrderItem},
 	data() {return {historyPage: 1, selected: null}},
 	methods: {
 	togglePending, moveHistory, close, select
 	},
 	props: ['orders', 'token'],
 }
 </script>
--- a/javascript-vue/js/panel/panel.vue
+++ b/javascript-vue/js/panel/panel.vue
@@ -9,7 +9,8 @@
 	{{(user.credits/100).toLocaleString('en')}}</p></section>
 	<section class="alerts-pane"><h4>News and Announcements</h4>
 	<p>We've just launched. Thanks for joining us! Some features are still
 	being tested.</p>
 	being tested. If you experience a delay in credits being added to your
 	account, please wait 24 hours before contacting support@trendplays.com.</p>
 	</section>
 	<section class="recent-pane"><h4>Recent Activity</h4>
 	<table>
--- a/javascript-vue/js/panel/payment-card.vue
+++ b/javascript-vue/js/panel/payment-card.vue
@@ -0,0 +1,42 @@
 <template>
 	<form id="payment-form" action="">
 	<label for="name">Name on Card</label>
 	<input @input="$emit('updateBillingName', $event)" id="billing-name" type="name">
 	<div id="card-element"></div>
 	<div id="card-errors"></div>
 	<div id=save-card>
 	<input name="save-card" type="checkbox" checked="true">
 	<label for="">Save Card</label>
 	</div>
 	</form>
 </template>

 <script>
 function mountPaymentForm() {
 	let card = this.stripe.elements().create('card')
 	card.mount('#card-element')
 	this.$emit('setCard', card)

 	card.on('change', function(event) {
 	let displayError = document.getElementById('card-errors');
 	if (event.error) {
 		displayError.textContent = event.error.message;
 		displayError.textContent = '';
 		this.$emit('cardValid', true)
 	} else {
 		displayError.textContent = '';
 		this.$emit('cardValid', true)
 	}
 	}.bind(this));
 }

 export default {
 	data() {
 		return {billingName: null}
 	},
 	methods: {mountPaymentForm},
 	props: ['stripe'],
 	mounted: mountPaymentForm,
 	emits: ['updateBillingName', 'cardValid', 'setCard']
 }
 </script>
--- a/javascript-vue/js/panel/payment-slider.vue
+++ b/javascript-vue/js/panel/payment-slider.vue
@@ -0,0 +1,17 @@
 <template>
 	<div class="services-menu">
 	<a href="#new-order" :class="{selected: page == 'new-order'}">Services</a>
 	<a href="#credits" :class="{selected: page == 'credits'}">Credits</a>
 	<div :class="page" class="menu-slider"><div></div></div>
 	</div>
 </template>

 <script>
 export default {
 	data() {
 		return {
 			items: null
 		}
 	}
 }
 </script>
--- a/javascript-vue/js/panel/saved-cards.vue
+++ b/javascript-vue/js/panel/saved-cards.vue
@@ -0,0 +1,28 @@
 <template>
 <div v-if="cards">
 <div v-for="(card, index) in cards" :key="card.id" class="saved-card">
 	<span>{{card.card.brand[0].toUpperCase() + card.card.brand.substring(1)}}
 	(••••{{card.card.last4}})</span> 
 	<input :checked="index === 0 || card.id == preferred" :value="card.id" name="selected-card" type="radio"
 	@change="$emit('update:pickedCard', card.id)">
 </div>
 </div>
 </template>

 <script>
 	export default {
 		data() {
 			return {}
 		},
 		mounted() {
 			if (this.cards && this.cards.length > 0) {
 				this.$emit('update:pickedCard', this.cards[0].id)
 			}
 		},
 		unmounted() {
 			this.$emit('update:pickedCard', null)
 		},
 		props: ['token', 'cards', 'preferred'],
 		emits: ['update:pickedCard']
 	}
 </script>
--- a/javascript-vue/js/panel/service-pane.vue
+++ b/javascript-vue/js/panel/service-pane.vue
@@ -0,0 +1,28 @@
 <template>
 <section class="services-pane youtube" >
 	<h4>{{site.charAt(0).toUpperCase() + site.slice(1)}}</h4>
 	<ul :key="service.id" v-for="service in filter">
 		<li v-if="service.available"><span>{{service.name}}</span><span>{{(service.price/100).toLocaleString('en')}}</span><span>{{service.minimum.toLocaleString('en')}}</span><span>{{service.maximum.toLocaleString('en')}}</span>
 <svg @click="$emit('select', service)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
 </svg>
 		</li>
 	</ul>
 	</section>
 </template>

 <script>
 function filter() {
 	if (!this.services || !this.site) {return}

 	return this.services.filter((s) => {
 		return s.site == this.site
 	})
 }

 export default {
 	props: ['services', 'site'],
 	emits: ['select'],
 	computed: {filter}
 }
 </script>
--- a/javascript-vue/js/panel/services.vue
+++ b/javascript-vue/js/panel/services.vue
@@ -0,0 +1,196 @@
 <template>
 <div>
 	<div class="sliding-menu">
 	<a href="#new-order" :class="{selected: page == 'new-order'}">Services</a>
 	<a href="#credits" :class="{selected: page == 'credits'}">Credits</a>
 	<div :class="page" class="menu-slider"><div></div></div>
 	</div>
 	<h4 class="credits-display"><img class="icon" src="../../images/coin-stack.svg" alt=""><span> {{(credits/100).toLocaleString('en')}}</span></h4>

 	<template v-if="page == 'new-order'">

 	<div class="services-legend">
 	<h5>Name</h5><h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5>
 	</div>

 	<ServicePane :site="'youtube'" :services="services"
 	@select="select"></ServicePane>

 	<ServicePane :site="'instagram'" :services="services"
 	@select="select"></ServicePane> 

 	<ServicePane :site="'twitter'" :services="services"
 	@select="select"></ServicePane>

 	<ServicePane :site="'tiktok'" :services="services"
 	@select="select"></ServicePane>

 	<div id="overlay" v-if="selected">

 	<div v-if="!completed" class="overlay-item">
 	<img @click="completed = false; selected = null" class="cancel icon"
 	src="../../images/cancel-icon2.svg" alt=""/>
 		<img v-if="selected.site == 'youtube'" class="icon"
 		src="../../images/youtube-icon.svg" alt=""/>
 		<img v-if="selected.site == 'instagram'" class="icon"
 		src="../../images/instagram-icon.svg" alt=""/>
 		<img v-if="selected.site == 'twitter'" class="icon"
 		src="../../images/twitter.svg" alt=""/>
 		<img v-if="selected.site == 'tiktok'" class="icon"
 		src="../../images/tik-tok.svg" alt=""/>
 		<h3>{{selected.name}}</h3>
 		<h4>Cost: {{(cost).toLocaleString('en')}}</h4>
 		<h4>Quantity</h4>
 		<div><input required :min="selected.minimum" :max="selected.maximum"
 		type="number" v-model="amount" id="selQty"><span> /
 		{{selected.maximum.toLocaleString('en')}}</span></div> 

 		<template v-if="selected.modifier == 'location'">
 		<h4>Location</h4>
 		<div><select required id="country" name="">
 		<option value="usa">USA</option>
 		<option value="canada">Canada</option>
 		<option value="uk">United Kingdom</option>
 		<option value="germany">Germany</option>
 		<option value="france">France</option>
 		</select>
 		</div> 
 		</template>

 		<template v-if="selected.modifier == 'language'">
 		<h4>Location</h4>
 		<div><select required id="language" name="">
 		<option value="english">English</option>
 		<option value="french">French</option>
 		<option value="spanish">Spanish</option>
 		<option value="german">German</option>
 		<option value="arabic">Arabic</option>
 		</select>
 		</div> 
 		</template>

 		<h4>URL</h4>
 		<div><input required type="url" id="url" v-model="url"></div> 
 		<button @click="buyService" :disabled="paying">Submit<loading
 		v-if="paying"></loading></button>
 		<p id="overlay-error">{{errorText}}</p>
 	</div>

 	<div class="overlay-item" v-else-if="completed">
 	<img @click="completed = false; selected = null" class="cancel icon"
 	src="../../images/cancel-icon2.svg" alt=""/>
 	<img class="icon" src="../../images/checked2.svg" alt=""/>
 	<h3>Success!</h3>
 	</div>

 	</div>

 	</template>

 	<credits @purchase-complete="$emit('updateUser')" :preferred="preferred" :token="token" v-if="page == 'credits'"></credits>

 </div>
 </template>

 <script>
 import ServicePane from './service-pane.vue'
 import Credits from './credits.vue'
 import Loading from '../icons/loading.vue'

 function select(service) {
 	this.completed = false
 	if (this.amount < service.minimum){
 		this.amount = service.minimum;
 	}
 	if (this.amount > service.maximum){
 		this.amount = service.maximum;
 	}

 	this.selected = service
 	this.errorText = ''
 }

 function cost() {
 	return (this.selected.price * this.amount / 100000).toFixed(2)
 }

 function buyService() {
 	if (!this.url) {
 		this.errorText = "You must provide a URL."	
 		return
 	} else if (Math.ceil(this.cost > this.credits)) {
 		this.errorText = 'Insuficient Credits'
 		return
 	} else if (this.amount < this.selected.minimum || this.amount > this.selected.maximum) {
 		this.errorText = 'Invalid amount'
 		return
 	}

 	this.paying = true
 	let note = ''
 	let country = document.getElementById('country')
 	let language = document.getElementById('language')

 	if (country) {
 		note = JSON.stringify({'location': country.value})
 	} else if (language) {
 		note = JSON.stringify({'language': language.value})
 	}
 	
 	fetch('/panel/orders', {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'service': this.selected.id,
 		'quantity': this.amount, 'url': this.url, 'note': note}), }).then(
 			response => {
 				if (response.ok) {
 					this.errorText = `Success!`
 					this.completed = true
 					this.$emit('updateUser')
 					this.$emit('updateOrders')
 				} else if (response.status == 520) {
 					this.errorText = 'Insuficient Credits'
 				} else {
 					this.errorText = `Error ${response.status}:
 					${response.statusText}`
 				}

 				this.paying = false
 			}
 		)

 }

 function page() {
 	switch (this.active) {
 		case '#new-order':
 			return 'new-order'
 		case '#credits':
 			return 'credits'
 	}
 }

 export default {
 	data() {
 		return {servicePane: true, services: null, selected: null, amount: 0,
 		paying: false, url: '', completed: false, errorText: ''}
 	},
 	components: {ServicePane, Loading, Credits},
 	props: ['token', 'credits', 'active', 'preferred'],
 	created() {
 		fetch("/panel/services", {
 			method: 'GET',
 			headers: {'Content-Type': 'application/json',
 				'Accept': 'application/json',
 				'X-XSRF-TOKEN': this.token}
 		}).then(response => {
 			response.json().then(data => {this.services = data})
 		})
 	},
 	methods: {select, buyService},
 	computed: {cost, page},
 	emits: ['updateUser', 'updateOrders']
 }
 </script>
--- a/javascript-vue/js/panel/settings.vue
+++ b/javascript-vue/js/panel/settings.vue
@@ -0,0 +1,119 @@
 <template>
 <div>
 	<h2>Settings</h2>
 	<section class="change-name-pane">
 		<h4>Name</h4>
 		<input :value="user.name" name="name" id="changed_name" type="text">
 		<button @click="changeName">Save <loading src="../../images/loading-white.svg" alt=""></loading></button>
 		<span></span>
 	</section>
 	<section class="change-email-pane">
 		<h4>Email</h4>
 		<input :value="user.email" name="email" type="text" id="changed_email">
 		<button @click="changeEmail">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
 		<span></span>
 	</section>
 	<section class="change-password-pane">
 		<h4>Change Password</h4>
 		<h5>Current Password</h5><input name="current_passowrd" id="current_password" type="password">
 		<h5>New Password</h5><input id="new_password" name="password" type="password">
 		<h5>Confirm Password</h5><input id="confirm_password" name="confirm_passowrd" type="password">
 		<button @click="changePassword">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
 		<span></span>
 	</section>
 </div>
 </template>

 <script>
 import Loading from '../icons/loading.vue'

 function changeName() {
 	let name = document.getElementById('changed_name').value
 	let info = document.querySelector('.change-name-pane span')
 	let pane = document.querySelector('.change-name-pane')

 	pane.classList.add('loading')
 	pane.classList.remove('error')
 	fetch("/panel/change-name", {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'name': name}),
 	}).then(response => {
 		if (response.ok) {
 			pane.classList.add('completed')
 			info.textContent = 'Completed'
 		} else {
 			pane.classList.add('error')
 			info.textContent = 'Error: ' + response.status
 		}

 		pane.classList.remove('loading')
 	})
 }

 function changeEmail() {
 	let email = document.getElementById('changed_email').value
 	let info = document.querySelector('.change-email-pane span')
 	let pane = document.querySelector('.change-email-pane')

 	pane.classList.add('loading')
 	pane.classList.remove('error')
 	fetch("/panel/change-email", {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'email': email}),
 	}).then(response => {
 		if (response.ok) {
 			pane.classList.add('completed')
 			info.textContent = 'Verification link sent'
 		} else {
 			pane.classList.add('error')
 			info.textContent = 'Error: ' + response.status
 		}

 		pane.classList.remove('loading')
 	})
 }

 function changePassword() {
 	let info = document.querySelector('.change-password-pane span')
 	let pane = document.querySelector('.change-password-pane')

 	pane.classList.add('loading')
 	pane.classList.remove('error')
 	fetch("/panel/change-password", {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'current_password':
 		document.getElementById('current_password').value,
 		'password': document.getElementById('new_password').value,
 		'password_confirmation':
 		document.getElementById('confirm_password').value}),
 	}).then(response => {
 		response.json().then(data => {console.log(data)})
 		if (response.ok) {
 			pane.classList.add('completed')
 			info.textContent = 'Completed'
 		} else {
 			pane.classList.add('error')
 			info.textContent = 'Error: ' + response.status
 		}

 		pane.classList.remove('loading')
 	})
 }

 export default {
 	components: {Loading,},
 	methods: {
 		changePassword, changeName, changeEmail
 	},
 	props: ['user', 'token']
 }
 </script>
--- a/javascript-vue/js/panel/sidebar.vue
+++ b/javascript-vue/js/panel/sidebar.vue
@@ -0,0 +1,46 @@
 <template>
 <nav id="sidebar">
 <a :class="{selected: active == ''}" href="/panel#">
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door-fill" viewBox="0 0 16 16">
  <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
 </svg>
 </a>
 <a :class="{selected: active == '#orders'}" href="/panel#orders">
 <svg fill="currentColor" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m16.12 1.929-10.891 5.576-4.329-2.13 10.699-5.283c.24-.122.528-.122.78 0z"/><path d="m23.088 5.375-11.082 5.49-4.15-2.045-.6-.305 10.903-5.575.6.304z"/><path d="m11.118 12.447-.012 11.553-10.614-5.539c-.3-.158-.492-.475-.492-.816v-10.688l4.498 2.216v3.896c0 .499.408.913.9.913s.9-.414.9-.913v-2.995l.6.292z"/><path d="m23.988 6.969-11.07 5.466-.012 11.553 11.094-5.793z"/></svg>
 </a>

 <a :class="{selected: active == '#new-order' || active == '#credits'}" href="/panel#new-order">
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10c5.514,0,10-4.486,10-10S17.514,2,12,2z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"></path></svg>
 </a>

 <a :class="{selected: active == '#settings'}" href="/panel#settings">
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
  <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
 </svg>
 </a>

 <a :class="{selected: active == '#support'}" href="/panel#support">
 <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-life-preserver" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M14.43 10.772l-2.788-1.115a4.015 4.015 0 0 1-1.985 1.985l1.115 2.788a7.025 7.025 0 0 0 3.658-3.658zM5.228 14.43l1.115-2.788a4.015 4.015 0 0 1-1.985-1.985L1.57 10.772a7.025 7.025 0 0 0 3.658 3.658zm9.202-9.202a7.025 7.025 0 0 0-3.658-3.658L9.657 4.358a4.015 4.015 0 0 1 1.985 1.985l2.788-1.115zm-8.087-.87L5.228 1.57A7.025 7.025 0 0 0 1.57 5.228l2.788 1.115a4.015 4.015 0 0 1 1.985-1.985zM8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm0-5a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
 </svg>
 </a>

 <a v-if="role == 'admin'" :class="{selected: active == '#admin'}" href="/telescope">
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key-fill" viewBox="0 0 16 16">
  <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
 </svg>
 </a>
 <a :class="{selected: active == '#exit'}" href="/panel#exit">
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-open-fill" viewBox="0 0 16 16">
  <path d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2h.5a.5.5 0 0 1 .5.5V15h-1V2zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
 </svg>
 </a>
 </nav>
 </template>

 <script>
 export default {
 	props: ['active', 'role']
 }
 </script>

--- a/javascript-vue/js/panel/summary.vue
+++ b/javascript-vue/js/panel/summary.vue
@@ -0,0 +1,3 @@
 <template>
 <div id="main">important info here</div>
 </template>
--- a/javascript-vue/js/panel/support.vue
+++ b/javascript-vue/js/panel/support.vue
@@ -0,0 +1,82 @@
 <template>
 <div class="support-section" id="main">

 <h2>Support</h2>

 <loading v-if="loading"></loading>

 <div v-if="!loading && complete" class="dialog">
 	<img class="icon" src="../../images/checked2.svg" alt="">
 	<h3>Ticket sent. An administrator will contact you soon.</h3>
 </div>

 <div v-if="!loading && !complete" id="support-form">

 <label for="">Topic</label>
 <select id="support-topic" name="" v-model="topic">
 	<option value="order">Order</option>
 	<option value="service">Service</option>
 	<option value="credits">Credits</option>
 	<option value="payment">Payment</option>
 	<option value="other">Other</option>
 </select>

 <label for="">Details</label>
 <textarea id="" name="" cols="30" rows="10" v-model="message"></textarea>
 <span class="note-grey">Include any relevant information like the order number,
 service name, etc</span>

 <button @click="send">Submit</button>

 <p class="error-message">{{errorMessage}}</p>

 </div>

 </div>
 </template>


 <script>
 import Loading from '../icons/loading.vue'

 function send() {
 	this.errorMessage = ''

 	if (!this.topic || !this.message) {
 		this.errorMessage = 'Topic and details cannot be blank.'
 		return
 	}

 	this.loading = true

 	fetch("/panel/support", {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token},
 		body: JSON.stringify({'topic': this.topic, 'message': this.message})}).
 		then(response => {
 			if (response.ok) {
 				this.complete = true
 			} else {
 				this.complete = false
 				this.error = true
 				this.errorMessage = `${response.status}:
 				${response.statusText}`
 			}

 			this.loading = false
 		})

 }

 export default {
 	components: {Loading},
 	props: ['user', 'token'],
 	data() {
 		return {loading: false, complete: false, error: false, errorMessage:
 		'', topic: null, message: ''}
 	}, 
 	methods: {send}
 }
 </script>
--- a/javascript-vue/js/panel/transaction-endpoint.vue
+++ b/javascript-vue/js/panel/transaction-endpoint.vue
@@ -0,0 +1,33 @@
 <template>
 <div v-once id="main">

 <div v-if="active == '#transaction-complete' && user.paying" class="status-dialog">
 	<img class="icon" src="../../images/checked2.svg" alt=""/>
 	<h3>Purchase complete.</h3>
 </div>

 <div v-if="active == '#transaction-failed' && user.paying" class="status-dialog">
 	<img class="icon" src="../../images/warning-colored.svg" alt=""/>
 	<h3>Purchase failed.</h3>
 </div>

 </div>
 </template>

 <script>
 export default {
 	props: ['token', 'user', 'active'],
 	emits: ['purchaseComplete'],

 	//Should check that user is actualling in the paying state. If so, send get
 	//request to panel/transaction-end. It's then() should emit a payment
 	//complete to panel for a user state refresh.
 	mounted() {
 	fetch('/panel/clear-paying', {
 		method: 'GET',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 		'X-XSRF-TOKEN': this.token}}).then(() => this.$emit('purchaseComplete'))
 	}
 }
 </script>
--- a/javascript-vue/js/register-area/register-area.vue
+++ b/javascript-vue/js/register-area/register-area.vue
@@ -0,0 +1,168 @@
 <template>
 	<form v-if="active === 'register'" onsubmit = "event.preventDefault(); return false" id="register-form">
 		<h3>Registration</h3>
 		<div>{{errorMessage}}</div>
 		<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 @click="register($event)" class="submit-btn" type="submit">Submit</button>
 	</form>
 	<form v-if="active === 'forgot'" v-on:submit="forgotPassword" 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-if="active === 'register-completed'">
 		<img class="medium-icon" src="../../images/checked2.svg" alt="">
 		<h3>Success!</h3>
 		<p>A verification link has been sent to your inbox.</p>
 	</div>
 	<div v-if="active === 'forgot-completed'">
 		<img class="medium-icon" src="../../images/checked2.svg" alt="">
 		<h3>Success!</h3>
 		<p>A password reset link has been sent.</p>
 	</div>
 	<div v-if="active === 'error'">
 		<img class="medium-icon" src="../../images/warning-colored.svg" alt="">
 		<h3>An Error Occured.</h3>
 		<p>{{`${error}: ${errorMessage}`}}</p>
 	</div>
 	<div v-on:click="closeArea" class="cancel-button"></div>
 </template>

 <script>
 function getCookie(name) {
  var re = new RegExp(name + "=([^;]+)")
  var value = re.exec(document.cookie)

  let v = (value != null) ? unescape(value[1]) : null
  return v
 }

 function getToken() {
 	return fetch("/sanctum/csrf-cookie", {
 		method: 'GET'
 	}).then( () => {
 		this.token = this.getCookie('XSRF-TOKEN')
 		return this.token
 	})
 }
 	function register(event) {
 		event.preventDefault();
 		event.stopPropagation();

 		this.errorMessage = ''
 		let name = document.getElementById("register-name").value
 		let email = document.getElementById("register-email").value
 		let password = document.getElementById("register-password").value
 		let password_confirmation = document.getElementById("confirm-password").value

 		this.active = 'loading'

 		this.getToken().then(() => {fetch("/register", {
 			method: 'POST',
 			headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 			'X-XSRF-TOKEN': this.token},
 			body: JSON.stringify({"name": name,
 			"email": email,
 			"password": password,
 			"password_confirmation": password_confirmation})})
 		.then(response => {
 			//Give completed or error
 			if (response.ok) {
 				this.active = 'register-completed'
 			} else if (response.status != 500) {
 				response.json().then((e) => {
 					try {
 						for (let i in e.errors) {
 							this.errorMessage = e.errors[i].flat().join("\n") +
 							"\n" + this.errorMessage
 						}
 					} catch (x) {
 						this.errorMessage = e.message
 						}
 					})
 					this.active = 'register'
 			} else {
 				this.errorMessage = response.statusText
 				this.active = 'register'
 				}
 		});
 		})
 		return false
 	}

 	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('');
 		}
 	}

 	function forgotPassword(event) {
 		let email = document.getElementById("forgot-email").value
 		this.active = 'loading'
 		fetch("/forgot-password", {
 			method: 'POST',
 			headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 			'X-XSRF-TOKEN': this.token},
 			body: JSON.stringify({"email": email})})
 		.then(response => {
 			if (response.ok) {
 				this.active = 'forgot-completed'
 			} else {
 				this.error = response.status
 				this.errorMessage = response.statusText
 				this.active = 'error'
 			}
 			/* console.log(response.json()) */
 		});
 		event.preventDefault();
 	}

 	module.exports = {
 		data() {
 		return {active: 'register', token: '', errorMessage: ''}
 		},
 		methods: {
 			getToken,
 			getCookie,
 			register,
 			checkPasswords,
 			forgotPassword,
 			closeArea() {
 				document.querySelector(".register-area").classList.remove("active")
 			},
 		},
 		mounted() {
 			this.getToken()			
 		}
 	}
 </script>