From ab67f6726ff4c45f9fc3eeff31a1a7bc9265c255 Mon Sep 17 00:00:00 2001 From: Immanuel Onyeka Date: Sun, 18 Jul 2021 23:06:12 -0400 Subject: [PATCH] Add more ES6 code --- javascript-vue/js/app.js | 1 + javascript-vue/js/bootstrap.js | 28 +++ javascript-vue/js/icons/eye-fill.vue | 8 + javascript-vue/js/icons/instagram.vue | 67 ++++++ javascript-vue/js/icons/loading.vue | 3 + javascript-vue/js/icons/plus-fill.vue | 5 + javascript-vue/js/icons/plus.vue | 6 + javascript-vue/js/icons/youtube.vue | 39 ++++ javascript-vue/js/main.js | 116 +++++++++++ javascript-vue/js/panel/admin.vue | 0 javascript-vue/js/panel/credits.vue | 188 +++++++++++++++++ javascript-vue/js/panel/edit-cards.vue | 82 ++++++++ javascript-vue/js/panel/order-item.vue | 71 +++++++ javascript-vue/js/panel/orders.vue | 100 +++++++++ {vue => javascript-vue/js/panel}/panel.vue | 3 +- javascript-vue/js/panel/payment-card.vue | 42 ++++ javascript-vue/js/panel/payment-slider.vue | 17 ++ javascript-vue/js/panel/saved-cards.vue | 28 +++ javascript-vue/js/panel/service-pane.vue | 28 +++ javascript-vue/js/panel/services.vue | 196 ++++++++++++++++++ javascript-vue/js/panel/settings.vue | 119 +++++++++++ javascript-vue/js/panel/sidebar.vue | 46 ++++ javascript-vue/js/panel/summary.vue | 3 + javascript-vue/js/panel/support.vue | 82 ++++++++ .../js/panel/transaction-endpoint.vue | 33 +++ .../js/register-area/register-area.vue | 168 +++++++++++++++ 26 files changed, 1478 insertions(+), 1 deletion(-) create mode 100644 javascript-vue/js/app.js create mode 100644 javascript-vue/js/bootstrap.js create mode 100644 javascript-vue/js/icons/eye-fill.vue create mode 100644 javascript-vue/js/icons/instagram.vue create mode 100644 javascript-vue/js/icons/loading.vue create mode 100644 javascript-vue/js/icons/plus-fill.vue create mode 100644 javascript-vue/js/icons/plus.vue create mode 100644 javascript-vue/js/icons/youtube.vue create mode 100644 javascript-vue/js/main.js create mode 100644 javascript-vue/js/panel/admin.vue create mode 100644 javascript-vue/js/panel/credits.vue create mode 100644 javascript-vue/js/panel/edit-cards.vue create mode 100644 javascript-vue/js/panel/order-item.vue create mode 100644 javascript-vue/js/panel/orders.vue rename {vue => javascript-vue/js/panel}/panel.vue (95%) create mode 100644 javascript-vue/js/panel/payment-card.vue create mode 100644 javascript-vue/js/panel/payment-slider.vue create mode 100644 javascript-vue/js/panel/saved-cards.vue create mode 100644 javascript-vue/js/panel/service-pane.vue create mode 100644 javascript-vue/js/panel/services.vue create mode 100644 javascript-vue/js/panel/settings.vue create mode 100644 javascript-vue/js/panel/sidebar.vue create mode 100644 javascript-vue/js/panel/summary.vue create mode 100644 javascript-vue/js/panel/support.vue create mode 100644 javascript-vue/js/panel/transaction-endpoint.vue create mode 100644 javascript-vue/js/register-area/register-area.vue diff --git a/javascript-vue/js/app.js b/javascript-vue/js/app.js new file mode 100644 index 0000000..40c55f6 --- /dev/null +++ b/javascript-vue/js/app.js @@ -0,0 +1 @@ +require('./bootstrap'); diff --git a/javascript-vue/js/bootstrap.js b/javascript-vue/js/bootstrap.js new file mode 100644 index 0000000..6922577 --- /dev/null +++ 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 +// }); diff --git a/javascript-vue/js/icons/eye-fill.vue b/javascript-vue/js/icons/eye-fill.vue new file mode 100644 index 0000000..726eed7 --- /dev/null +++ b/javascript-vue/js/icons/eye-fill.vue @@ -0,0 +1,8 @@ + diff --git a/javascript-vue/js/icons/instagram.vue b/javascript-vue/js/icons/instagram.vue new file mode 100644 index 0000000..cd4ec42 --- /dev/null +++ b/javascript-vue/js/icons/instagram.vue @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/javascript-vue/js/icons/loading.vue b/javascript-vue/js/icons/loading.vue new file mode 100644 index 0000000..10fd5d3 --- /dev/null +++ b/javascript-vue/js/icons/loading.vue @@ -0,0 +1,3 @@ + diff --git a/javascript-vue/js/icons/plus-fill.vue b/javascript-vue/js/icons/plus-fill.vue new file mode 100644 index 0000000..4a86388 --- /dev/null +++ b/javascript-vue/js/icons/plus-fill.vue @@ -0,0 +1,5 @@ + diff --git a/javascript-vue/js/icons/plus.vue b/javascript-vue/js/icons/plus.vue new file mode 100644 index 0000000..b917ed6 --- /dev/null +++ b/javascript-vue/js/icons/plus.vue @@ -0,0 +1,6 @@ + diff --git a/javascript-vue/js/icons/youtube.vue b/javascript-vue/js/icons/youtube.vue new file mode 100644 index 0000000..1bf5548 --- /dev/null +++ b/javascript-vue/js/icons/youtube.vue @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/javascript-vue/js/main.js b/javascript-vue/js/main.js new file mode 100644 index 0000000..4ba0b70 --- /dev/null +++ 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} +} + diff --git a/javascript-vue/js/panel/admin.vue b/javascript-vue/js/panel/admin.vue new file mode 100644 index 0000000..e69de29 diff --git a/javascript-vue/js/panel/credits.vue b/javascript-vue/js/panel/credits.vue new file mode 100644 index 0000000..90e1fc0 --- /dev/null +++ b/javascript-vue/js/panel/credits.vue @@ -0,0 +1,188 @@ + + + diff --git a/javascript-vue/js/panel/edit-cards.vue b/javascript-vue/js/panel/edit-cards.vue new file mode 100644 index 0000000..31bf0ac --- /dev/null +++ b/javascript-vue/js/panel/edit-cards.vue @@ -0,0 +1,82 @@ + + + diff --git a/javascript-vue/js/panel/order-item.vue b/javascript-vue/js/panel/order-item.vue new file mode 100644 index 0000000..171dad3 --- /dev/null +++ b/javascript-vue/js/panel/order-item.vue @@ -0,0 +1,71 @@ + + + diff --git a/javascript-vue/js/panel/orders.vue b/javascript-vue/js/panel/orders.vue new file mode 100644 index 0000000..c743c09 --- /dev/null +++ b/javascript-vue/js/panel/orders.vue @@ -0,0 +1,100 @@ + + + diff --git a/vue/panel.vue b/javascript-vue/js/panel/panel.vue similarity index 95% rename from vue/panel.vue rename to javascript-vue/js/panel/panel.vue index 08e866a..3dcde3c 100644 --- a/vue/panel.vue +++ b/javascript-vue/js/panel/panel.vue @@ -9,7 +9,8 @@ {{(user.credits/100).toLocaleString('en')}}

News and Announcements

We've just launched. Thanks for joining us! Some features are still - being tested.

+ being tested. If you experience a delay in credits being added to your + account, please wait 24 hours before contacting support@trendplays.com.

Recent Activity

diff --git a/javascript-vue/js/panel/payment-card.vue b/javascript-vue/js/panel/payment-card.vue new file mode 100644 index 0000000..7bdb90a --- /dev/null +++ b/javascript-vue/js/panel/payment-card.vue @@ -0,0 +1,42 @@ + + + diff --git a/javascript-vue/js/panel/payment-slider.vue b/javascript-vue/js/panel/payment-slider.vue new file mode 100644 index 0000000..cba5483 --- /dev/null +++ b/javascript-vue/js/panel/payment-slider.vue @@ -0,0 +1,17 @@ + + + diff --git a/javascript-vue/js/panel/saved-cards.vue b/javascript-vue/js/panel/saved-cards.vue new file mode 100644 index 0000000..3a6a6dc --- /dev/null +++ b/javascript-vue/js/panel/saved-cards.vue @@ -0,0 +1,28 @@ + + + diff --git a/javascript-vue/js/panel/service-pane.vue b/javascript-vue/js/panel/service-pane.vue new file mode 100644 index 0000000..c96b1ab --- /dev/null +++ b/javascript-vue/js/panel/service-pane.vue @@ -0,0 +1,28 @@ + + + diff --git a/javascript-vue/js/panel/services.vue b/javascript-vue/js/panel/services.vue new file mode 100644 index 0000000..899db6d --- /dev/null +++ b/javascript-vue/js/panel/services.vue @@ -0,0 +1,196 @@ + + + diff --git a/javascript-vue/js/panel/settings.vue b/javascript-vue/js/panel/settings.vue new file mode 100644 index 0000000..21df833 --- /dev/null +++ b/javascript-vue/js/panel/settings.vue @@ -0,0 +1,119 @@ + + + diff --git a/javascript-vue/js/panel/sidebar.vue b/javascript-vue/js/panel/sidebar.vue new file mode 100644 index 0000000..4404fdb --- /dev/null +++ b/javascript-vue/js/panel/sidebar.vue @@ -0,0 +1,46 @@ + + + + diff --git a/javascript-vue/js/panel/summary.vue b/javascript-vue/js/panel/summary.vue new file mode 100644 index 0000000..9a8bdf5 --- /dev/null +++ b/javascript-vue/js/panel/summary.vue @@ -0,0 +1,3 @@ + diff --git a/javascript-vue/js/panel/support.vue b/javascript-vue/js/panel/support.vue new file mode 100644 index 0000000..b9af205 --- /dev/null +++ b/javascript-vue/js/panel/support.vue @@ -0,0 +1,82 @@ + + + + diff --git a/javascript-vue/js/panel/transaction-endpoint.vue b/javascript-vue/js/panel/transaction-endpoint.vue new file mode 100644 index 0000000..68d6da6 --- /dev/null +++ b/javascript-vue/js/panel/transaction-endpoint.vue @@ -0,0 +1,33 @@ + + + diff --git a/javascript-vue/js/register-area/register-area.vue b/javascript-vue/js/register-area/register-area.vue new file mode 100644 index 0000000..311fa3a --- /dev/null +++ b/javascript-vue/js/register-area/register-area.vue @@ -0,0 +1,168 @@ + + +