app-MAIL-temp/templates/dashboard/subdomain.html
Son Nguyen Kim d49f6b88a9
Upgrade djlint and reformat all fiels (#2197)
* update djlint

* reformat all files

* update precommit version

---------

Co-authored-by: Son NK <son@simplelogin.io>
2024-08-28 13:07:34 +02:00

132 lines
5.0 KiB
HTML

{% extends "default.html" %}
{% set active_page = "subdomain" %}
{% block title %}Subdomains{% endblock %}
{% block head %}{% endblock %}
{% block default_content %}
<div class="row">
<div class="col">
<h1 class="h3">
Subdomains
<a class="ml-3 text-info"
style="font-size: 12px"
data-toggle="collapse"
href="#howtouse"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
How to use <i class="fe fe-chevrons-down"></i>
</a>
</h1>
{% if not current_user.is_premium() %}
<div class="alert alert-danger" role="alert">
This feature is only available on Premium plan.
<a href="{{ url_for("dashboard.pricing") }}"
target="_blank"
rel="noopener noreferrer">
Upgrade<i class="fe fe-external-link"></i>
</a>
</div>
{% endif %}
<div class="alert alert-primary collapse {% if not subdomains %}show{% endif %}" id="howtouse" role="alert">
You can use subdomain to quickly create email aliases without opening SimpleLogin app.
<br />
Handy when you need to quickly give out an email address, for example on a phone call, in a meeting or just
anywhere you want.
<br />
After choosing a subdomain, simply use <b>anything@my-subdomain.simplelogin.com</b>
next time you need an alias:
it'll be <b>automatically created</b> the first time it receives an email.
<br />
</div>
<div class="row">
{% for subdomain in subdomains %}
<div class="col-12 col-lg-6">
<div class="card" style="">
<div class="card-body">
<h5 class="card-title">
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=subdomain.id) }}">{{ subdomain.domain }}</a>
</h5>
<h6 class="card-subtitle mb-4 text-muted">
Created {{ subdomain.created_at | dt }}
<br />
<span class="font-weight-bold">{{ subdomain.nb_alias() }}</span> aliases.
<br />
</h6>
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=subdomain.id) }}"
class="mt-3">Details ➡</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row {% if current_user.subdomain_quota <= 0 %}disabled-content{% endif %}" id="new-subdomain">
<div class="col">
<div class="card">
<div class="card-body">
<h2 class="h4 mb-1">New Subdomain</h2>
<form method="post" class="mt-2" data-parsley-validate>
{{ new_subdomain_form.csrf_token }}
<input type="hidden" name="form-name" value="create">
<div class="form-group">
<label>Subdomain</label>
<input name="subdomain"
v-model="subdomain"
data-parsley-pattern="[0-9a-z-]{3,}"
data-parsley-trigger="change"
data-parsley-error-message="At least 3 characters. Only lowercase letters, numbers and dashes (-) are supported."
class="form-control"
minlength="3"
maxlength="32">
</div>
<div class="form-group">
<label>Root domain</label>
<select name="domain" v-model="domain" class="form-control">
{% for sl_domain in sl_domains %}<option value="{{ sl_domain.domain }}">{{ sl_domain.domain }}</option>{% endfor %}
</select>
</div>
<button class="btn btn-primary">Create</button>
</form>
<div v-if="toShow" class="text-info mt-2">
You are about to create <b>[[ subdomain]].[[domain]]</b> subdomain.
</div>
<div class="alert alert-info mt-3" style="font-size: 12px">
Deleting a subdomain will <b>not</b> restore the subdomain quota
so please make sure
to choose the subdomain you want to keep.
<br />
Currently you can create up to <b style="font-size: 1.5em">{{ current_user.subdomain_quota }}</b>
subdomains.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script>
new Vue({
el: '#new-subdomain',
delimiters: ["[[", "]]"], // necessary to avoid conflict with jinja
data: {
subdomain: "",
domain: "{{ sl_domains[0].domain }}"
},
computed: {
toShow: function () {
if (this.subdomain && this.domain) {
return true;
}
return false;
}
}
});
</script>
{% endblock %}