User settings tabs
This commit is contained in:
Asaf Gartner
parent
a98cce4b4b
commit
b11114b002
|
|
@ -7,18 +7,14 @@
|
||||||
|
|
||||||
{{ define "content" }}
|
{{ define "content" }}
|
||||||
<div class="flex justify-center pa3">
|
<div class="flex justify-center pa3">
|
||||||
<div class="w-100 mw-site flex g3">
|
<div class="w-100 mw-site flex flex-column">
|
||||||
<div class="w5 flex flex-column g2 flex-shrink-0">
|
<div class="bb mb2 flex f6">
|
||||||
<div class="sidebar-card bg3 link-normal">
|
<a class="tab-button ph3 pv1 pointer" href="#profile">Profile</a>
|
||||||
<div class="pv1 sidebar-card-content flex flex-column">
|
<a class="tab-button ph3 pv1 pointer" href="#account">Account</a>
|
||||||
<a class="ph2 pv1" href="#profile">Profile</a>
|
<a class="tab-button ph3 pv1 pointer" href="#password">Password</a>
|
||||||
<a class="ph2 pv1" href="#account">Account</a>
|
<a class="tab-button ph3 pv1 pointer" href="#discord">Discord</a>
|
||||||
<a class="ph2 pv1" href="#password">Password</a>
|
|
||||||
<a class="ph2 pv1" href="#discord">Discord</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-grow-1">
|
<div>
|
||||||
<form id="user_form" class="hmn-form" action="{{ .SubmitUrl }}" method="POST" enctype="multipart/form-data">
|
<form id="user_form" class="hmn-form" action="{{ .SubmitUrl }}" method="POST" enctype="multipart/form-data">
|
||||||
{{ csrftoken .Session }}
|
{{ csrftoken .Session }}
|
||||||
|
|
||||||
|
|
@ -189,194 +185,29 @@
|
||||||
|
|
||||||
let panels = document.querySelectorAll(".settings_panel");
|
let panels = document.querySelectorAll(".settings_panel");
|
||||||
let found = false;
|
let found = false;
|
||||||
|
let slug = "";
|
||||||
for (let i = 0; i < panels.length; ++i) {
|
for (let i = 0; i < panels.length; ++i) {
|
||||||
visible = hash == panels[i].dataset.slug;
|
visible = hash == panels[i].dataset.slug;
|
||||||
panels[i].hidden = !visible;
|
panels[i].hidden = !visible;
|
||||||
if (visible) {
|
if (visible) {
|
||||||
|
slug = panels[i].dataset.slug;
|
||||||
found = true;
|
found = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!found) {
|
if (!found) {
|
||||||
|
slug = panels[0].dataset.slug;
|
||||||
panels[0].hidden = false;
|
panels[0].hidden = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let tabs = document.querySelectorAll(".tab-button");
|
||||||
|
for (let i = 0; i < tabs.length; ++i) {
|
||||||
|
tabs[i].classList.toggle("tab-button-active", tabs[i].getAttribute("href").slice(1) == slug);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener("hashchange", updateVisibleSettings);
|
window.addEventListener("hashchange", updateVisibleSettings);
|
||||||
updateVisibleSettings();
|
updateVisibleSettings();
|
||||||
</script>
|
</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">
|
<form id="discord-unlink-form" class="dn" action="{{ .DiscordUnlinkUrl }}" method="POST">
|
||||||
{{ csrftoken .Session }}
|
{{ csrftoken .Session }}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue