Seperate javascript according to pathname

app/Http/Controllers/UserController.php

@@ -85,4 +85,12 @@ class UserController extends Controller
 		return response()->json(["status" => "error"]);
 
 	}
+
+	public function logout(Request $request) {
+		Auth::logout();
+		$request->session()->invalidate();
+		$request->session()->regenerateToken();
+		return redirect('/');
+	}
+
 }

build.sh

@@ -5,8 +5,7 @@ export project=$HOME/projects/trendplays
 watch() {
 	npx browser-sync start --proxy 'trendplays.test' -w --files $project/resources &
 	pid=$!
-	sass --load-path=sass --watch --error-css $project/resources/scss/main.scss\
-	$project/public/main.css &
+	sass --load-path=sass --watch --error-css $project/resources/scss:$project/public &
 	pid="$pid $!"
 	trap "kill -TERM $pid" 0 1 2 15
 	find $project/resources/js -type f | entr -n esbuild --sourcemap --outdir=$project/public $project/resources/js/main.js &

public/main.js

@@ -1,30 +1,29 @@
-let toggle = document.querySelector(".nav-toggle");
 let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p");
 let registerToggles = document.querySelectorAll(".register-btn, .register-area	.cancel-button, .services-cards button");
-const passInput = document.getElementById("password");
-const passInput2 = document.getElementById("confirm_password");
 let token = getCookie("XSRF-TOKEN");
-function register(event) {
+function getToken() {
   fetch("/sanctum/csrf-cookie", {
     method: "GET"
-  }).then(function(response) {
-    token = getCookie("XSRF-TOKEN");
-    fetch("/register", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-XSRF-TOKEN": 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
-    });
+  });
+  token = getCookie("XSRF-TOKEN");
+}
+function register(event) {
+  fetch("/register", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-XSRF-TOKEN": 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("sent registration");
     console.log(response.json());
+    console.log(response.ok);
+    console.log(response.message);
   });
   event.preventDefault();
 }
@@ -41,47 +40,55 @@ function checkPasswords() {
   }
 }
 function login(event) {
-  fetch("/sanctum/csrf-cookie", {
-    method: "GET"
-  }).then(function(response) {
-    token = getCookie("XSRF-TOKEN");
-    fetch("/login", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-XSRF-TOKEN": token
-      },
-      body: JSON.stringify({
-        email: document.getElementById("login_email").value,
-        password: document.getElementById("login_password").value
-      })
-    }).then((response2) => {
-      console.log("sent login");
-      console.log(response2.json());
-    });
+  fetch("/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-XSRF-TOKEN": token
+    },
+    body: JSON.stringify({
+      email: document.getElementById("login_email").value,
+      password: document.getElementById("login_password").value
+    })
+  }).then((response) => {
+    console.log(response.json());
+    console.log(response.ok);
+    console.log(response.message);
   });
   event.preventDefault();
 }
-toggle.addEventListener("click", function() {
+function resendLink(event) {
+  console.log("clicked");
+  event.preventDefault();
+}
+function toggleNav() {
   heroText.forEach((item) => {
     item.classList.toggle("hidden");
   });
   document.querySelector("nav form.login").classList.toggle("active");
   this.classList.toggle("toggled");
-});
-for (i = 0; i < registerToggles.length; i++) {
-  registerToggles[i].addEventListener("click", function() {
-    document.querySelector(".register-area").classList.toggle("active");
-  });
 }
-let cols = document.getElementsByClassName("collapsible");
-for (i = 0; i < cols.length; i++) {
-  cols[i].addEventListener("click", function() {
-    this.classList.toggle("active");
-  });
+if (!token) {
+  getToken();
+}
+if (window.location.pathname == "/") {
+  document.getElementById("nav_toggle").addEventListener("click", toggleNav);
+  document.getElementById("register-form").addEventListener("submit", register);
+  document.getElementById("login_form").addEventListener("submit", login);
+  for (i = 0; i < registerToggles.length; i++) {
+    registerToggles[i].addEventListener("click", function() {
+      document.querySelector(".register-area").classList.toggle("active");
+    });
+  }
+  let cols = document.getElementsByClassName("collapsible");
+  for (i = 0; i < cols.length; i++) {
+    cols[i].addEventListener("click", function() {
+      this.classList.toggle("active");
+    });
+  }
+  document.getElementById("register-password").oninput = checkPasswords;
+  document.getElementById("confirm-password").oninput = checkPasswords;
+} else if (window.location.pathname == "/verify-email") {
+  document.getElementById("resend_verification").addEventListener("click", resendLink);
 }
-document.getElementById("register-form").addEventListener("submit", register);
-document.getElementById("login_form").addEventListener("submit", login);
-passInput2.oninput = checkPasswords;
-passInput.oninput = checkPasswords;
 //# sourceMappingURL=main.js.map

resources/js/main.js

@@ -1,28 +1,29 @@
-let toggle = document.querySelector(".nav-toggle")
 let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
 let registerToggles = document.querySelectorAll(".register-btn, .register-area\
 	.cancel-button, .services-cards button")
-const passInput = document.getElementById("password")
-const passInput2 = document.getElementById("confirm_password")
 let token = getCookie('XSRF-TOKEN')
 
-function register(event) {
+function getToken() {
 	fetch("/sanctum/csrf-cookie", {
 		method: 'GET'
-	}).then( function(response) {
-		token = getCookie('XSRF-TOKEN')
-		fetch("/register", {
-			method: 'POST',
-			headers: {'Content-Type': 'application/json',
-			'X-XSRF-TOKEN': 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('sent registration');
-			console.log(response.json())
-		});
+	})
+	token = getCookie('XSRF-TOKEN')
+}
+
+function register(event) {
+	fetch("/register", {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json',
+		'X-XSRF-TOKEN': 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();
 }
 
@@ -41,52 +42,60 @@ function checkPasswords() {
 }
 
 function login(event) {
-	fetch("/sanctum/csrf-cookie", {
-		method: 'GET'
-	}).then( function(response) {
-		token = getCookie('XSRF-TOKEN')
-		fetch("/login", {
-			method: 'POST',
-			headers: {'Content-Type': 'application/json',
-			'X-XSRF-TOKEN': token},
-			body: JSON.stringify({"email": document.getElementById("login_email").value,
-			"password": document.getElementById("login_password").value}),
-		}).then(response => {
-			console.log('sent login');
-			console.log(response.json())
-		});
+	fetch("/login", {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json',
+		'X-XSRF-TOKEN': token},
+		body: JSON.stringify({"email": document.getElementById("login_email").value,
+		"password": document.getElementById("login_password").value}),
+	}).then(response => {
+		console.log(response.json())
+		console.log(response.ok)
+		console.log(response.message)
 	})
 	event.preventDefault();
 }
 
-toggle.addEventListener("click", function() {
+//Attempt to resend the verification link
+function resendLink(event) {
+	console.log("clicked");
+	event.preventDefault();
+
+}
+
+function toggleNav() {
 	heroText.forEach(item => {
 		item.classList.toggle("hidden")
 	})
 	document.querySelector("nav form.login").classList.toggle("active")
 	this.classList.toggle("toggled")
-	// this.src = "/images/close.svg"
-})
-
-//Triggers for registration menu
-for (i = 0; i < registerToggles.length; i++) {
-	registerToggles[i].addEventListener("click", function() {
-	document.querySelector(".register-area").classList.toggle("active")
-	});
 }
 
+if (!token) {getToken()}
 
-//FAQ code
-let cols = document.getElementsByClassName("collapsible");
-// let ;
+if (window.location.pathname == '/') {
+	document.getElementById('nav_toggle').addEventListener('click', toggleNav)
+	document.getElementById('register-form').addEventListener('submit', register)
+	document.getElementById('login_form').addEventListener('submit', login)
 
-for (i = 0; i < cols.length; i++) {
-	cols[i].addEventListener("click", function() {
-		this.classList.toggle("active");
-	});
+	//Triggers for registration menu
+	for (i = 0; i < registerToggles.length; i++) {
+		registerToggles[i].addEventListener("click", function() {
+		document.querySelector(".register-area").classList.toggle("active")
+		});
+	}
+
+	//FAQ collapsibles
+	let cols = document.getElementsByClassName("collapsible");
+
+	for (i = 0; i < cols.length; i++) {
+		cols[i].addEventListener("click", function() {
+			this.classList.toggle("active");
+		});
+	}
+	document.getElementById("register-password").oninput = checkPasswords
+	document.getElementById("confirm-password").oninput = checkPasswords
+} else if (window.location.pathname == '/verify-email') {
+	document.getElementById('resend_verification').addEventListener("click", resendLink)
 }
 
-document.getElementById('register-form').addEventListener('submit', register)
-document.getElementById('login_form').addEventListener('submit', login)
-passInput2.oninput = checkPasswords
-passInput.oninput = checkPasswords

resources/scss/main.scss

@@ -16,7 +16,6 @@
 
 html body {
 	font-family: 'PatuaOne', 'Times New Roman';
-	background: url("background/interlaced/interlaced.png") repeat;
 	margin: 0;
 }
 
@@ -467,6 +466,11 @@ footer a {
 	display: none;
 }
 
+.loading-icon {
+	width: 50px;
+	height: 50px;
+}
+
 div.register-area {
 	overflow: hidden;
 	height: 0px;
@@ -526,7 +530,6 @@ div.register-area.active {
 	opacity: 1;
 }
 
-
 // Make small screens more usable
 @media (max-width: 720px) {
 	nav { display: block; }

resources/scss/panel.scss

@@ -0,0 +1,23 @@
+@use "vars";
+@use "main";
+
+main {
+	margin-top: 50px;
+	min-height: 40em;
+}
+
+h1 {
+	color: vars.getColor('brand-orange');
+}
+
+.info-heading {
+	text-align: center;
+	margin: 8em 1em 7em 1em;
+	h3 {
+		margin-bottom: 3em;
+	}
+}
+
+.brand-button {
+	@include vars.brand-button("brand-orange");
+}

resources/views/home.blade.php

@@ -36,6 +36,8 @@
 			</div>
 			<button class="submit-btn" type="submit">Submit</button>
 			<div class="cancel-button"></div>
+			<object type="image/svg+xml" class="loading-icon" data="images/loading.svg" alt=""></object>
+<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="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>
 		</form></div>
 	<div class='landing-hero'>
 		<div class='hero-filter'>

resources/views/master.blade.php

@@ -30,7 +30,7 @@ spellcheck='false'>
 			</div>
 			<button class='login-btn'type="login">Log in</button>
 		</form>
-		<div class="nav-toggle"><div>
+		<div id="nav_toggle" class="nav-toggle"><div>
 			
 		@endguest
 			<span class="icon-bar"></span>

resources/views/verify-email.blade.php

@@ -4,11 +4,16 @@
 
 @section('head-metas')
 	@parent
-	<link rel="stylesheet" href="{{asset('main.css')}}">
+	<link rel="stylesheet" href="{{asset('panel.css')}}">
 @endsection
 
 @section('content')
-You must click the verification link emailed to you.
+<main>
+<div class="info-heading">
+	<h3>To continue, we need to make sure your email address is yours. Click the verification link we've sent to you.</h3>
+	<button id="resend_verification" class="brand-button">Resend</button>
+</div>
+</main>
 @endsection
 
 @section('scripts')