399 lines
16 KiB
HTML
399 lines
16 KiB
HTML
{{ template "base-2024.html" . }}
|
|
|
|
{{ define "extrahead" }}
|
|
<script src="{{ static "js/image_selector.js" }}"></script>
|
|
<script src="{{ static "js/templates.js" }}"></script>
|
|
{{ end }}
|
|
|
|
{{ define "content" }}
|
|
<div class="flex justify-center pa3">
|
|
<div class="w-100 mw-site flex g3">
|
|
<div class="w5 flex flex-column g2 flex-shrink-0">
|
|
<div class="sidebar-card bg3 link-normal">
|
|
<div class="pv1 sidebar-card-content flex flex-column">
|
|
<a class="ph2 pv1" href="#profile">Profile</a>
|
|
<a class="ph2 pv1" href="#account">Account</a>
|
|
<a class="ph2 pv1" href="#password">Password</a>
|
|
<a class="ph2 pv1" href="#discord">Discord</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<form id="user_form" class="hmn-form" action="{{ .SubmitUrl }}" method="POST" enctype="multipart/form-data">
|
|
{{ csrftoken .Session }}
|
|
|
|
<script>
|
|
function lengthReporter(inputEl, lengthEl) {
|
|
let updateLength = function() {
|
|
lengthEl.textContent = `${inputEl.value.length}/${inputEl.getAttribute("maxlength")}`;
|
|
}
|
|
inputEl.addEventListener("input", updateLength);
|
|
updateLength();
|
|
}
|
|
</script>
|
|
|
|
<div hidden class="settings_panel flex flex-column g3" data-slug="profile">
|
|
<div class="input-group">
|
|
<label for="realname">Real name</label>
|
|
<input type="text" id="realname" name="realname" maxlength="255" class="w-100" value="{{ .User.Name }}" />
|
|
<div class="f6 tr realname-length">0/255</div>
|
|
<script>
|
|
lengthReporter(document.getElementById("realname"), document.querySelector(".realname-length"));
|
|
</script>
|
|
</div>
|
|
<fieldset>
|
|
<legend class="flex justify-between">
|
|
<span>Avatar</span>
|
|
<a href="javascript:;" class="normal" onclick="openUserAvatarSelector(event)">+ Upload Avatar</a>
|
|
</legend>
|
|
<div class="user_avatar">
|
|
{{ template "image_selector.html" imageselectordata "user_avatar" .User.Avatar false }}
|
|
<div class="show-when-sibling-hidden flex justify-center items-center f6 pa2">Images should be square, and at least 256x256.</div>
|
|
<script>
|
|
let avatarMaxFileSize = {{ .AvatarMaxFileSize }};
|
|
let avatarSelector = new ImageSelector(
|
|
document.querySelector("#user_form"),
|
|
avatarMaxFileSize,
|
|
document.querySelector(".user_avatar"),
|
|
);
|
|
|
|
function openUserAvatarSelector(ev) {
|
|
ev.preventDefault();
|
|
avatarSelector.openFileInput();
|
|
}
|
|
</script>
|
|
</div>
|
|
</fieldset>
|
|
{{ template "link_editor.html" .LinksJSON }}
|
|
<div class="input-group">
|
|
<label for="shortbio">Short bio</label>
|
|
<textarea class="w-100" maxlength="140" data-max-chars="140" name="shortbio" id="shortbio">
|
|
{{- .User.Blurb -}}
|
|
</textarea>
|
|
<div class="f6 tr shortbio-length">0/140</div>
|
|
<script>
|
|
lengthReporter(document.getElementById("shortbio"), document.querySelector(".shortbio-length"));
|
|
</script>
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="longbio">Full bio</label>
|
|
<textarea class="w-100 h5" id="longbio" name="longbio" maxlength="1018" data-max-chars="1018">
|
|
{{- .User.Bio -}}
|
|
</textarea>
|
|
<div class="f6 tr longbio-length">0/1018</div>
|
|
<script>
|
|
lengthReporter(document.getElementById("longbio"), document.querySelector(".longbio-length"));
|
|
</script>
|
|
</div>
|
|
{{ if .User.Signature }}
|
|
<div class="input-group">
|
|
<label for="signature">Forum signature</label>
|
|
<textarea class="w-100" maxlength="255" data-max-chars="255" name="signature" id="signature">
|
|
{{- .User.Signature -}}
|
|
</textarea>
|
|
<div class="f6 tr signature-length">0/255</div>
|
|
<script>
|
|
lengthReporter(document.getElementById("signature"), document.querySelector(".signature-length"));
|
|
</script>
|
|
</div>
|
|
{{ end }}
|
|
<input class="btn-primary self-end" type="submit" value="Save" />
|
|
</div>
|
|
|
|
<div hidden class="settings_panel flex flex-column g3" data-slug="account">
|
|
<div class="input-group">
|
|
<label for="username">Username</label>
|
|
<input id="username" class="w-100" type="text" disabled value="{{ .User.Username }}" />
|
|
<div class="c--dim f6">If you would like to change your username, please <a href="{{ .ContactUrl }}">contact us</a>.</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="email">E-mail</label>
|
|
<input id="email" type="email" name="email" maxlength="254" class="w-100" value="{{ .Email }}" />
|
|
<div>
|
|
<input type="checkbox" name="showemail" id="email_on_profile" {{ if .ShowEmail }}checked{{ end }} />
|
|
<label for="email_on_profile">Show on your profile</label>
|
|
</div>
|
|
</div>
|
|
<input class="btn-primary self-end" type="submit" value="Save" />
|
|
</div>
|
|
|
|
<div class="settings_panel flex flex-column g3" data-slug="password">
|
|
<fieldset>
|
|
<legend>Reset your password</legend>
|
|
<div class="pa3 flex flex-column g2">
|
|
{{ if .HasPassword }}
|
|
<input id="id_old_password" name="old_password" placeholder="Old password" type="password" />
|
|
{{ end }}
|
|
<input name="new_password" placeholder="New password" type="password" />
|
|
<div class="c--dim f6">
|
|
Your password must be 8 or more characters, and must differ from your username{{ if .HasPassword }} and current password{{ end }}.
|
|
Other than that, <a href="http://krebsonsecurity.com/password-dos-and-donts/" class="external" target="_blank">please follow best practices</a>.
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<input class="btn-primary self-end" type="submit" value="Update password" />
|
|
</div>
|
|
|
|
<div class="settings_panel flex flex-column g3" data-slug="discord">
|
|
<div>
|
|
{{ if .DiscordUser }}
|
|
Linked account:
|
|
<span class="b ph2">{{ .DiscordUser.Username }}#{{ .DiscordUser.Discriminator }}</span>
|
|
<a href="javascript:void(0)" onclick="unlinkDiscord()">
|
|
Unlink account
|
|
</a>
|
|
{{ else }}
|
|
You haven't linked your Discord account.
|
|
<a href="{{ .DiscordAuthorizeUrl }}">Link account</a>
|
|
{{ end }}
|
|
</div>
|
|
<div class="input-group">
|
|
<div>
|
|
<input type="checkbox" name="discord-showcase-auto" id="discord-showcase-auto" {{ if .User.DiscordSaveShowcase }}checked{{ end }} {{ if not .DiscordUser }}disabled{{ end }} />
|
|
<label for="discord-showcase-auto">Automatically capture everything I post in <span class="b nowrap">#project-showcase</span></label>
|
|
</div>
|
|
<div class="f6 c--dim">Snippets will only be created while this setting is on.</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<div>
|
|
<input type="checkbox" name="discord-snippet-keep" id="discord-snippet-keep" {{ if not .User.DiscordDeleteSnippetOnMessageDelete }}checked{{ end }} {{ if not .DiscordUser }}disabled{{ end }} />
|
|
<label for="discord-snippet-keep">Keep captured snippets even if I delete them in Discord</label>
|
|
</div>
|
|
</div>
|
|
{{ if .DiscordUser }}
|
|
<div class="mv3 mw6">
|
|
<a href="javascript:void(0)" onclick="discordShowcaseBacklog()">
|
|
Create snippets from all of my <span class="b nowrap">#project-showcase</span> posts
|
|
</a>
|
|
<div class="f7 c--dimmer">
|
|
Use this if you have a backlog of content in <span class="b nowrap">#project-showcase</span> that you want on your profile.
|
|
</div>
|
|
{{ if gt .DiscordNumUnsavedMessages 0 }}
|
|
<div class="f7 c--dimmer">
|
|
<span class="b">WARNING:</span> {{ .DiscordNumUnsavedMessages }} of your messages are currently waiting to be processed. If you run this command now, some snippets may still be missing.
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function updateVisibleSettings() {
|
|
let hash = location.hash;
|
|
if (hash[0] == "#") {
|
|
hash = hash.slice(1);
|
|
}
|
|
|
|
let panels = document.querySelectorAll(".settings_panel");
|
|
let found = false;
|
|
for (let i = 0; i < panels.length; ++i) {
|
|
visible = hash == panels[i].dataset.slug;
|
|
panels[i].hidden = !visible;
|
|
if (visible) {
|
|
found = true;
|
|
}
|
|
}
|
|
if (!found) {
|
|
panels[0].hidden = false;
|
|
}
|
|
}
|
|
|
|
window.addEventListener("hashchange", updateVisibleSettings);
|
|
updateVisibleSettings();
|
|
</script>
|
|
<!--
|
|
<form class="tabbed edit-form" action="{{ .SubmitUrl }}" method="post" enctype="multipart/form-data">
|
|
{{ csrftoken .Session }}
|
|
<div class="tab" data-name="Account" data-slug="account">
|
|
<div class="edit-form-row">
|
|
<div>Username:</div>
|
|
<div>
|
|
<div>{{ .User.Username }}</div>
|
|
<div class="c--dim f7">If you would like to change your username, please <a href="{{ .ContactUrl }}">contact us</a>.</div>
|
|
</div>
|
|
</div>
|
|
<div class="edit-form-row">
|
|
<div class="pt-input-ns">Real name:</div>
|
|
<div>
|
|
<input type="text" name="realname" maxlength="255" class="textbox realname" value="{{ .User.Name }}">
|
|
<div class="c--dim f7">(optional)</div>
|
|
</div>
|
|
</div>
|
|
<div class="edit-form-row">
|
|
<div class="pt-input-ns">Email:</div>
|
|
<div>
|
|
<input type="email" name="email" maxlength="254" class="textbox email" value="{{ .Email }}" />
|
|
<div class="mt1">
|
|
<input type="checkbox" name="showemail" id="email" {{ if .ShowEmail }}checked{{ end }} />
|
|
<label for="email">Show on your profile</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="edit-form-row">
|
|
<div>Avatar:</div>
|
|
<div class="user_avatar">
|
|
{{ template "image_selector.html" imageselectordata "avatar" .Avatar false }}
|
|
<div class="c--dim f7">(Allowed image types: PNG, JPEG and GIF. Avatars may weigh up to 1MB and will be resized if larger than 400x400 pixels)</div>
|
|
</div>
|
|
<script>
|
|
/*
|
|
let avatarMaxFileSize = {{ .AvatarMaxFileSize }};
|
|
let avatarSelector = new ImageSelector(
|
|
document.querySelector("#user_form"),
|
|
avatarMaxFileSize,
|
|
document.querySelector(".user_avatar"),
|
|
);
|
|
*/
|
|
</script>
|
|
</div>
|
|
<div class="edit-form-row">
|
|
<div class="pt-input-ns">Short bio:</div>
|
|
<div>
|
|
<textarea class="shortbio" maxlength="140" data-max-chars="140" name="shortbio">
|
|
{{- .User.Blurb -}}
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="edit-form-row">
|
|
<div class="pt-input-ns">Forum signature:</div>
|
|
<div>
|
|
<textarea class="signature" maxlength="255" data-max-chars="255" name="signature">
|
|
{{- .User.Signature -}}
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="edit-form-row">
|
|
<div></div>
|
|
<div>
|
|
<input type="submit" value="Save profile" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab" data-name="Password" data-slug="password">
|
|
{{ if .HasPassword }}
|
|
<div class="edit-form-row">
|
|
<div class="pt-input-ns">Old password:</div>
|
|
<div>
|
|
<input id="id_old_password" name="old_password" type="password" />
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
<div class="edit-form-row">
|
|
<div class="pt-input-ns">New password:</div>
|
|
<div>
|
|
<input name="new_password" type="password" />
|
|
<div class="c--dim f7 mw6">
|
|
Your password must be 8 or more characters, and must differ from your username{{ if .HasPassword }} and current password{{ end }}.
|
|
Other than that, <a href="http://krebsonsecurity.com/password-dos-and-donts/" class="external" target="_blank">please follow best practices</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="edit-form-row">
|
|
<div></div>
|
|
<div>
|
|
<input type="submit" value="Update password" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab" data-name="Profile Page Options" data-slug="profile">
|
|
<div class="edit-form-row">
|
|
<div class="pt-input-ns">Links:</div>
|
|
<div>
|
|
<textarea class="links" name="links" id="links" maxlength="2048" data-max-chars="2048">
|
|
</textarea>
|
|
<div class="c--dim f7">
|
|
<div>Relevant links to put on your profile.</div>
|
|
<div>Format: url [Title] (e.g. <code>http://example.com/ Example Site</code>)</div>
|
|
<div>(1 per line, 10 max)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="edit-form-row">
|
|
<div class="pt-input-ns">Description:</div>
|
|
<div>
|
|
<textarea class="longbio" name="longbio" maxlength="1018" data-max-chars="1018">
|
|
{{- .User.Bio -}}
|
|
</textarea>
|
|
<div class="c--dim f7">
|
|
<div>Include some information about yourself, such as your background, interests, occupation, etc.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="edit-form-row">
|
|
<div></div>
|
|
<div>
|
|
<input type="submit" value="Save profile" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab" data-name="Discord" data-slug="discord">
|
|
<div>
|
|
{{ if .DiscordUser }}
|
|
Linked account:
|
|
<span class="b ph2">{{ .DiscordUser.Username }}#{{ .DiscordUser.Discriminator }}</span>
|
|
<a href="javascript:void(0)" onclick="unlinkDiscord()">
|
|
Unlink account
|
|
</a>
|
|
{{ else }}
|
|
You haven't linked your Discord account.
|
|
<a href="{{ .DiscordAuthorizeUrl }}">Link account</a>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<div class="mv3">
|
|
<input type="checkbox" name="discord-showcase-auto" id="discord-showcase-auto" {{ if .User.DiscordSaveShowcase }}checked{{ end }} {{ if not .DiscordUser }}disabled{{ end }} />
|
|
<label for="discord-showcase-auto">Automatically capture everything I post in <span class="b nowrap">#project-showcase</span></label>
|
|
<div class="f7 c--dimmer">Snippets will only be created while this setting is on.</div>
|
|
</div>
|
|
|
|
<div class="mv3">
|
|
<input type="checkbox" name="discord-snippet-keep" id="discord-snippet-keep" {{ if not .User.DiscordDeleteSnippetOnMessageDelete }}checked{{ end }} {{ if not .DiscordUser }}disabled{{ end }} />
|
|
<label for="discord-snippet-keep">Keep captured snippets even if I delete them in Discord</label>
|
|
</div>
|
|
|
|
{{ if .DiscordUser }}
|
|
<div class="mv3 mw6">
|
|
<a href="javascript:void(0)" onclick="discordShowcaseBacklog()">
|
|
Create snippets from all of my <span class="b nowrap">#project-showcase</span> posts
|
|
</a>
|
|
<div class="f7 c--dimmer">
|
|
Use this if you have a backlog of content in <span class="b nowrap">#project-showcase</span> that you want on your profile.
|
|
</div>
|
|
{{ if gt .DiscordNumUnsavedMessages 0 }}
|
|
<div class="f7 c--dimmer">
|
|
<span class="b">WARNING:</span> {{ .DiscordNumUnsavedMessages }} of your messages are currently waiting to be processed. If you run this command now, some snippets may still be missing.
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
<input type="submit" value="Save profile" />
|
|
</div>
|
|
</form>
|
|
-->
|
|
|
|
<form id="discord-unlink-form" class="dn" action="{{ .DiscordUnlinkUrl }}" method="POST">
|
|
{{ csrftoken .Session }}
|
|
<script>
|
|
function unlinkDiscord() {
|
|
document.querySelector('#discord-unlink-form').submit();
|
|
}
|
|
</script>
|
|
</form>
|
|
|
|
<form id="discord-showcase-backlog" class="dn" action="{{ .DiscordShowcaseBacklogUrl }}" method="POST">
|
|
{{ csrftoken .Session }}
|
|
<script>
|
|
function discordShowcaseBacklog() {
|
|
document.querySelector('#discord-showcase-backlog').submit();
|
|
}
|
|
</script>
|
|
</form>
|
|
{{ end }}
|