selenite/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9b66df772aac143dd10eb3f3c2959c8c86af0dce
backend/html/profile_edit.html
sky 9b66df772a more html stuff
2025-10-26 18:48:17 -04:00

427 lines
19 KiB
HTML
Executable File
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
<!-- initialize externals -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Selenite",
"alternateName": "selenite.cc",
"url": "https://selenite.cc",
"logo": "https://selenite.cc/favicon.png",
"sameAs": [
"https://github.com/selenite-cc",
"https://youtube.com/@selenitecc",
"https://tiktok.com/@selenitecc",
"https://selenite.cc",
]
}
</script>
<!-- initialize my stuff -->
<script src="/js/all.min.js"></script>
<script src="/js/main.js"></script>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/profile.css" />
<link rel="manifest" href="/manifest.json" />
<!-- seo + other things -->
<title>{{ name }}'s Profile | Selenite</title>
<link rel="icon" href="/favicon.ico" />
<!-- <script>
let audioObject;
document.addEventListener("DOMContentLoaded", ()=>{
let music = false; // {{ is_music }}
if(music) {
let url = "/api/music/download?url=https://soundcloud.com/archive5077/fostered-alcoholism-grayskies"; // {{ music_url }}
let audioObject = new Audio(url);
document.getElementById("enter").addEventListener("click", async ()=>{
document.getElementById("enter").style.backgroundColor = "#00000000"
document.getElementById("enter").style.backdropFilter = "blur(0px)"
document.getElementById("enter").style.opacity = "0";
setTimeout( () => {
document.getElementById("enter").style.display = "none";
audioObject.play();
}, 700);
});
}
})
</script> -->
<script>
let username = "{{ username }}";
let userData;
let songData;
(async () => {
userData = await (await fetch("/u/raw")).json();
})();
function readFileAsDataURL(file) {
console.log("recieved file");
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
reader.readAsDataURL(file);
});
}
let currentState;
async function setProfile() {
console.log(state);
let body;
if (state == "name") {
body = { name: document.getElementById("text").value };
} else if (state == "bio") {
body = { about: document.getElementById("text").value };
} else if (state == "custom") {
body = { custom: document.getElementById("text").value };
} else if (state == "pfp") {
console.log("pfp");
let file = document.getElementById("pfp_upload").files[0];
if (file.size > 4000000) {
file.input = "";
return;
}
const fileData = await readFileAsDataURL(file);
console.log("promise finished");
body = { pfp: fileData };
console.log("body set");
} else if (state == "song") {
body = songData;
console.log("body set");
} else if (state == "clearpfp") {
body = { pfp: "del" };
} else if (state == "close") {
return;
} else if (state == "upload") {
body = { data: { cookies: document.cookie, localStorage: JSON.stringify(localStorage) } };
let data = await (
await fetch("/api/account/upload", {
credentials: "include",
headers: {
"Content-type": "application/json; charset=UTF-8",
},
body: JSON.stringify(body),
method: "POST",
mode: "cors",
})
).json();
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "none";
if (data.success) {
document.getElementById("title").innerText = "Upload successful!";
document.getElementById("text").style.display = "none";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
} else {
document.getElementById("title").innerText = "Upload failed. This probably means something bad happened, send an email to support@selenite.cc or ping @skysthelimit.dev";
document.getElementById("text").style.display = "none";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
}
return;
} else if (state == "download") {
let data = await (
await fetch("/api/account/load", {
credentials: "include",
headers: {
"Content-type": "application/json; charset=UTF-8",
},
method: "GET",
mode: "cors",
})
).json();
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "none";
if (data.success) {
document.getElementById("title").innerText = "Download successful!";
document.getElementById("text").style.display = "none";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
} else {
document.getElementById("title").innerText = "Download failed.";
document.getElementById("body-text").innerText = data.reason;
document.getElementById("body-text").style.display = "flex";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
}
console.log(data);
data = JSON.parse(data.data);
console.log(document.cookie);
let cookies = data.cookies.split("; ");
for (let i = 0; i < cookies.length; i++) {
let cookieData = cookies[i].split("=");
if (cookieData[0] !== "token") {
document.cookie = `${encodeURIComponent(cookieData[0])}=${encodeURIComponent(cookieData[1])}; path=/`;
}
}
localStorage.clear();
let storage = JSON.parse(data.localStorage);
let storeNames = Object.keys(storage);
console.log(localStorage);
for (let i = 0; i < storeNames.length; i++) {
localStorage.setItem(storeNames[i], storage[storeNames[i]]);
}
}
console.log("sending");
body.username = username;
document.getElementById("title").innerText = "processing...";
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "none";
document.getElementById("search").style.display = "none";
document.querySelector("results").style.display = "none";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
let data = await fetch("/api/profile/edit", {
credentials: "include",
headers: {
"Content-type": "application/json; charset=UTF-8",
},
body: JSON.stringify(body),
method: "POST",
mode: "cors",
});
let resp = await data.json();
if(data.status == 200) {
location.reload();
} else {
document.getElementById("title").innerText = "error!";
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "flex";
document.getElementById("body-text").innerText = resp.err;
document.getElementById("clear").style.display = "none";
document.getElementById("text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "none";
document.getElementById("search").style.display = "none";
document.querySelector("results").style.display = "none";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
}
}
document.addEventListener("DOMContentLoaded", async () => {
document.getElementById("pfp_upload").addEventListener("change", (e) => {
if (e.target.files[0].size > 4000000) {
console.log("too big!! no upload!!");
e.target.value = "";
}
});
document.getElementById("submit").addEventListener("click", await setProfile);
document.getElementById("clear").addEventListener("click", async()=>{state="clearpfp";await setProfile()});
document.getElementById("pfp").addEventListener("click", () => {
state = "pfp";
document.getElementById("title").innerText = "upload a new profile picture";
document.getElementById("pfp_upload").style.display = "flex";
document.getElementById("pfp_reminder").style.display = "flex";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "flex";
document.getElementById("text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
document.getElementById("search").style.display = "none";
document.querySelector("results").style.display = "none";
});
document.getElementById("name").addEventListener("click", () => {
state = "name";
document.getElementById("title").innerText = "change your name";
document.getElementById("text").setAttribute("maxlength", "20");
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("text").style.display = "flex";
document.getElementById("text").value = userData["name"];
document.getElementById("counter").innerText = `${document.getElementById("text").value.length} / ${document.getElementById("text").attributes.maxlength.value}`;
document.getElementById("counter").style.display = "flex";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
document.getElementById("search").style.display = "none";
document.querySelector("results").style.display = "none";
});
document.getElementById("about").addEventListener("click", () => {
state = "bio";
document.getElementById("title").innerText = "change your about me";
document.getElementById("text").setAttribute("maxlength", "200");
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("text").style.display = "flex";
document.getElementById("text").value = userData["about"];
document.getElementById("counter").innerText = `${document.getElementById("text").value.length} / ${document.getElementById("text").attributes.maxlength.value}`;
document.getElementById("counter").style.display = "flex";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
document.getElementById("search").style.display = "none";
document.querySelector("results").style.display = "none";
});
document.getElementById("song").addEventListener("click", () => {
state = "song";
document.getElementById("title").innerText = "pick a song";
document.getElementById("text").setAttribute("maxlength", "2048");
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "none";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
document.getElementById("search").style.display = "flex";
document.querySelector("results").style.display = "flex";
})
document.getElementById("close").addEventListener("click", () => {
document.getElementById("popup").style.display = "none";
document.getElementById("blur").style.display = "none";
});
document.getElementById("text").addEventListener("input", () => {
document.getElementById("counter").innerText = `${document.getElementById("text").value.length} / ${document.getElementById("text").attributes.maxlength.value}`;
});
document.getElementById("search").addEventListener("input", async ()=>{
if(document.getElementById("search").value.length > 0) {
let query = document.getElementById("search").value;
let results = await fetch("/api/music/search?q=" + encodeURIComponent(document.getElementById("search").value));
let json = await results.json();
if(document.getElementById("search").value == query) {
document.querySelector("results").display = "flex";
console.log("searched")
let i = 0;
json.tracks.forEach((e)=>{
document.querySelectorAll("result")[i].querySelector("h2").innerText = e.title;
document.querySelectorAll("result")[i].querySelectorAll("p")[0].innerText = e.artists[0].name;
document.querySelectorAll("result")[i].querySelectorAll("p")[1].innerText = e.url.slice(22);
document.querySelectorAll("result")[i].setAttribute("data-url", e.url);
document.querySelectorAll("result")[i].style.display = "flex";
i++;
})
}
} else {
document.querySelectorAll("result").forEach((e) => {
e.removeAttribute("data-url");
e.querySelector("h2").innerText = null;
e.querySelectorAll("p")[0].innerText = null;
e.querySelectorAll("p")[1].innerText = null;
e.style.display = "none";
})
}
})
document.getElementById("upload").addEventListener("click", async () => {
state = "upload";
document.getElementById("title").innerText = "Warning";
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "flex";
document.getElementById("body-text").innerText = "This will overwrite any data you may have saved in the cloud. Click Submit to continue, or X to stop.";
document.getElementById("text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
});
document.getElementById("download").addEventListener("click", async () => {
state = "download";
document.getElementById("title").innerText = "Warning";
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "flex";
document.getElementById("body-text").innerText = "This will overwrite any data you may have saved locally. Click Submit to continue, or X to stop.";
document.getElementById("text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
document.getElementById("blur").style.display = "flex";
});
document.querySelectorAll("result").forEach(async e => {
e.addEventListener("click", async (element) => {
songData = {
url: e.getAttribute("data-url"),
title: e.childNodes[0].innerText,
artist: e.childNodes[1].innerText,
}
console.log(songData);
await setProfile();
})
});
});
</script>
</head>
<body>
<div id="blur"></div>
<div id="popup" style="display: none">
<h1 id="title"></h1>
<p id="body-text"></p>
<input type="text" id="text" />
<input type="text" id="search" placeholder="search a song title here.."/>
<results id="results">
<result><h2></h2><p></p><p></p></result>
<result><h2></h2><p></p><p></p></result>
<result><h2></h2><p></p><p></p></result>
<result><h2></h2><p></p><p></p></result>
<result><h2></h2><p></p><p></p></result>
<result><h2></h2><p></p><p></p></result>
<result><h2></h2><p></p><p></p></result>
<result><h2></h2><p></p><p></p></result>
<result><h2></h2><p></p><p></p></result>
<result><h2></h2><p></p><p></p></result>
</results>
<p id="counter">0 / 0</p>
<input type="file" id="pfp_upload" name="filename" accept=".png,.jpg,.jpeg,.gif,.avif,.webp,.tiff,.svg" />
<p id="pfp_reminder">4 MB file upload max</p>
<button id="clear">Clear Profile Picture</button>
<button id="submit">Submit</button>
<button id="close">X</button>
</div>
<div class="samerow">
<button id="download">download cloud backup</button>
<button id="upload">upload cloud backup</button>
</div>
<h1 class="title">{{ name }}'s profile</h1>
<h3>click on an area to edit</h3>
<p style="font-size: 16px;">share your profile at {{ url_gen }}</p>
{{ staff_buttons }}
<section>
<img src="{{ user_pfp }}" class="pfp edit" id="pfp" />
<div class="profile-element edit" id="name">
<h1>{{ name }}</h1>
<p>/u/{{ username }}</p>
<div class="badges">{{ badges }}</div>
</div>
<div class="profile-element edit" id="song">
<h2>{{ song_title }}</h2>
<h3>{{ song_artist }}</h3>
</div>
<div class="profile-element">
<h2>Joined {{ join_date }}</h2>
<h2>Last online {{ online_time }}</h2>
</div>
</section>
<section class="column edit" id="about">
<h1>about me</h1>
<p class="about">{{ about }}</p>
</section>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink