added bio

This commit is contained in:
Mystikfluu 2022-04-26 19:42:01 +02:00
parent 8d71f47c81
commit 12106f0492
3 changed files with 85 additions and 0 deletions

View File

@ -12,3 +12,20 @@ button {
font-size: 18px; font-size: 18px;
margin: 10px; margin: 10px;
} }
::placeholder{
color: white;
}
#bio {
color:white;
font-size: 20px;
background-color: black;
border: 0px solid black;
border-radius: 7px;
}
.bio {
color:white;
font-size: 20px;
}

37
views/otheruser.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>USERS Page</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h3 id="userName">USER</h3>
<h4 id="userBio">Bio: </h4>
<button id="mentionClick" onclick="mention()">Mention this User in Posts!</button>
<script type="text/javascript">
let other_username = window.location.pathname.split("/")[2]
console.log(other_username.search("@"),other_username);
if(other_username.search("@")==0)other_username=other_username.split("@")[1]
console.log(other_username);
async function getuser() {
let user = await (await fetch("/api/getotheruser?user="+other_username)).json()
document.getElementById('userName').innerText = `${(!user["error"] && "User: "+user.username) || "Error: "+user["error"]}`
document.getElementById('userBio').innerText = `${(!user["error"] && "Bio: "+user.bio) || ""}`
document.title = `${(!user["error"] && user.username+"'s Page") || "No such User!"}`
if(user["error"]) {
document.body.removeChild(document.getElementById("mentionClick"))
}
}
getuser()
function mention() {
window.location.href = `/posts?mention=${other_username}`
}
</script>
</body>
</html>

View File

@ -6,10 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logged In</title> <title>Logged In</title>
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<script src="/js/httppost.js" charset="utf-8"></script>
</head> </head>
<body onload="setuser()"> <body onload="setuser()">
<h1>Welcome Back!</h1> <h1>Welcome Back!</h1>
<h2 id="user">User: USER</h2> <h2 id="user">User: USER</h2>
<br>
<span class="bio">Bio: <input type="text" id="bio" disabled placeholder="wow such empty"></span>
<button id="changeBio" onclick="bioChanger()">Change Bio</button>
<br>
<button onclick="location.assign('/login')">To Login Page</button><button onclick="location.assign('/register')">To Register Page</button> <button onclick="location.assign('/login')">To Login Page</button><button onclick="location.assign('/register')">To Register Page</button>
<br> <br>
<button onclick="location.assign('/changePW')">Want to change your password?</button> <button onclick="location.assign('/changePW')">Want to change your password?</button>
@ -19,9 +24,35 @@
async function setuser() { async function setuser() {
let user = await (await fetch("/api/getuser")).json(); let user = await (await fetch("/api/getuser")).json();
let username let username
let bio
username = user["username"]; username = user["username"];
bio = user["bio"]
if(user["error"])username=user["error"]; if(user["error"])username=user["error"];
if(user["error"])bio=user["error"];
if(!bio)bio="wow such empty"
document.getElementById("user").innerText = `User: ${username}`; document.getElementById("user").innerText = `User: ${username}`;
document.getElementById("bio").placeholder = bio;
}
async function bioChanger() {
document.getElementById("bio").disabled = !document.getElementById("bio").disabled
document.getElementById("changeBio").innerText = (document.getElementById("bio").disabled && "Change Bio") || "Submit"
if(document.getElementById("bio").disabled) {
document.querySelector('style').innerHTML = '::placeholder {color: white;} #bio {border: 0px solid black}'
}
else
{
document.querySelector('style').innerHTML = '::placeholder {color: black;} #bio {border: 2px solid gray}'
}
if(document.getElementById("bio").disabled) {
let response = await sendBio(document.getElementById("bio").value)
console.log(response);
}
}
async function sendBio(str) {
return await post("/api/setBio",{"Bio":str})
} }
</script> </script>