430 lines
20 KiB
HTML
430 lines
20 KiB
HTML
{% extends "settings.html" %}
|
|
|
|
{% block pagetitle %}Profile Settings - {{'SITE_NAME' | app_config}}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="flex flex-col space-y-4 sm:py-4 my-2.5 sm:my-0">
|
|
|
|
<!-- Avatar section -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Avatar</h2>
|
|
<div class="flex flex-col md:flex-row gap-3">
|
|
<!-- Avatar -->
|
|
<img loading="lazy" src="{{v.profile_url}}" class="flex-shrink-0 w-14 h-14 rounded object-cover">
|
|
<!-- Form -->
|
|
<div>
|
|
<div class="flex space-x-3">
|
|
<!-- Buttons -->
|
|
<form action="/settings/images/profile" method="post" enctype="multipart/form-data">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<label class="btn btn-gray">
|
|
Change avatar
|
|
<input {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} type="file" accept="image/*" hidden name="profile" onchange="form.submit()">
|
|
</label>
|
|
</form>
|
|
{% if v.profileurl %}
|
|
<div>
|
|
<form action="/settings/delete/profile" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<button type="submit" value="Delete" class="btn btn-red">
|
|
<i class="fas fa-trash-alt fa-fw mr-1"></i>
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<!-- Help text -->
|
|
<p class="mt-2 text-xs text-gray-400 mt-3">
|
|
JPG, PNG, GIF files are supported. Max file size is {% if v and v.patron %}8{% else %}4{% endif %} MB.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Banner section -->
|
|
<div class="px-4 py-4 shadow-inset-t-white-10">
|
|
<h2 class="label text-black">Banner</h2>
|
|
<div class="flex flex-col md:flex-row gap-3">
|
|
<!-- Banner -->
|
|
<img loading="lazy" src="{{v.banner_url}}" class="flex-shrink-0 w-48 h-20 rounded object-cover">
|
|
<!-- Form -->
|
|
<div>
|
|
<div class="flex space-x-3">
|
|
<!-- Buttons -->
|
|
<form action="/settings/images/banner" method="post" enctype="multipart/form-data">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<label class="btn btn-gray">
|
|
Change banner
|
|
<input {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} type="file" accept="image/*" hidden name="banner" onchange="form.submit()">
|
|
</label>
|
|
</form>
|
|
{% if v.bannerurl %}
|
|
<div>
|
|
<form action="/settings/delete/banner" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<button type="submit" value="Delete" class="btn btn-red">
|
|
<i class="fas fa-trash-alt fa-fw mr-1"></i>
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<!-- Help text -->
|
|
<p class="mt-2 text-xs text-gray-400 mt-3">
|
|
JPG, PNG, GIF files are supported. Max file size is {% if v and v.patron %}8{% else %}4{% endif %} MB.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="settings-section rounded">
|
|
|
|
<div class="flex">
|
|
|
|
<div class="title w-lg-75 text-md-center">
|
|
<img loading="lazy" src="{{v.banner_url}}" class="banner-pic-135">
|
|
</div>
|
|
|
|
<div class="body w-lg-100 my-auto">
|
|
|
|
<div class="flex">
|
|
|
|
<div>
|
|
<form action="/settings/images/banner" method="post" enctype="multipart/form-data">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<label class="btn btn-secondary text-capitalize mr-2 mb-0">
|
|
Update<input type="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} accept="image/*" hidden name="banner" onchange="form.submit()">
|
|
</label>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
{% if v.bannerurl %}
|
|
<form action="/settings/delete/banner" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<button type="submit" value="Delete" class="btn btn-link fa-lg"><i class="far fa-trash-alt text-danger"></i></button>
|
|
</form>{% endif %}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="text-small-extra text-muted mt-3">JPG, PNG, GIF files are supported. Max file size is {% if v and v.patron %}8{% else %}4{% endif %} MB.</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
<div class="rounded-lg bg-gray-100 border border-gray-300 shadow-inset-t-white-10 p-4">
|
|
<h2 class="label text-black">Linked accounts</h2>
|
|
<div class="flex flex-col space-y-2 divide-y divide-y-800">
|
|
<div>
|
|
{% if v.discord_id %}
|
|
<form action="/settings/remove_discord" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<input type="submit" class="btn btn-red" value="Disconnect Discord">
|
|
</form>
|
|
<p class="mt-2 text-xs text-gray-400 mt-3">
|
|
Disconnecting your Discord account will remove you from the {{'SITE_NAME' | app_config}} Discord server.
|
|
</p>
|
|
{% else %}
|
|
<div class="w-[126px]">
|
|
<a href="/discord" class="btn btn-gray">
|
|
<i class="fab fa-discord fa-fw mr-1"></i>
|
|
Link Discord
|
|
</a>
|
|
</div>
|
|
<p class="mt-2 text-xs text-gray-400 mt-3">
|
|
Link your Discord account to join the {{'SITE_NAME' | app_config}} Discord server.
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Referral & RSS -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Referral code</h2>
|
|
<input type="text" onclick="this.select()" value="{{request.host_url}}signup?ref={{v.username}}" class="m-0.5 p-0.5 bg-white border border-gray-300 text-xs text-black w-80">
|
|
<small class="block mt-1 text-gray-400">
|
|
You have referred <strong>{{v.referral_count}}</strong> members.
|
|
<a href="/badges" class="text-red-500">Learn more</a>.
|
|
</small>
|
|
</div>
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">RSS Feed</h2>
|
|
<input type="text" onclick="this.select()" value="{{('/rss/hot/all') | full_link}}" class="m-0.5 p-0.5 bg-white border border-gray-300 text-xs text-black w-80">
|
|
<small class="block mt-1 text-gray-400">
|
|
You can change the feed by replacing <strong>hot</strong> with whatever sorting you want and <strong>all</strong> with whatever time filter you want.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Username -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Username</h2>
|
|
<form action="/settings/name_change" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<div class="w-full md:w-80">
|
|
<input type="text" name="name" class="form-input" value="{{v.username}}">
|
|
</div>
|
|
<small class="block mt-2 text-gray-400">3-25 characters, including letters, numbers, _ , and -</small>
|
|
<small class="block mt-1 text-gray-400">
|
|
Your original username will always stay reserved for you: <strong>{{v.original_username}}</strong>
|
|
</small>
|
|
<div class="mt-4">
|
|
<input class="ml-auto btn btn-gray" type="submit" value="Change display name">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Anthem -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Profile Anthem</h2>
|
|
<form action="/settings/song_change" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<div class="w-full md:w-80">
|
|
<input type="text" name="song" class="form-input" value="{% if v.song %}https://youtu.be/{{v.song}}{% endif %}" placeholder='Enter a youtube video link here'>
|
|
</div>
|
|
<small class="block mt-2 text-gray-400">Must be a youtube video link</small>
|
|
<div class="mt-4">
|
|
<input class="ml-auto btn btn-gray" type="submit" value="Change profile anthem">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Username Color -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Username Color</h2>
|
|
<form action="/settings/namecolor" id="color-code-form" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<div class="w-full md:w-44">
|
|
<input class="form-input" type="text" name="color" id="color-code" maxlength="6" value="{% if v.namecolor %}{{v.namecolor}}{% endif %}">
|
|
</div>
|
|
<div class="mt-4">
|
|
<input class="ml-auto btn btn-gray" type="submit" value="Change username color">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% if not v.flairchanged %}
|
|
<!-- Flair -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Flair</h2>
|
|
<form id="profile-settings" action="/settings/title_change" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<div class="inline-block w-full md:w-80">
|
|
<input id="customtitlebody" type="text" name="title" class="form-input" placeholder='Enter a flair here' value="{% if v.customtitleplain %}{{v.customtitleplain}}{% endif %}">
|
|
</div>
|
|
<button type="button" class="inline-block ml-2 text-gray-500 hover:text-gray-600" onclick="loadEmojis('customtitlebody')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji">
|
|
<i class="fas fa-smile-beam"></i>
|
|
</button>
|
|
<small class="block mt-2 text-gray-400">Limit of 100 characters</small>
|
|
<div class="mt-4">
|
|
<input class="ml-auto btn btn-gray" type="submit" value="Change flair">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Title Color -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Flair Color</h2>
|
|
<form action="/settings/titlecolor" id="color-code-form" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<div class="w-full md:w-44">
|
|
<input class="form-input" type="text" name="titlecolor" id="color-code" maxlength="6" value="{% if v.titlecolor %}{{v.titlecolor}}{% endif %}">
|
|
</div>
|
|
<div class="mt-4">
|
|
<input class="ml-auto btn btn-gray" type="submit" value="Change flair color">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% if v.verified %}
|
|
<!-- Bluecheck Color -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Bluecheck Color</h2>
|
|
<form action="/settings/titlecolor" id="color-code-form" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<div class="w-full md:w-44">
|
|
<input class="form-input" type="text" name="color" id="color-code" maxlength="6" value="{% if v.titlecolor %}{{v.titlecolor}}{% endif %}">
|
|
</div>
|
|
<div class="mt-4">
|
|
<input class="ml-auto btn btn-gray" type="submit" value="Change flair color">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Bio</h2>
|
|
<form id="profile-bio" action="/settings/profile" method="post" enctype="multipart/form-data">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<div class="input-group mb-2">
|
|
<textarea id="bio-text" class="form-input rounded" aria-label="With textarea" placeholder="Tell the community a bit about yourself." rows="3" name="bio" form="profile-bio" maxlength="1500">{% if v.bio %}{{v.bio}}{% endif %}</textarea>
|
|
</div>
|
|
<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-white border-opacity-10">
|
|
<li>
|
|
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeBold('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Bold">
|
|
<i class="fas fa-bold fa-fw fa-sm"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeItalics('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Italicize">
|
|
<i class="fas fa-italic fa-fw fa-sm"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeQuote('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Quote">
|
|
<i class="fas fa-quote-right fa-fw fa-sm"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="commentForm('bio-text');getGif()">
|
|
<span class="font-bold text-sm text-uppercase" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="loadEmojis('bio-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji">
|
|
<i class="fas fa-smile-beam fa-fw fa-sm"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<small class="block mt-2 text-gray-400">Limit of 1500 characters</small>
|
|
<div class="mt-4">
|
|
<input class="ml-auto btn btn-gray" type="submit" value="Save bio">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Privacy -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Privacy</h2>
|
|
<div class="mb-4">
|
|
<input type="checkbox" id="privateswitch" name="private"{% if v.is_private%} checked{% endif %} onchange="post_toast('/settings/profile?private='+document.getElementById('privateswitch').checked)">
|
|
<label for="privateswitch" class="inline-block pl-2 text-gray-400">Hide my posts and comments from others and search engines.</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="nofollowswitch" name="nofollow"{% if v.is_nofollow%} checked{% endif %} onchange="post_toast('/settings/profile?nofollow='+document.getElementById('nofollowswitch').checked)">
|
|
<label for="nofollowswitch" class="inline-block pl-2 text-gray-400">Prevent other users from following you.</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Avatar section -->
|
|
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Friends</h2>
|
|
<form id="profile-friends" action="/settings/profile" method="post" enctype="multipart/form-data">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<textarea id="friends-text" class="form-input" aria-label="With textarea" placeholder="Enter your friends on the site..." rows="3" name="friends" form="profile-friends" maxlength="1500">{% if v.friends %}{{v.friends}}{% endif %}</textarea>
|
|
<small class="block mt-2 text-gray-400">Limit of 500 characters</small>
|
|
<div class="mt-4">
|
|
<input class="ml-auto btn btn-gray" type="submit" value="Save changes">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="px-4 py-4">
|
|
<h2 class="label text-black">Enemies</h2>
|
|
<form id="profile-enemies" action="/settings/profile" method="post" enctype="multipart/form-data">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<textarea id="enemies-text" class="form-input" aria-label="With textarea" placeholder="Enter your enemies on the site..." rows="3" name="enemies" form="profile-enemies" maxlength="1500">{% if v.enemies %}{{v.enemies}}{% endif %}</textarea>
|
|
<small class="block mt-2 text-gray-400">Limit of 500 characters</small>
|
|
<div class="mt-4">
|
|
<input class="ml-auto btn btn-gray" type="submit" value="Save changes">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section rounded mb-0">
|
|
|
|
{% if v.patron or v.id == 1904 %}
|
|
<div class="body d-lg-flex border-bottom">
|
|
<label class="text-black w-lg-25">Signature</label>
|
|
|
|
<div class="w-lg-100">
|
|
<form id="profile-sig" action="/settings/profile" method="post" enctype="multipart/form-data">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
<div class="input-group mb-2">
|
|
<textarea id="sig-text" class="form-input rounded" aria-label="With textarea" placeholder="Enter a signature..." rows="3" name="sig" form="profile-sig" maxlength="200">{% if v.sig %}{{v.sig}}{% endif %}</textarea>
|
|
</div>
|
|
<div class="flex">
|
|
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-bold" aria-hidden="true" onclick="makeBold('sig-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Bold"></pre>
|
|
|
|
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-italic" aria-hidden="true" onclick="makeItalics('sig-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Italicize"></pre>
|
|
|
|
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-quote-right" aria-hidden="true" onclick="makeQuote('sig-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Quote"></pre>
|
|
|
|
<pre style="padding-top:0.7rem;line-height:1;" class="btn btn-secondary format d-inline-block m-0 font-weight-bolder text-uppercase" onclick="commentForm('sig-text');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</pre>
|
|
|
|
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-smile-beam" onclick="loadEmojis('sig-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji"></pre>
|
|
</div>
|
|
<pre></pre>
|
|
<div class="flex">
|
|
<small>Limit of 200 characters</small>
|
|
<input class="btn btn-primary ml-auto" id="sigSave" type="submit" value="Save Changes">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block modals %}
|
|
{% include "emoji_modal.html" %}
|
|
{% include "gif_modal.html" %}
|
|
{% endblock %}
|
|
|
|
|
|
{% block scripts %}
|
|
<script src="/assets/js/settings_profile.js?v=57"></script>
|
|
|
|
<script src="/assets/js/gif_modal.js?v=56"></script>
|
|
<script src="/assets/js/emoji_modal.js?v=142"></script>
|
|
|
|
<script>
|
|
document.onpaste = function(event) {
|
|
var focused = document.activeElement;
|
|
if (focused.id == 'bio-text') {
|
|
f=document.getElementById('file-upload');
|
|
files = event.clipboardData.files
|
|
filename = files[0].name.toLowerCase()
|
|
if (filename.endsWith(".jpg") || filename.endsWith(".jpeg") || filename.endsWith(".png") || filename.endsWith(".webp") || filename.endsWith(".gif"))
|
|
{
|
|
f.files = files;
|
|
document.getElementById('filename-show').textContent = filename;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|