Immanuel
/
trendplays
1
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 1 Wiki アクティビティ
ソースを参照

Seperate javascript according to pathname

tags/v0.1.0
Immanuel Onyeka 4年前
親
0c2d3aeaa9
コミット
56ab2fe9ef
9個のファイルの変更、168行の追加、112行の削除
ユニファイド表示
  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 ファイルの表示

@@ -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 ファイルの表示

@@ -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\ sass --load-path=sass --watch --error-css $project/resources/scss:$project/public &
$project/public/main.css &
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 ファイルの表示

@@ -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"); token = getCookie("XSRF-TOKEN");
fetch("/register", { }
method: "POST", function register(event) {
headers: { fetch("/register", {
"Content-Type": "application/json", method: "POST",
"X-XSRF-TOKEN": token headers: {
}, "Content-Type": "application/json",
body: JSON.stringify({ "X-XSRF-TOKEN": token
name: document.getElementById("register-name").value, },
email: document.getElementById("register-email").value, body: JSON.stringify({
password: document.getElementById("register-password").value name: document.getElementById("register-name").value,
}), email: document.getElementById("register-email").value,
password_confirmation: document.getElementById("confirm-password").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", { fetch("/login", {
method: "GET" method: "POST",
}).then(function(response) { headers: {
token = getCookie("XSRF-TOKEN"); "Content-Type": "application/json",
fetch("/login", { "X-XSRF-TOKEN": token
method: "POST", },
headers: { body: JSON.stringify({
"Content-Type": "application/json", email: document.getElementById("login_email").value,
"X-XSRF-TOKEN": token password: document.getElementById("login_password").value
}, })
body: JSON.stringify({ }).then((response) => {
email: document.getElementById("login_email").value, console.log(response.json());
password: document.getElementById("login_password").value console.log(response.ok);
}) console.log(response.message);
}).then((response2) => {
console.log("sent login");
console.log(response2.json());
});
}); });
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"); if (!token) {
for (i = 0; i < cols.length; i++) { getToken();
cols[i].addEventListener("click", function() { }
this.classList.toggle("active"); 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 ファイルの表示

@@ -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') token = getCookie('XSRF-TOKEN')
fetch("/register", { }
method: 'POST', function register(event) {
headers: {'Content-Type': 'application/json', fetch("/register", {
'X-XSRF-TOKEN': token}, method: 'POST',
body: JSON.stringify({"name": document.getElementById("register-name").value, headers: {'Content-Type': 'application/json',
"email": document.getElementById("register-email").value, 'X-XSRF-TOKEN': token},
"password": document.getElementById("register-password").value}), body: JSON.stringify({"name": document.getElementById("register-name").value,
"password_confirmation": document.getElementById("confirm-password").value}) "email": document.getElementById("register-email").value,
}).then(response => { "password": document.getElementById("register-password").value}),
console.log('sent registration'); "password_confirmation": document.getElementById("confirm-password").value})
console.log(response.json()) .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", { fetch("/login", {
method: 'GET' method: 'POST',
}).then( function(response) { headers: {'Content-Type': 'application/json',
token = getCookie('XSRF-TOKEN') 'X-XSRF-TOKEN': token},
fetch("/login", { body: JSON.stringify({"email": document.getElementById("login_email").value,
method: 'POST', "password": document.getElementById("login_password").value}),
headers: {'Content-Type': 'application/json', }).then(response => {
'X-XSRF-TOKEN': token}, console.log(response.json())
body: JSON.stringify({"email": document.getElementById("login_email").value, console.log(response.ok)
"password": document.getElementById("login_password").value}), console.log(response.message)
}).then(response => {
console.log('sent login');
console.log(response.json())
});
}) })
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 if (window.location.pathname == '/') {
let cols = document.getElementsByClassName("collapsible"); document.getElementById('nav_toggle').addEventListener('click', toggleNav)
// let ; document.getElementById('register-form').addEventListener('submit', register)
document.getElementById('login_form').addEventListener('submit', login)


for (i = 0; i < cols.length; i++) { //Triggers for registration menu
cols[i].addEventListener("click", function() { for (i = 0; i < registerToggles.length; i++) {
this.classList.toggle("active"); 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 ファイルの表示

@@ -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 ファイルの表示

@@ -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 ファイルの表示

@@ -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 ファイルの表示

@@ -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 ファイルの表示

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


書き込み プレビュー
||||||
​x
 
​
000:0
読み込み中…
キャンセル
保存