MarseyWorld/files/templates/settings/personal.html

413 lines
22 KiB
HTML

{% extends "settings/settings.html" %}
{% block pagetitle %}Personal Settings{% endblock %}
{% block content %}
<div class="row settings-page" id="settings-page-personal">
<div class="col col-lg-10">
<div class="settings">
<section id="site-settings-experience-section" class="settings-section-section">
<h5>Site Experience</h5>
<div class="settings-section rounded" id="site-settings-experience">
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label for="patron-status">{{patron}} Status</label>
</div>
<div class="body w-lg-100">
<p>You're a {{TIER_TO_NAME[v.patron] if v.patron else "freeloader"}}!</p>{% if v.patron %} Thanks ily! &lt;3{% endif %}
{% if not v.patron and v.can_see_donate_service %}
<p class="font-italic">To stop freeloading, first <a href="/settings/security#site-settings-email-section">verify your email</a>, then support us on <a href="{{DONATE_LINK}}">{{DONATE_SERVICE}}</a> with the same email, and then click "Claim Donation Rewards" <a href="/settings/security#site-settings-email-section">here</a></p>
{% elif not v.patron %}
<p class="font-italic">To stop freeloading, you can <a href="/donate">donate by crypto</a>. If you do that, please let us know by <a href="/contact">sending us the transaction id via modmail</a> so we can give you your donation rewards manually!</p>
{% endif %}
</div>
</div>
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label>Website Theme</label>
</div>
<div class="body w-lg-100">
<div class="input-group">
<select autocomplete="off" id='theme' class="form-control setting_select" form="profile-settings" name="theme" data-nonce="{{g.nonce}}" data-reload="1">
{% for entry in THEMES %}
<option value="{{entry}}" {% if v.theme == entry %} selected {% endif %}>
{{entry}}
</option>
{% endfor %}
</select>
</div>
</div>
</div>
{{common.color_section('theme-color', '/settings/themecolor', 'themecolor', 'Theme Color', v.themecolor)}}
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label for="background">Website Backgrounds</label>
</div>
<div class="body w-lg-100">
<p>Change the background for the website.</p>
<div class="input-group">
<select autocomplete="off" id='backgroundSelector' class="form-control" form="profile-settings" name="background" data-nonce="{{g.nonce}}" data-onchange="updatebgselection()">
{% for entry in BACKGROUND_CATEGORIES %}
<option value="{{entry}}" {% if v.background and v.background.startswith(entry) %}selected{% endif %}>
{{entry}}
</option>
{% endfor %}
</select>
</div>
<form class="d-flex mt-3 mb-2" id="upload-custom-background" action="/settings/custom_background" method="post" enctype="multipart/form-data">
<input hidden name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
<label class="btn btn-primary" for="upload-custom-background-file">
<i class="fas fa-image mr-1"></i>
{% if v.background and v.background.startswith('/images/') %}
{{v.background}}
{% else %}
Upload custom site background
{% endif %}
</label>
<input autocomplete="off" id="upload-custom-background-file" accept="image/*", type="file" name="file" data-nonce="{{g.nonce}}" onchange_submit hidden>
</form>
{% if v.background %}
<div class="d-flex mb-3">
<button type="button" class="btn btn-danger" data-nonce="{{g.nonce}}" data-onclick="postToastReload(this,'/settings/remove_background')">
<i class="fas fa-image-slash mr-1"></i>
Remove current background
</button>
</div>
{% endif %}
<div id="bgcontainer"></div>
</div>
</div>
</div>
</section>
<section id="site-settings-aesthetic-section" class="settings-section-section">
<h5>Your Aesthetic</h5>
<div class="settings-section rounded" id="site-settings-aesthetic">
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label>National Flag</label>
</div>
<div class="body w-lg-100">
<p>Set a national flag next to your name.</p>
<form action="/settings/flag_change" method="post">
<input hidden type="submit" name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
<input hidden id="flag-body" autocomplete="off" type="text" name="flag" class="form-control" maxlength="32" data-nonce="{{g.nonce}}" data-oninput="submit(this)">
</form>
{% if v.flag %}
<img loading="lazy" class="mr-2" src="{{SITE_FULL_IMAGES}}/e/{{v.flag}}.webp?e=1" height=60 data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{v.flag}}">
{% endif %}
<button type="button" class="btn btn-secondary format px-3" data-nonce="{{g.nonce}}" data-onclick="openEmojiModal(this, 'flag-body', 'Marsey Flags')" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji">
Change National Flag
</button>
</div>
</div>
{% if FEATURES['HOUSES'] %}
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label>House</label>
</div>
<div class="body w-lg-100">
{% if v.house %}
{% set cost = HOUSE_SWITCH_COST %}
<p>Change your house (cost: {{cost | commas}} coins or marseybux).</p>
{% if ' Founder' in v.house %}
<p>Warning: you'll lose your founder status if you join a different house</p>
{% endif %}
{% else %}
{% set cost = HOUSE_JOIN_COST %}
<p>Join a house (cost: {{cost | commas}} coins or marseybux).</p>
{% endif %}
<div class="input-group">
<select data-cost="{{cost}}" id="changing-house"{% if cost > v.coins + v.marseybux or v.bite %}disabled{% endif %} autocomplete="off" id='house' class="form-control setting_select" form="profile-settings" name="house" data-nonce="{{g.nonce}}">
{% for entry in ["None"]+HOUSES %}
<option value="{{entry}}" {% if v.house.startswith(entry) %}selected{% endif %}>
{{entry}}
</option>
{% endfor %}
</select>
</div>
</div>
</div>
{%- endif %}
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label for="profile-picture">Profile Picture</label>
</div>
<div class="title w-lg-25 text-md-center">
<img loading="lazy" alt="your profile picture" src="{{v.profileurl}}" class="profile-pic-75">
</div>
<div class="body w-lg-100 my-auto">
<div class="d-flex">
<div>
<form action="/settings/images/profile" method="post" enctype="multipart/form-data">
<input hidden name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
<label class="btn btn-secondary text-capitalize mr-2 mb-0">
Upload<input autocomplete="off" type="file" accept="image/*" {% if g.is_tor %}disabled{% endif %} hidden name="profile" data-nonce="{{g.nonce}}" onchange_submit>
</label>
</form>
</div>
</div>
<div class="text-small text-muted mt-3">All image files are supported. Max file size is {% if v and v.patron %}16{% else %}8{% endif %} MB.</div>
</div>
</div>
{% if FEATURES['USERS_PROFILE_BANNER'] -%}
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label for="banner">Banner</label>
</div>
<div class="title w-lg-75 text-md-center">
<img loading="lazy" alt="your banner" src="{{v.banner_url}}" class="banner-pic">
</div>
<div class="body w-lg-100 my-auto">
<div class="d-flex">
<div>
<form action="/settings/images/banner" method="post" enctype="multipart/form-data">
<input hidden name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
<label class="btn btn-secondary text-capitalize mr-2 mb-0">
Upload<input autocomplete="off" type="file" {% if g.is_tor %}disabled{% endif %} accept="image/*" hidden name="banner" data-nonce="{{g.nonce}}" onchange_submit>
</label>
</form>
</div>
</div>
<div class="text-small text-muted mt-3">All image files are supported. Max file size is {% if v and v.patron %}16{% else %}8{% endif %} MB.</div>
</div>
</div>
{%- endif %}
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label for="profile_background">Profile Background</label>
</div>
{% if v.profile_background %}
<div class="title w-lg-75 text-md-center">
<img loading="lazy" alt="your profile background" src="{{v.profile_background}}" class="profile-background-pic">
</div>
{% endif %}
<div class="body w-lg-100 my-auto">
<div class="d-flex">
<div>
<form action="/settings/images/profile_background" method="post" enctype="multipart/form-data">
<input hidden name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
<label class="btn btn-secondary text-capitalize mr-2 mb-0">
Upload<input autocomplete="off" type="file" {% if g.is_tor %}disabled{% endif %} accept="image/*" hidden name="profile_background" data-nonce="{{g.nonce}}" onchange_submit>
</label>
</form>
</div>
</div>
<div class="text-small text-muted mt-3">All image files are supported. Max file size is {% if v and v.patron %}16{% else %}8{% endif %} MB.</div>
</div>
</div>
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label for="name">Username</label>
</div>
<div class="body w-lg-100">
<p>Your original username will always stay reserved for you: <code>{{v.original_username}}</code></p>
<form action="/settings/name_change" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendFormXHR(this)">
<input hidden name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
{% if v.patron %}
{% set minlength = 1 %}
{% else %}
{% set minlength = 3 %}
{% endif %}
<input id="name-body" autocomplete="off" type="text" name="name" class="form-control" value="{{v.username}}" minlength="{{minlength}}" maxlength="25" {% if v.namechanged %}disabled{% endif %}>
<small>{{minlength}}-25 characters, including letters, numbers, _ , and -</small>
<div class="d-flex mt-2">
<input autocomplete="off" class="btn btn-primary ml-auto" type="submit" value="Change Display Name" {% if v.namechanged %}disabled{% endif %}>
</div>
</form>
</div>
</div>
{{common.color_section('namecolor', '/settings/namecolor', 'namecolor', 'Name Color', v.name_color)}}
{% if FEATURES['PRONOUNS'] %}
{{common.line_text_section('pronouns', '/settings/pronouns_change', 'pronouns', 'Pronouns', v.pronouns, 'Limit of 15 characters', 'Enter pronouns here', 'Change Pronouns', false, 3, 15, '(\w{1,7})/\w{1,7}(/\w{1,7})?', false)}}
{% endif %}
{{common.line_text_section('flair', '/settings/change_flair', 'flair', 'Flair', v.flair, 'Limit of 100 characters', 'Enter a flair here', 'Change Flair', true, 0, 100, '.*', v.flairchanged)}}
{{common.color_section('flaircolor', '/settings/flaircolor', 'flaircolor', 'Flair Color', v.flaircolor)}}
{% if FEATURES['USERS_PROFILE_SONG'] -%}
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label for="anthem">Profile Anthem</label>
</div>
<div class="body w-lg-100">
<p>You can use an MP3 file or a YouTube video.</p>
<form action="/settings/song_change_mp3" method="post" enctype="multipart/form-data">
<input hidden name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
<label class="btn btn-secondary d-inline-block m-0 mb-3">
<div><i class="fas fa-file"></i>
{% if v.song and v.song|length in (1,2,3,4,5,17) %}
{{v.song}}.mp3
{% else %}
Use an MP3 file (Max size is 8MB)
{% endif %}
</div>
<input autocomplete="off" id="file-upload2" type="file" name="file" {% if g.is_tor %}disabled{% endif %} accept="audio/mpeg" data-nonce="{{g.nonce}}" onchange_submit hidden>
</label>
</form>
<form action="/settings/song_change" method="post">
<input hidden name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
<input class="form-control" style="display:inline;max-width:75%;font-size: min(3.5vw,16px)!important" autocomplete="off" type="text" name="song" class="form-control" value="{% if v.song and v.song|length not in (1,2,3,4,5,17) %}https://youtu.be/{{v.song}}{% endif %}" placeholder='Enter a YouTube video link here'>
<input class="btn btn-primary" style="font-size: min(3.5vw,16px)!important" autocomplete="off" class="btn btn-primary ml-auto" type="submit" value="Submit">
</form>
<br><small>In some browsers, users have to click at least once anywhere in the profile page for the anthem to play.</small>
</div>
</div>
{%- endif %}
{% if FEATURES['USERS_PROFILE_BODYTEXT'] %}
{{common.text_area_section('profile-bio', '/settings/personal', 'bio', 'Bio', v.bio, 'Limit of ' ~ BIO_FRIENDS_ENEMIES_LENGTH_LIMIT ~ ' characters', 'Tell the community a bit about yourself.', true, BIO_FRIENDS_ENEMIES_LENGTH_LIMIT)}}
{% endif %}
{{common.text_area_section('profile-friends', '/settings/personal', 'friends', 'Friends', v.friends, 'Limit of ' ~ BIO_FRIENDS_ENEMIES_LENGTH_LIMIT ~ ' characters', 'Enter your friends on the site...', false, BIO_FRIENDS_ENEMIES_LENGTH_LIMIT)}}
{{common.text_area_section('profile-enemies', '/settings/personal', 'enemies', 'Enemies', v.enemies, 'Limit of ' ~ BIO_FRIENDS_ENEMIES_LENGTH_LIMIT ~ ' characters', 'Enter your enemies on the site...', false, BIO_FRIENDS_ENEMIES_LENGTH_LIMIT)}}
{{common.text_area_section('profile-signature', '/settings/personal', 'sig', 'Signature', v.sig, 'Limit of 200 characters', 'Enter a signature...', true, 200)}}
{{common.toggle_section('Private Mode', 'privateswitch', 'private', v.is_private, 'This will hide your profile page from other users.', false)}}
{% if FEATURES['PATRON_ICONS'] %}
{% set desc = 'Make your donation badges, your lifetime-donated amount, your total award discount, and your patron icon visible to everyone instead of just you.' %}
{% else %}
{% set desc = 'Make your donation badges, your lifetime-donated amount, and your total award discount visible to everyone instead of just you.' %}
{% endif %}
{{common.toggle_section('Donation Visiblity', 'lifetimedonated_visibleswitch', 'lifetimedonated_visible', v.lifetimedonated_visible, desc, false)}}
{{common.toggle_section('Spider', 'spiderswitch', 'spider', v.spider, 'Have a spider friend accompany you during your journey on the site.', v.spider > 1)}}
{{common.toggle_section('Marsify', 'marsifyswitch', 'marsify', v.marsify, 'Automatically insert relevant
marseys into your future comments.', v.marsify > 1)}}
</div>
</section>
<section id="site-settings-checkmark-section" class="settings-section-section">
<h5>Checkmark Customization</h5>
<div class="settings-section rounded" id="site-settings-checkmark">
{{common.color_section('verifiedcolor', '/settings/verifiedcolor', 'verifiedcolor', 'Checkmark Color', v.verifiedcolor)}}
{{common.line_text_section('checkmark_text', '/settings/checkmark_text', 'checkmark-text', 'Checkmark Hover Text', v.verified, 'Limit of 100 characters', 'Enter checkmark hover text here', 'Change Text', false, 0, 100, '.*', false)}}
</div>
</section>
<section id="site-settings-filters-section" class="settings-section-section">
<h5>Filters</h5>
<div class="settings-section rounded" id="site-settings-filters">
{% set ns = namespace(slurtext='Enable if you would like to automatically replace slurs.', profanitytext='Enable if you would like to automatically replace profanities.') %}
{% if FEATURES['USERS_PERMANENT_WORD_FILTERS'] %}
{% if v.slurreplacer > 1 %}
{% set slurtext = "You've enabled the slur replacer permanently! ✊🏿" %}
{% else %}
{% set slurtext = 'Enable if you would like to automatically replace slurs. <button type="button" {% if v.slurreplacer == 0 %}hidden{% endif %} id="slurreplacer-perma-link" class="text-primary" data-bs-toggle="modal" data-bs-target="#modal-slurreplacer">Make filter permanent for a badge!</button>' %}
{% endif %}
{% if v.profanityreplacer > 1 %}
{% set profanitytext = "You've enabled the profanity replacer permanently! 😇" %}
{% else %}
{% set profanitytext = 'Enable if you would like to automatically replace profanities. <button type="button" {% if v.profanityreplacer == 0 %}hidden{% endif %} id="profanityreplacer-perma-link" class="text-primary" data-bs-toggle="modal" data-bs-target="#modal-profanityreplacer">Make filter permanent for a badge!</button>' %}
{% endif %}
{% endif %}
{{common.toggle_section("Slur Replacer", "slurreplacerswitch", 'slurreplacer', v.slurreplacer, slurtext, FEATURES['USERS_PERMANENT_WORD_FILTERS'] and v.slurreplacer > 1)}}
{{common.toggle_section("Profanity Replacer", "profanityreplacerswitch", 'profanityreplacer', v .profanityreplacer, profanitytext, FEATURES['USERS_PERMANENT_WORD_FILTERS'] and v.profanityreplacer > 1)}}
</div>
</section>
<section id="site-settings-referral-section" class="settings-section-section">
<h5>Refer a Friend!</h5>
<div class="settings-section rounded" id="site-settings-referral">
<div class="d-lg-flex border-bottom">
<div class="title w-lg-25">
<label for="referral_code">Referral Code</label>
</div>
<div class="body w-lg-100">
<div class="input-group">
<input autocomplete="off" type="text" readonly class="form-control copy-link" id="referral_code" value="{{SITE_FULL}}/signup?ref={{v.id}}" data-clipboard-text="{{SITE_FULL}}/signup?ref={{v.id}}">
<span class="input-group-append" data-bs-toggle="tooltip" data-bs-placement="top" title="You have referred {{v.referral_count}} user{{'s' if v.referral_count != 1 else ''}} so far. {% if v.referral_count == 0 %}¯\_(ツ)_/¯{% elif v.referral_count>10 %}Wow!{% endif %}">
<span class="input-group-text border-0 font-weight-bold"><i class="fas fa-user mr-1"></i>{{v.referral_count}}</span>
</span>
</div>
<div class="text-small text-muted mt-3">Share this link with a friend. {% if v.referral_count == 0 %} When they sign up, you'll get the bronze recruitment badge. <a href="/badges">Learn more.</a>{% elif v.referral_count<10 %} When you refer 10 friends, you'll receive the silver recruitment badge. <a href="/badges">Learn more.</a>{% elif v.referral_count<100 %} When you refer 100 friends, you'll receive the gold recruitment badge. <a href="/badges">Learn more</a>.{% endif %}</div>
</div>
</div>
<div class="d-lg-flex border-bottom px-3">
<div class="title w-lg-25 px-0">
<label>Referred Users</label>
</div>
<table>
{% for user in v.referrals %}
<tr>
<td>{% include "user_in_table.html" %}</td>
<td data-time="{{user.created_utc}}"></td>
</tr>
{% endfor %}
</table>
</div>
</div>
</section>
</div>
</div>
</div>
{% include "modals/emoji.html" %}
{% include "modals/gif.html" %}
{% if v.flairchanged %}
<input hidden id="flairchanged" value="{{v.flairchanged}}">
<script defer src="{{'js/flairchanged.js' | asset}}"></script>
{% endif %}
{% if v.namechanged %}
<input hidden id="namechanged" value="{{v.namechanged}}">
<script defer src="{{'js/namechanged.js' | asset}}"></script>
{% endif %}
{% if v.bite %}
<input hidden id="bite" value="{{v.bite}}">
<script defer src="{{'js/bite.js' | asset}}"></script>
{% endif %}
{% if v.marsify and v.marsify != 1 %}
<input hidden id="marsified" value="{{v.marsify}}">
<script defer src="{{'js/marsified.js' | asset}}"></script>
{% endif %}
<script defer src="{{'js/settings_profile.js' | asset}}"></script>
{% macro permanent_filter_modal(id, form_action, field, friendly_name, badge_name) %}
{% if FEATURES['USERS_PERMANENT_WORD_FILTERS'] -%}
<div class="modal fade" id="modal-{{id}}" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<form class="m-auto" action="{{form_action}}" id="{{id}}-form" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendFormXHRReload(this)">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Make {{friendly_name}} Permanent</h5>
<button type="button" class="close" data-bs-dismiss="modal">
<span><i class="fas fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<input hidden name="{{field}}" value="true">
<input hidden name="permanent" value="true">
<input hidden name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
<p>This form will permanently enable the filter for you. You will receive the {{badge_name}} badge and <strong>will not</strong> be able to disable the filter.<br>Type your username to continue.</p>
<input autocomplete="off" type="text" name="username" placeholder="Enter your username to confirm" id="username-{{id}}" class="form-control" pattern="{{v.username}}" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" id="submit-{{id}}-form">Make Permanent</button>
</div>
</div>
</form>
</div>
</div>
{%- endif %}
{% endmacro %}
{{permanent_filter_modal('slurreplacer', '/settings/personal', 'slurreplacer', 'Slur Replacer', 'Social Justice Berserker')}}
{{permanent_filter_modal('profanityreplacer', '/settings/personal', 'profanityreplacer', 'Profanity Replacer', 'Soapy-Mouthed Angel')}}
{% endblock %}