sfja.skp/maotube
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'Change design' (#2) from Reimar/maotube:design into main

Browse Source 
Reviewed-on: #2
This commit is contained in:
Simon 2024-01-19 23:26:10 +00:00
commit 697f1818ab
6 changed files with 64 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.js
View File

@ -45,7 +45,7 @@ app.post("/api/register", async (req, res) => {
} }
const passwordHash = await bcrypt.hash(password, 10); const passwordHash = await bcrypt.hash(password, 10);
const id = users.length; const id = users.length;
const user = { id, username, password: passwordHash }; const user = { id, username, passwordHash };
users.push(user); users.push(user);
return res.status(200).json({ ok: true, user }); return res.status(200).json({ ok: true, user });
}); });
@ -59,7 +59,7 @@ app.post("/api/login", async (req, res) => {
if (user === undefined) { if (user === undefined) {
return res.status(400).json({ ok: false, error: "wrong username/password" }); return res.status(400).json({ ok: false, error: "wrong username/password" });
} }
if (!await bcrypt.compare(password, user.password)) { if (!await bcrypt.compare(password, user.passwordHash)) {
return res.status(400).json({ ok: false, error: "wrong username/password" }); return res.status(400).json({ ok: false, error: "wrong username/password" });
} }
sessions = sessions.filter(session => session.userId !== user.id); sessions = sessions.filter(session => session.userId !== user.id);

8
public/header.js
View File

@ -26,10 +26,16 @@ function displayHeader() {
document.querySelector("h1").outerHTML = ` document.querySelector("h1").outerHTML = `
<header> <header>
<h1>MaoTube</h1> <a href="/">
<h1 id="app-name">MaoTube</h1>
</a>
<nav> <nav>
${links} ${links}
</nav> </nav>
<form method="GET" target="_self" action="/search">
<input type="text" id="search" name="query" placeholder="Search">
<input type="submit" value="Search">
</form>
</header> </header>
` `
} }

5
public/index.html
View File

@ -7,11 +7,6 @@
</head> </head>
<body> <body>
<h1>MaoTube</h1> <h1>MaoTube</h1>
<form method="GET" target="_self" action="/search">
<label for="query"><p>Search</p></label>
<input type="text" id="query" name="query" placeholder="...">
<input type="submit" value="Search">
</form>
<br> <br>
<img src="chairman_1.jpg" alt="The chairman" height="600"> <img src="chairman_1.jpg" alt="The chairman" height="600">
<img src="chairman_2.jpg" alt="The chairman" height="600"> <img src="chairman_2.jpg" alt="The chairman" height="600">

2
public/login/index.html
View File

@ -11,7 +11,7 @@
<label for="username"><p>Username</p></label> <label for="username"><p>Username</p></label>
<input type="text" name="username" id="username"> <input type="text" name="username" id="username">
<label for="password"><p>Password</p></label> <label for="password"><p>Password</p></label>
<input type="text" name="password" id="password"> <input type="password" name="password" id="password">
<br> <br>
<br> <br>
<input type="submit" id="submit" value="Login"> <input type="submit" id="submit" value="Login">

2
public/register/index.html
View File

@ -11,7 +11,7 @@
<label for="username"><p>Username</p></label> <label for="username"><p>Username</p></label>
<input type="text" name="username" id="username"> <input type="text" name="username" id="username">
<label for="password"><p>Password</p></label> <label for="password"><p>Password</p></label>
<input type="text" name="password" id="password"> <input type="password" name="password" id="password">
<br> <br>
<br> <br>
<input type="submit" id="submit" value="Register"> <input type="submit" id="submit" value="Register">

50
public/style.css
View File

@ -9,9 +9,18 @@
body { body {
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 0;
text-align: center; text-align: center;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
background-color: #dff3f1;
color: #211;
}
@media (prefers-color-scheme: dark) {
body {
background: #211;
color: #dff3f1;
}
} }
.mao-error { .mao-error {
@ -58,3 +67,42 @@ ul#video-list {
#video-player { #video-player {
max-height: 80vh; max-height: 80vh;
} }
header {
display: flex;
align-items: center;
gap: 30px;
background-image: linear-gradient(to bottom, #c51e0e, #FF5722);
padding: 20px;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
color: #fcf4c8;
}
#app-name {
padding-right: 20px;
margin: 0;
}
a {
color: #fcf4c8;
text-decoration: none;
}
#search {
border: none;
outline: none;
padding: 10px;
background-color: rgba(0, 0, 0, 0.2);
transition-duration: 100ms;
color: white;
}
#search:hover {
background-color: rgba(0, 0, 0, 0.3);
}
#search:focus {
background-color: white;
color: black;
}