app-MAIL-temp/templates/dashboard/referral.html
mlec 66d26a1193
fix(core): Open mailto: links in a new tab when the default email client is set to a web mail (#1721)
* fix(build): Update docker image of Node to v20

- Open "mailto:" links in a new tab if using browser

* feat(dockerfile): revert node to v10.17.0
2023-08-15 16:03:04 +02:00

198 lines
6.4 KiB
HTML

{% extends "default.html" %}
{% block title %}Referral{% endblock %}
{% set active_page = "setting" %}
{% block default_content %}
<div class="col">
<h1 class="h3 mb-5">
Referrals
<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>
<div class="alert alert-primary collapse" id="howtouse" role="alert">
On this page, you can create a <b>referral code</b> that you can use when referring people to SimpleLogin.
For every user who <b>upgrades</b> and stays with us at least 3 months, you'll get $5 :).
<br />
The payout can be initiated any time, just send us an email at
<a href="mailto:hi@simplelogin.io" target="_blank">hi@simplelogin.io</a>
when you want to receive the payout.
</div>
{% if referrals|length == 0 %}
<div class="alert alert-info">
You don't have any referral code yet. Let's create the first one and start inviting your friends!
<br />
</div>
{% endif %}
{% for referral in referrals %}
<div class="card p-4 shadow-sm {% if referral.id == highlight_id %} highlight-row{% endif %}">
<form method="post">
<input type="hidden" name="form-name" value="update">
<input type="hidden" name="referral-id" value="{{ referral.id }}">
<div class="d-flex mb-3">
<div class="mr-2">
<input name="name"
class="form-control"
required
value="{{ referral.name or '' }}">
</div>
<div>
<button class="btn btn-outline-success">Update</button>
</div>
</div>
</form>
{% set nb_user = referral.nb_user %}
{% set nb_paid_user = referral.nb_paid_user %}
{% if nb_user > 0 %}
<div class="mb-3">
<b class="h1">{{ nb_user }}</b>
{% if nb_user == 1 %}
person
{% else %}
people
{% endif %}
has their online privacy protected thanks to you!
<br />
Among them, <b class="h1">{{ nb_paid_user }}</b>
{% if nb_paid_user == 1 %}
person
{% else %}
people
{% endif %}
has upgraded their accounts.
</div>
{% endif %}
<div class="mt-2">
Please use this referral link to invite your friends trying out SimpleLogin:
<br />
<div class="d-flex mb-5 mt-2" style="max-width: 40em">
<div class="flex-grow-1 mr-2">
<input class="form-control"
id="referral-{{ referral.id }}"
readonly
value="{{ referral.link() }}">
</div>
<div>
<button class="clipboard btn btn-outline-primary"
data-clipboard-action="copy"
data-clipboard-text="{{ referral.link() }}"
data-clipboard-target="#referral-{{ referral.id }}">
Copy <i class="fe fe-clipboard"></i>
</button>
</div>
</div>
</div>
<div class="mb-3">
You can also use the referral code <b>{{ referral.code }}</b> when sharing any link on SimpleLogin.
<br />
Just append
<em data-toggle="tooltip"
title="Click to copy"
class="clipboard"
data-clipboard-text="{{ '?slref=' + referral.code }}"
style="overflow-wrap: break-word">
?slref={{ referral.code }}
</em>
to any link on SimpleLogin website.
</div>
<div>
<form method="post">
<input type="hidden" name="form-name" value="delete">
<input type="hidden" name="referral-id" value="{{ referral.id }}">
<span class="delete-referral float-right btn btn-outline-danger">Delete</span>
</form>
</div>
</div>
{% endfor %}
<form method="post" class="mt-6 card p-4 shadow">
<input type="hidden" name="form-name" value="create">
<div class="form-group">
<input name="code"
class="form-control"
pattern="[0-9a-z-_]{3,}"
placeholder="Referral Code"
title="At least 3 characters. Only lowercase letters, numbers, dashes (-) and underscores (_) are currently supported.">
<div class="small-text">
At least 3 characters. Only lowercase letters, numbers,
dashes (-) and underscores (_) are currently supported.
</div>
</div>
<div class="form-group">
<input name="name"
class="form-control"
required
placeholder="Referral name, something to help you remember why you create it :)">
</div>
<button class="btn btn-success mb-5">Create</button>
</form>
{% if payouts|length > 0 %}
<div class="mt-6 card p-4 shadow">
<h3 class="h4">Payouts</h3>
<table class="table">
<thead>
<tr>
<th>Sent at</th>
<th>Amount</th>
<th>Payment Method</th>
<th>Number of upgraded accounts</th>
</tr>
</thead>
<tbody>
{% for payout in payouts %}
<tr>
<td>{{ payout.created_at | dt }}</td>
<td>${{ payout.amount }}</td>
<td>{{ payout.payment_method }}</td>
<td>{{ payout.number_upgraded_account }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</div>
{% endblock %}
{% block script %}
<script>
$(".delete-referral").on("click", function (e) {
let that = $(this);
bootbox.confirm({
message: "This operation is irreversible, please confirm.",
buttons: {
confirm: {
label: 'Yes, delete it',
className: 'btn-danger'
},
cancel: {
label: 'Cancel',
className: 'btn-outline-primary'
}
},
callback: function (result) {
if (result) {
that.closest("form").submit();
}
}
})
});
</script>
{% endblock %}