Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add profile page

Browse source
This commit is contained in:
Jordan Blasenhauer 2023-12-14 17:37:58 +01:00
parent 549bbe170d
commit cab17e0610
8 changed files with 441 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/ui/main.py
View file

@ -517,6 +517,48 @@ def home():
)
@app.route("/profile", methods=["GET", "POST"])
@login_required
def profile():
if request.method == "POST":
# Check form data validity
if not request.form:
flash("Missing form data.", "error")
return redirect(url_for("profile"))
if not any(key in request.form for key in ("admin_username", "admin_password", "admin_password_check")):
flash("Missing either admin_username, admin_password or admin_password_check.", "error")
return redirect(url_for("profile"))
error = False
if len(request.form["admin_username"]) > 256:
flash("The admin username is too long. It must be less than 256 characters.", "error")
error = True
if request.form["admin_password"] != request.form["admin_password_check"]:
flash("The passwords do not match.", "error")
error = True
if not USER_PASSWORD_RX.match(request.form["admin_password"]):
flash("The admin password is not strong enough. It must contain at least 8 characters, including at least 1 uppercase letter, 1 lowercase letter, 1 number and 1 special character (#@?!$%^&*-).", "error")
error = True
if error:
return redirect(url_for("profile"))
# TODO: Update username and password (if changed)
return Response(status=200)
return render_template(
"profile.html",
title="Profile",
username=getenv("ADMIN_USERNAME", ""),
password=getenv("ADMIN_PASSWORD", ""),
dark_mode=app.config["DARK_MODE"],
)
@app.route("/instances", methods=["GET", "POST"])
@login_required
def instances():

2
src/ui/static/css/dashboard.css
View file

File diff suppressed because one or more lines are too long

4
src/ui/static/js/cache.js
View file

@ -33,8 +33,8 @@ class Download {
window.open(
`${location.href.replace(
"cache",
"jobs",
)}/download?job_name=${jobName}&file_name=${fileName}`,
"jobs"
)}/download?job_name=${jobName}&file_name=${fileName}`
);
}
}

5
src/ui/static/js/global.js
View file

@ -47,12 +47,9 @@ class News {
return res.json();
})
.then((res) => {
console.log(res);
return this.render(res.data);
});
} catch (err) {
console.log(err);
}
} catch (err) {}
});
}

98
src/ui/static/js/profile.js Normal file
View file

@ -0,0 +1,98 @@
class SubmitProfile {
constructor() {
this.pwEl = document.querySelector("#admin_password");
this.pwCheckEl = document.querySelector("#admin_password_check");
this.pwAlertEl = document.querySelector("[data-pw-alert]");
this.formEl = document.querySelector("#profile-form");
this.init();
}
init() {
// Check password to send
this.checkSamePW();
this.pwCheckEl.addEventListener("input", (e) => {
this.checkSamePW();
});
this.pwEl.addEventListener("input", (e) => {
this.checkSamePW();
});
// Submit
this.formEl.addEventListener("submit", (e) => {
// Case not same PW
if (this.pwEl.value !== this.pwCheckEl.value) return e.preventDefault();
this.formEl.submit();
});
}
checkSamePW() {
if (!this.pwEl.value || !this.pwCheckEl.value) return this.hidePWAlert();
if (this.pwEl.value !== this.pwCheckEl.value) return this.showPWAlert();
return this.hidePWAlert();
}
hidePWAlert() {
this.pwCheckEl.classList.remove(
"focus:!border-red-500",
"focus:valid:!border-red-500",
"active:!border-red-500",
"active:valid:!border-red-500",
"valid:!border-red-500"
);
this.pwAlertEl.classList.add("opacity-0");
this.pwAlertEl.setAttribute("aria-hidden", "true");
}
showPWAlert() {
this.pwCheckEl.classList.add(
"focus:!border-red-500",
"focus:valid:!border-red-500",
"active:!border-red-500",
"active:valid:!border-red-500",
"valid:!border-red-500"
);
this.pwAlertEl.classList.remove("opacity-0");
this.pwAlertEl.setAttribute("aria-hidden", "false");
}
}
class PwBtn {
constructor() {
this.init();
}
init() {
window.addEventListener("click", (e) => {
if (!e.target.getAttribute("data-setting-password")) return;
const passwordContainer = e.target.closest("[data-input-group]");
const inpEl = passwordContainer.querySelector("input");
const invBtn = passwordContainer.querySelector(
'[data-setting-password="invisible"]'
);
const visBtn = passwordContainer.querySelector(
'[data-setting-password="visible"]'
);
inpEl.setAttribute(
"type",
inpEl.getAttribute("type") === "password" ? "text" : "password"
);
if (inpEl.getAttribute("type") === "password") {
invBtn.classList.add("hidden");
visBtn.classList.add("flex");
visBtn.classList.remove("hidden");
} else {
visBtn.classList.add("hidden");
invBtn.classList.add("flex");
invBtn.classList.remove("hidden");
}
});
}
}
const setPWBtn = new PwBtn();
const setSubmit = new SubmitProfile();

2
src/ui/templates/head.html vendored
View file

@ -43,5 +43,7 @@
/>
{% elif current_endpoint == "jobs" %}
<script type="module" src="./js/jobs.js"></script>
{% elif current_endpoint == "profile" %}
<script defer src="./js/profile.js"></script>
{% endif %}
</head>

42
src/ui/templates/menu.html vendored
View file

@ -23,7 +23,7 @@
<!-- left sidebar -->
<aside
data-sidebar-menu
class="transition-all mt-[4.5rem] fixed flex inset-y-0 flex-wrap justify-between w-full p-0 my-4 overflow-y-auto antialiased transition-transform duration-200 -translate-x-full bg-white border-0 shadow-xl dark:shadow-none dark:bg-slate-850 dark:brightness-110 max-w-64 z-[1000] xl:ml-6 rounded-2xl xl:left-0 xl:translate-x-0"
class="transition-all mt-[4.5rem] fixed flex inset-y-0 flex-wrap justify-between w-full p-0 my-4 overflow-y-auto antialiased duration-200 -translate-x-full bg-white border-0 shadow-xl dark:shadow-none dark:bg-slate-850 dark:brightness-110 max-w-64 z-[1000] xl:ml-6 rounded-2xl xl:left-0 xl:translate-x-0"
aria-expanded="false"
>
<!-- close btn-->
@ -86,7 +86,6 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
@ -118,7 +117,6 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
@ -149,7 +147,6 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
@ -180,7 +177,6 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
@ -211,7 +207,6 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
@ -247,7 +242,6 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
@ -278,7 +272,6 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
@ -309,7 +302,6 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
@ -340,7 +332,6 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
@ -355,6 +346,37 @@
</a>
</li>
<!-- end item -->
<li class="mt-0.5 w-full">
<a
class="{% if current_endpoint == 'profile' %}font-semibold text-slate-700 dark:bg-primary/50 rounded-lg dark:hover:bg-primary/60 bg-primary/20 hover:bg-primary/30{% else %}dark:hover:bg-primary/20 hover:bg-primary/5 {% endif %} hover:rounded-lg dark:text-white dark:opacity-80 py-1 text-sm ease-nav-brand my-0 mx-2 flex items-center whitespace-nowrap px-4 transition"
href="{% if current_endpoint == 'profile' %}javascript:void(0){% else %}loading?next={{ url_for('profile') }}{% endif %}"
>
<div
class="mr-2 flex items-center justify-center rounded-lg bg-center stroke-0 text-center p-1 xl:p-1.5"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="stroke-teal-600 h-6 w-6 relative"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</div>
<span
class="ml-1 duration-300 opacity-100 pointer-events-none ease"
>
Profile
</span>
</a>
</li>
<!-- end item -->
</ul>
<!-- end default anchor -->

263
src/ui/templates/profile.html vendored Normal file
View file

@ -0,0 +1,263 @@
{% extends "base.html" %} {% block content %} {% set current_endpoint =
url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<div
class="w-full overflow-hidden overflow-y-auto overflow-x-auto max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<h5 class="my-2 font-bold dark:text-white/90 mx-2">PROFILE</h5>
<div class="grid grid-cols-12 justify-items-center w-full">
<div
class="flex flex-col relative col-span-12 md:col-span-6 lg:col-span-4 px-4 my-2 md:px-6 md:my-3 md:col-span-6 lg:px-6 lg:my-3 max-w-[400px] w-full"
>
<h5
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
>
Username
</h5>
<label class="sr-only" for="profile_username">Username</label>
<input
type="text"
id="profile_username"
name="profile_username"
class="col-span-12 regular-input"
placeholder="enter username"
value="{{ username }}"
disabled
pattern="(.*?)"
maxlength="256"
/>
</div>
<div
data-input-group
class="flex flex-col relative col-span-12 md:col-span-6 lg:col-span-4 px-4 my-2 md:px-6 md:my-3 md:col-span-6 lg:px-6 lg:my-3 max-w-[400px] w-full"
>
<h5
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
>
Password
</h5>
<label class="sr-only" for="profile_password">Password</label>
<input
type="password"
id="profile_password"
name="profile_password"
class="col-span-12 regular-input"
placeholder="enter password"
value="{{ password }}"
pattern="^(?=.*?\d)(?=.*?[ !\u0022#$%&'\(\)*+,.\/:;<=>?@\[\\\]^_`\u007B\u007C\u007D\u007E\u002D]).{8,}$"
minlength="8"
disabled
/>
<div
data-setting-password-container
class="absolute flex right-8 h-5 w-5 top-[60%]"
>
<button
data-setting-password="visible"
class="h-5 w-5 flex items-center align-middle"
type="button"
>
<svg
class="fill-primary pointer-events-none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"
/>
</svg>
</button>
<button
data-setting-password="invisible"
class="hidden -translate-y-0.2 scale-110 h-5 w-5 items-center align-middle"
>
<svg
class="fill-primary pointer-events-none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
>
<path
d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
class="w-full overflow-hidden overflow-y-auto overflow-x-auto max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<h5 class="my-2 font-bold dark:text-white/90 mx-2">EDIT PROFILE</h5>
<form
class="grid grid-cols-12 w-full justify-items-center"
id="profile-form"
action="profile"
method="POST"
autocomplete="off"
>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input
type="hidden"
name="next"
value="{{ request.values.get('next', '') }}"
/>
<!-- username inpt-->
<div
class="flex flex-col relative col-span-12 md:col-span-6 lg:col-span-4 px-4 my-2 md:px-6 md:my-3 md:col-span-6 lg:px-6 lg:my-3 max-w-[400px] w-full"
>
<h5
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
>
Username
</h5>
<label class="sr-only" for="admin_username">Username</label>
<input
type="text"
id="admin_username"
name="admin_username"
class="col-span-12 regular-input"
placeholder="enter username"
value="{{ username }}"
pattern="(.*?)"
maxlength="256"
required
/>
</div>
<!-- end username inpt-->
<!-- password inpt-->
<div
data-input-group
class="flex flex-col relative col-span-12 md:col-span-6 lg:col-span-4 px-4 my-2 md:px-6 md:my-3 md:col-span-6 lg:px-6 lg:my-3 max-w-[400px] w-full"
>
<h5
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
>
New password
</h5>
<label class="sr-only" for="admin_password">New Password</label>
<input
type="password"
id="admin_password"
name="admin_password"
class="col-span-12 regular-input"
placeholder="enter password"
value=""
pattern="^(?=.*?\d)(?=.*?[ !\u0022#$%&'\(\)*+,.\/:;<=>?@\[\\\]^_`\u007B\u007C\u007D\u007E\u002D]).{8,}$"
minlength="8"
required
/>
<div
data-setting-password-container
class="absolute flex right-8 h-5 w-5 top-[60%] md:top-11"
>
<button
data-setting-password="visible"
class="h-5 w-5 flex items-center align-middle"
type="button"
>
<svg
class="fill-primary pointer-events-none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"
/>
</svg>
</button>
<button
data-setting-password="invisible"
class="hidden -translate-y-0.2 scale-110 h-5 w-5 items-center align-middle"
>
<svg
class="fill-primary pointer-events-none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
>
<path
d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"
/>
</svg>
</button>
</div>
</div>
<!-- end password inpt-->
<!-- password inpt-->
<div
data-input-group
class="flex flex-col relative col-span-12 md:col-span-6 lg:col-span-4 px-4 my-2 md:px-6 md:my-3 md:col-span-6 lg:px-6 lg:my-3 max-w-[400px] w-full"
>
<h5
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
>
Confirm New Password
</h5>
<label class="sr-only" for="admin_password_check"
>Confirm new password
</label>
<input
type="password"
id="admin_password_check"
name="admin_password_check"
class="col-span-12 regular-input"
placeholder="confirm password"
value=""
pattern="^(?=.*?\d)(?=.*?[ !\u0022#$%&'\(\)*+,.\/:;<=>?@\[\\\]^_`\u007B\u007C\u007D\u007E\u002D]).{8,}$"
minlength="8"
required
/>
<div
data-setting-password-container
class="absolute flex right-8 h-5 w-5 top-[43%] md:top-[45%]"
>
<button
data-setting-password="visible"
class="h-5 w-5 flex items-center align-middle"
type="button"
>
<svg
class="fill-primary pointer-events-none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"
/>
</svg>
</button>
<button
data-setting-password="invisible"
class="hidden -translate-y-0.2 scale-110 h-5 w-5 items-center align-middle"
>
<svg
class="fill-primary pointer-events-none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
>
<path
d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"
/>
</svg>
</button>
</div>
<strong class="opacity-0 font-normal text-sm text-red-500" data-pw-alert
>Value does not match password
</strong>
</div>
<div class="col-span-12 flex justify-center">
<button
type="submit"
id="profile-button"
name="profile-button"
value="profile"
class="valid-btn"
>
Save
</button>
</div>
</form>
</div>
{% endblock %}