Immanuel
/
trendplays
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

Seperate javascript according to pathname

tags/v0.1.0
Immanuel Onyeka 3 years ago
parent
0c2d3aeaa9
commit
56ab2fe9ef
9 changed files with 168 additions and 112 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -0
      app/Http/Controllers/UserController.php
  2. +1
    -2
      build.sh
  3. +60
    -53
      public/main.js
  4. +61
    -52
      resources/js/main.js
  5. +5
    -2
      resources/scss/main.scss
  6. +23
    -0
      resources/scss/panel.scss
  7. +2
    -0
      resources/views/home.blade.php
  8. +1
    -1
      resources/views/master.blade.php
  9. +7
    -2
      resources/views/verify-email.blade.php

+ 8
- 0
app/Http/Controllers/UserController.php View File

@@ -85,4 +85,12 @@ class UserController extends Controller
return response()->json(["status" => "error"]); return response()->json(["status" => "error"]);


} }

public function logout(Request $request) {
Auth::logout();
$request->session()->invalidate();
$request->session()->regenerateToken();
return redirect('/');
}

} }

+ 1
- 2
build.sh View File

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


+ 60
- 53
public/main.js View File

@@ -1,30 +1,29 @@
let toggle = document.querySelector(".nav-toggle");
let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p"); let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p");
let registerToggles = document.querySelectorAll(".register-btn, .register-area .cancel-button, .services-cards button"); 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"); let token = getCookie("XSRF-TOKEN");
function register(event) {
function getToken() {
fetch("/sanctum/csrf-cookie", { fetch("/sanctum/csrf-cookie", {
method: "GET" 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) => { }).then((response) => {
console.log("sent registration");
console.log(response.json()); console.log(response.json());
console.log(response.ok);
console.log(response.message);
}); });
event.preventDefault(); event.preventDefault();
} }
@@ -41,47 +40,55 @@ function checkPasswords() {
} }
} }
function login(event) { 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(); event.preventDefault();
} }
toggle.addEventListener("click", function() {
function resendLink(event) {
console.log("clicked");
event.preventDefault();
}
function toggleNav() {
heroText.forEach((item) => { heroText.forEach((item) => {
item.classList.toggle("hidden"); item.classList.toggle("hidden");
}); });
document.querySelector("nav form.login").classList.toggle("active"); document.querySelector("nav form.login").classList.toggle("active");
this.classList.toggle("toggled"); 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 //# sourceMappingURL=main.js.map

+ 61
- 52
resources/js/main.js View File

@@ -1,28 +1,29 @@
let toggle = document.querySelector(".nav-toggle")
let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p") let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
let registerToggles = document.querySelectorAll(".register-btn, .register-area\ let registerToggles = document.querySelectorAll(".register-btn, .register-area\
.cancel-button, .services-cards button") .cancel-button, .services-cards button")
const passInput = document.getElementById("password")
const passInput2 = document.getElementById("confirm_password")
let token = getCookie('XSRF-TOKEN') let token = getCookie('XSRF-TOKEN')


function register(event) {
function getToken() {
fetch("/sanctum/csrf-cookie", { fetch("/sanctum/csrf-cookie", {
method: 'GET' 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(); event.preventDefault();
} }


@@ -41,52 +42,60 @@ function checkPasswords() {
} }


function login(event) { 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(); 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 => { heroText.forEach(item => {
item.classList.toggle("hidden") item.classList.toggle("hidden")
}) })
document.querySelector("nav form.login").classList.toggle("active") document.querySelector("nav form.login").classList.toggle("active")
this.classList.toggle("toggled") 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

+ 5
- 2
resources/scss/main.scss View File

@@ -16,7 +16,6 @@


html body { html body {
font-family: 'PatuaOne', 'Times New Roman'; font-family: 'PatuaOne', 'Times New Roman';
background: url("background/interlaced/interlaced.png") repeat;
margin: 0; margin: 0;
} }


@@ -467,6 +466,11 @@ footer a {
display: none; display: none;
} }


.loading-icon {
width: 50px;
height: 50px;
}

div.register-area { div.register-area {
overflow: hidden; overflow: hidden;
height: 0px; height: 0px;
@@ -526,7 +530,6 @@ div.register-area.active {
opacity: 1; opacity: 1;
} }



// Make small screens more usable // Make small screens more usable
@media (max-width: 720px) { @media (max-width: 720px) {
nav { display: block; } nav { display: block; }


+ 23
- 0
resources/scss/panel.scss View File

@@ -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");
}

+ 2
- 0
resources/views/home.blade.php View File

@@ -36,6 +36,8 @@
</div> </div>
<button class="submit-btn" type="submit">Submit</button> <button class="submit-btn" type="submit">Submit</button>
<div class="cancel-button"></div> <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> </form></div>
<div class='landing-hero'> <div class='landing-hero'>
<div class='hero-filter'> <div class='hero-filter'>


+ 1
- 1
resources/views/master.blade.php View File

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


+ 7
- 2
resources/views/verify-email.blade.php View File

@@ -4,11 +4,16 @@


@section('head-metas') @section('head-metas')
@parent @parent
<link rel="stylesheet" href="{{asset('main.css')}}">
<link rel="stylesheet" href="{{asset('panel.css')}}">
@endsection @endsection


@section('content') @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 @endsection


@section('scripts') @section('scripts')


Write Preview
Loading…
Cancel
Save