app-MAIL-temp/app/dashboard/templates/dashboard/setting.html

{% extends 'default.html' %}

{% set active_page = "setting" %}

{% block title %}
  Settings
{% endblock %}

{% block head %}
  <style>
    .card-title {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 3px;
    }
  </style>
{% endblock %}

{% block default_content %}

  <div class="col pb-3">
    <!-- Change email -->
    <div class="card">
      <form method="post" enctype="multipart/form-data">
        <input type="hidden" name="form-name" value="update-email">
        {{ change_email_form.csrf_token }}

        <div class="card-body">
          <div class="card-title">
            Email Address
          </div>
          <div class="form-group">
            <label class="form-label">Email</label>

            <!-- Not allow user to change email if there's a pending change -->
            {{ change_email_form.email(class="form-control", value=current_user.email, readonly=pending_email != None) }}
            {{ render_field_errors(change_email_form.email) }}

            {% if pending_email %}
              <div class="mt-2">
                <span class="text-danger">Pending email change: {{ pending_email }}</span>
                <a href="{{ url_for('dashboard.resend_email_change') }}" class="btn btn-secondary btn-sm">Resend
                  confirmation email</a>
                <a href="{{ url_for('dashboard.cancel_email_change') }}" class="btn btn-secondary btn-sm">Cancel email
                  change</a>
              </div>
            {% endif %}
          </div>
          <button class="btn btn-primary">Change Email</button>
        </div>
      </form>
    </div>
    <!-- END Change email -->

    <!-- Change name & profile picture -->
    <div class="card">
      <form method="post" enctype="multipart/form-data">
        {{ form.csrf_token }}
        <input type="hidden" name="form-name" value="update-profile">

        <div class="card-body">
          <div class="card-title">
            Profile
          </div>
          <div>
            These informations will be filled up automatically when you use "Sign in with SimpleLogin" button
          </div>
          <div class="form-group mt-3">
            <label class="form-label">Name</label>
            {{ form.name(class="form-control", value=current_user.name) }}
            {{ render_field_errors(form.name) }}
          </div>

          <div class="form-group">
            <div class="form-label">Profile picture</div>
            {{ form.profile_picture(class="form-control-file") }}
            {{ render_field_errors(form.profile_picture) }}
            {% if current_user.profile_picture_id %}
              <img src="{{ current_user.profile_picture_url() }}" class="profile-picture">
            {% endif %}
          </div>
          <button class="btn btn-primary">Update</button>
        </div>
      </form>
    </div>
    <!-- END change name & profile picture -->


    <div class="card">
      <div class="card-body">
        <div class="card-title">Multi-Factor Authentication (MFA)</div>
        <div class="mb-3">
          Secure your account with Multi-Factor Authentication. <br>
          This requires having applications like Google Authenticator, Authy, FreeOTP, etc.
        </div>
        {% if not current_user.enable_otp %}
          <a href="{{ url_for('dashboard.mfa_setup') }}" class="btn btn-outline-primary">Enable</a>
        {% else %}
          <a href="{{ url_for('dashboard.mfa_cancel') }}" class="btn btn-outline-danger">Cancel MFA</a>
        {% endif %}
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <div class="card-title">
          Change password
        </div>
        <div class="mb-3">
          You will receive an email containing instructions on how to change password.
        </div>
        <form method="post">
          <input type="hidden" name="form-name" value="change-password">
          <button class="btn btn-outline-primary">Change password</button>
        </form>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <div class="card-title">Random Alias</div>
        <div class="mb-3">Choose how to create your email alias by default</div>
        <form method="post" class="form-inline">
          <input type="hidden" name="form-name" value="change-alias-generator">
          <select class="custom-select mr-sm-2" name="alias-generator-scheme">
            <option value="{{ AliasGeneratorEnum.word.value }}"
                {% if current_user.alias_generator == AliasGeneratorEnum.word.value %} selected {% endif %} >Based on
              Random {{ AliasGeneratorEnum.word.name.capitalize() }}</option>
            <option value="{{ AliasGeneratorEnum.uuid.value }}"
                {% if current_user.alias_generator == AliasGeneratorEnum.uuid.value %} selected {% endif %} >Based
              on {{ AliasGeneratorEnum.uuid.name.upper() }}</option>
          </select>
          <button class="btn btn-outline-primary">Update Preference</button>
        </form>
      </div>
    </div>

    <div class="card" id="notification">
      <div class="card-body">
        <div class="card-title">Newsletters</div>
        <div class="mb-3">
          Every now and then we can send you an email
          to let you know about a new feature that might be useful to you.
        </div>
        <form method="post">
          <input type="hidden" name="form-name" value="notification-preference">
          <div class="form-check">
            <input type="checkbox" id="notification" name="notification" {% if current_user.notification %}
                   checked {% endif %} class="form-check-input">
            <label for="notification">I want to receive your newsletter</label>
          </div>
          <button type="submit" class="btn btn-outline-primary">Submit</button>
        </form>
      </div>
    </div>


    <div class="card">
      <div class="card-body">
        <div class="card-title mb-3">Current Plan</div>

        {% if current_user.get_subscription() %}
          You are on the  {{ current_user.get_subscription().plan_name() }} plan. <br>
          <a href="{{ url_for('dashboard.billing') }}" class="btn btn-outline-primary">
            Manage Subscription
          </a>
        {% elif manual_sub %}
          You are on the Premium plan. The plan ends {{ manual_sub.end_at | dt }}
          ({{ manual_sub.end_at.format("YYYY-MM-DD") }}).
          {% if manual_sub.is_giveaway %}
            <br>
            To support SimpleLogin it's possible to change to a paid plan. <br>
            <a href="{{ url_for('dashboard.pricing') }}" class="btn btn-sm btn-outline-primary">Upgrade</a>
          {% endif %}
        {% elif current_user.lifetime %}
          You have the lifetime licence.
          <br>
          To support SimpleLogin it's possible to change to a paid plan. <br>
          <a href="{{ url_for('dashboard.pricing') }}" class="btn btn-sm btn-outline-primary">Upgrade</a>
        {% elif current_user.in_trial() %}
          You are in the trial period. The trial ends {{ current_user.trial_end | dt }}.
        {% else %}
          You are on the Free plan.
        {% endif %}
      </div>
    </div>

    <div class="card" id="sender-format">
      <div class="card-body">
        <div class="card-title">Sender address format</div>
        <div class="mt-1 mb-3">
          When your alias receives an email, says from <b>John Wick &lt;john@wick.com&gt;</b>,
          SimpleLogin forwards it to your mailbox. <br>

          Due to some email constraints, SimpleLogin cannot keep the sender email address
          in the original form and needs to <b>transform</b> it to one of the 2 below formats.
        </div>

        <form method="post" action="#sender-format">
          <input type="hidden" name="form-name" value="change-sender-format">

          <div class="form-check">
            <input class="form-check-input" type="radio" name="sender-format" id="exampleRadios1" value="1"
                {% if current_user.use_via_format_for_sender %} checked {% endif %}>
            <label class="form-check-label" for="exampleRadios1">
              <b>john@wick.com via SimpleLogin</b>
            </label>
          </div>

          <div class="form-check">
            <input class="form-check-input" type="radio" name="sender-format" id="exampleRadios2" value="0"
                {% if not current_user.use_via_format_for_sender %} checked {% endif %}>
            <label class="form-check-label" for="exampleRadios2">
              <b>John Wick - john at wick.com</b>
            </label>
          </div>

          <button class="btn btn-outline-primary mt-3">Update</button>
        </form>
      </div>
    </div>

    <div class="card" id="referral">
      <div class="card-body">
        <div class="card-title">Referrals</div>
        <div class="mb-3" style="">
          Creating a different email address for every website/service is good for our privacy and
          help fighting against spammers. <br>
          Here you can invite your friends to join SimpleLogin and help protect their privacy. <br>
          At the beginning of each month, the person who invites most of people joining SimpleLogin
          wins the lifetime licence :). <br>
        </div>

        <a href="{{ url_for('dashboard.referral_route') }}" class="btn btn-outline-primary">
          Invite Friends
        </a>
      </div>
    </div>


    <div class="card">
      <div class="card-body">
        <div class="card-title">Deleted Aliases</div>
        <div class="mb-3" style="">
          When an alias is deleted, all its activities are deleted and no emails can be sent to it.
          The deleted alias is moved to another location and only used to check when new alias is created. <br>
          This check is necessary to avoid someone else accidentally taking this alias.
          Otherwise the other person might receive inadvertently information that belong to you. <br>
        </div>

        <a href="{{ url_for('dashboard.deleted_alias_route') }}" class="btn btn-outline-primary">
          See deleted aliases
        </a>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <div class="card-title">Quarantine</div>
        <div class="mb-3">
          When an email sent to your alias is classified as spam or refused by your email provider,
          it usually means your alias has been leaked to a spammer. <br>
          In this case SimpleLogin will <b>keep</b> a copy of this email (so it isn't lost)
          and notify you so you can take a look at its content and take appropriate actions. <br>

          The emails are deleted in 7 days.
          This is an exceptional case where SimpleLogin stores the email.
        </div>
        <a href="{{ url_for('dashboard.refused_email_route') }}" class="btn btn-outline-primary">
          See refused emails
        </a>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <div class="card-title">Export Data</div>
        <div class="mb-3">
          You can download all aliases you have created on SimpleLogin along with other data.
        </div>
        <form method="post">
          <input type="hidden" name="form-name" value="export-data">
          <button class="btn btn-outline-info">Export Data</button>
        </form>
      </div>
    </div>


    <div class="card">
      <div class="card-body">
        <div class="card-title">Delete Account</div>
        <div class="mb-3">Please note that this operation is irreversible.
        </div>

        <form method="post">
          <input type="hidden" name="form-name" value="delete-account">
          <span class="delete-account btn btn-outline-danger">Delete account</span>
        </form>
      </div>
    </div>

  </div>

{% endblock %}

{% block script %}
  <script>
    $(".delete-account").on("click", function (e) {
      notie.confirm({
        text: "All your data including your aliases will be deleted, " +
          "other people might not be able to reach you after, " +
          " please confirm.",
        cancelCallback: () => {
          // nothing to do
        },
        submitCallback: () => {
          $(this).closest("form").submit();
        }
      });
    });
  </script>
{% endblock %}