278 lines
8.3 KiB
HTML
278 lines
8.3 KiB
HTML
<!doctype html>
|
|
<title>Astral Tech - Profile</title>
|
|
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="static/style.css" />
|
|
<link rel="stylesheet" href="static/card.css" />
|
|
<link rel="stylesheet" href="static/error/error.css" />
|
|
<link rel="stylesheet" href="static/profile_page.css" />
|
|
<link rel="stylesheet" href="static/progress_bar.css" />
|
|
<link rel="stylesheet" href="static/cursor.css" />
|
|
|
|
<div id="popup_background" class="blocked hidden"></div>
|
|
|
|
<div id="change_password_dialogue" class="card static_center hidden">
|
|
<div class="dialouge_title">Change Password</div>
|
|
<button id="close_password_dialogue">X</button>
|
|
|
|
<hr
|
|
style="
|
|
border: 0;
|
|
border-top: 1px solid var(--border-subtle);
|
|
margin: 20px 0;
|
|
margin-bottom: 0px;
|
|
margin-top: 0px;
|
|
"
|
|
/>
|
|
|
|
<div id="password_error" class="error hidden">
|
|
<div id="password_text"></div>
|
|
<button id="password_error_close_button" class="close_error_button">
|
|
X
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="input_label">Current password</label><br />
|
|
<div class="password_box">
|
|
<input
|
|
type="password"
|
|
id="current_password"
|
|
name="current_password"
|
|
placeholder=""
|
|
required
|
|
/>
|
|
<button type="button" class="show_password_toggle closed"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="input_label">New password</label><br />
|
|
<div class="password_box">
|
|
<input
|
|
type="password"
|
|
id="new_password"
|
|
name="new_password"
|
|
placeholder=""
|
|
required
|
|
/>
|
|
<button type="button" class="show_password_toggle closed"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="input_label">New password (repeat)</label><br />
|
|
<div class="password_box">
|
|
<input
|
|
type="password"
|
|
id="new_password_repeat"
|
|
name="new_password_repeat"
|
|
placeholder=""
|
|
required
|
|
/>
|
|
<button type="button" class="show_password_toggle closed"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="input_label" id="strengh-label">Strength: Weak</label
|
|
><br />
|
|
<div class="progress-bar">
|
|
<div
|
|
class="progress-bar-progress"
|
|
id="password-progress"
|
|
style="width: 0%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<button id="final_change_password_button">Change Password</button>
|
|
</div>
|
|
|
|
<div id="resize_photo_dialouge" class="card static_center hidden">
|
|
<div id="image_container">
|
|
<img id="new_profile_image" alt="new-profile-image" />
|
|
<div id="darken_part"></div>
|
|
</div>
|
|
<div id="resize_photo_box">
|
|
<div id="top_left_resize" class="resize_anchor"></div>
|
|
<div id="top_right_resize" class="resize_anchor"></div>
|
|
<div id="bottom_left_resize" class="resize_anchor"></div>
|
|
<div id="bottom_right_resize" class="resize_anchor"></div>
|
|
</div>
|
|
<button id="confirm_change">Confirm Change</button>
|
|
</div>
|
|
|
|
<img id="logo_image" alt="logo" src="/logo" />
|
|
<div id="main_content">
|
|
<div class="cards">
|
|
<div id="user-card" class="card">
|
|
<div id="picture_holder">
|
|
<img
|
|
src="/avatar?user={{.Username}}"
|
|
class="profile-pic"
|
|
alt="User Image"
|
|
/>
|
|
|
|
<input
|
|
type="file"
|
|
id="file_input"
|
|
accept=".jpg,.jpeg"
|
|
style="display: none"
|
|
/>
|
|
|
|
<button id="edit_picture_button">
|
|
<img
|
|
src="/static/images/crayon_icon.png"
|
|
id="edit_picture_image"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<h1>{{.DisplayName}}</h1>
|
|
<hr
|
|
style="
|
|
border: 0;
|
|
border-top: 1px solid var(--border-subtle);
|
|
margin: 20px 0;
|
|
"
|
|
/>
|
|
|
|
<div style="text-align: left">
|
|
<span class="data-label">Username</span>
|
|
<div class="data-value">{{.Username}}</div>
|
|
<span class="data-label">Primary Email</span>
|
|
<div class="data-value">{{.Email}}</div>
|
|
</div>
|
|
|
|
<button class="bottom_button" id="change_password_button">
|
|
<input
|
|
id="csrf_token_storage"
|
|
type="hidden"
|
|
name="csrf_token"
|
|
value="{{.CSRFToken}}"
|
|
/>
|
|
Change Password
|
|
</button>
|
|
|
|
<form action="/logout" method="POST" style="display: inline-block">
|
|
<button class="bottom_button" id="signout_button">
|
|
<input
|
|
id="csrf_token_storage"
|
|
type="hidden"
|
|
name="csrf_token"
|
|
value="{{.CSRFToken}}"
|
|
/>
|
|
Sign Out
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/javascript/cursor.js" type="text/javascript"></script>
|
|
<script
|
|
src="/static/javascript/resize_photo_dialouge.js"
|
|
type="text/javascript"
|
|
></script>
|
|
|
|
<script type="text/javascript">
|
|
const button = document.getElementById("edit_picture_button");
|
|
const fileInput = document.getElementById("file_input");
|
|
const confirm_change = document.getElementById("confirm_change");
|
|
const new_profile_image = document.getElementById("new_profile_image");
|
|
|
|
button.addEventListener("click", () => {
|
|
fileInput.click();
|
|
});
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
var currentPreviewURL = null,
|
|
image = null,
|
|
file = null;
|
|
|
|
var x_start = 0,
|
|
y_start = 0;
|
|
|
|
var bitmap;
|
|
|
|
fileInput.addEventListener("change", async () => {
|
|
document.getElementById("popup_background").classList.remove("hidden");
|
|
|
|
file = fileInput.files[0];
|
|
if (!file) return;
|
|
if (file.type !== "image/jpeg") {
|
|
alert("Only JPEG images are allowed.");
|
|
fileInput.value = "";
|
|
document.getElementById("popup_background").classList.add("hidden");
|
|
return;
|
|
}
|
|
|
|
document
|
|
.getElementById("resize_photo_dialouge")
|
|
.classList.remove("hidden");
|
|
|
|
image = URL.createObjectURL(file);
|
|
bitmap = await createImageBitmap(file);
|
|
|
|
new_profile_image.src = image;
|
|
|
|
resize_photo_box.style.setProperty(
|
|
"--image-width",
|
|
bitmap.width + "px",
|
|
);
|
|
|
|
new_profile_image.style.setProperty("--x-offset", "0px");
|
|
new_profile_image.style.setProperty("--y-offset", "0px");
|
|
resize_photo_box.style.setProperty("--size", "350px");
|
|
});
|
|
|
|
confirm_change.addEventListener("click", async () => {
|
|
document
|
|
.getElementById("resize_photo_dialouge")
|
|
.classList.add("hidden");
|
|
|
|
const formData = new FormData();
|
|
formData.append("photo", file);
|
|
formData.append(
|
|
"csrf_token",
|
|
document.getElementById("csrf_token_storage").value,
|
|
);
|
|
const res = await fetch("/change-photo", {
|
|
method: "POST",
|
|
body: formData,
|
|
credentials: "include",
|
|
});
|
|
const text = await res.text();
|
|
|
|
document.getElementById("popup_background").classList.add("hidden");
|
|
|
|
const img = document.querySelector(".profile-pic");
|
|
|
|
if (currentPreviewURL != null) {
|
|
URL.revokeObjectURL(currentPreviewURL);
|
|
}
|
|
|
|
img.src = image;
|
|
currentPreviewURL = image;
|
|
});
|
|
</script>
|
|
|
|
<script src="/static/error/error.js" type="text/javascript"></script>
|
|
<script
|
|
src="/static/javascript/password_strength.js"
|
|
type="text/javascript"
|
|
></script>
|
|
<script
|
|
src="/static/javascript/handle_password_change.js"
|
|
type="text/javascript"
|
|
></script>
|
|
|
|
<script
|
|
src="/static/javascript/show_password.js"
|
|
type="text/javascript"
|
|
></script>
|