Merge pull request #152 from simple-login/prettify
Prettify: Make api key, custom domain, directory, mailboxes more compact
This commit is contained in:
Son Nguyen Kim
GitHub
commit
ba4d7c3ee6
|
|
@ -12,9 +12,14 @@
|
|||
{% block default_content %}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="h3"> API Key </h1>
|
||||
<h1 class="h3"> API Key
|
||||
<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" role="alert">
|
||||
<div class="alert alert-primary collapse" id="howtouse" role="alert">
|
||||
The API Key is used on the SimpleLogin Chrome/Firefox/Safari extension. <br>
|
||||
You can install the Chrome extension on
|
||||
<a href="https://chrome.google.com/webstore/detail/simplelogin-extension/dphilobhebphkdjbpfohgikllaljmgbn"
|
||||
|
|
@ -32,66 +37,68 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
{% for api_key in api_keys %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ api_key.name }}</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">
|
||||
{% if api_key.last_used %}
|
||||
Last used: {{ api_key.last_used | dt }} <br>
|
||||
Used: {{ api_key.times }} times.
|
||||
{% else %}
|
||||
Never used
|
||||
{% endif %}
|
||||
</h6>
|
||||
<div class="row">
|
||||
{% for api_key in api_keys %}
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ api_key.name }}</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">
|
||||
{% if api_key.last_used %}
|
||||
Last used: {{ api_key.last_used | dt }} <br>
|
||||
Used: {{ api_key.times }} times.
|
||||
{% else %}
|
||||
Never used
|
||||
{% endif %}
|
||||
</h6>
|
||||
|
||||
<div class="input-group">
|
||||
<input class="form-control" id="apikey-{{ api_key.id }}" readonly value="**********">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group">
|
||||
<input class="form-control" id="apikey-{{ api_key.id }}" readonly value="**********">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">
|
||||
<i class="fe fe-eye toggle-api-key" data-show="off" data-secret="{{ api_key.code }}"
|
||||
></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="clipboard btn btn-primary" data-clipboard-action="copy"
|
||||
data-clipboard-text="{{ api_key.code }}"
|
||||
data-clipboard-target="#apikey-{{ api_key.id }}">
|
||||
Copy <i class="fe fe-clipboard"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="clipboard btn btn-primary" data-clipboard-action="copy"
|
||||
data-clipboard-text="{{ api_key.code }}"
|
||||
data-clipboard-target="#apikey-{{ api_key.id }}">
|
||||
Copy <i class="fe fe-clipboard"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="delete">
|
||||
<input type="hidden" name="api-key-id" value="{{ api_key.id }}">
|
||||
<span class="card-link btn btn-link float-right text-danger delete-api-key">
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="delete">
|
||||
<input type="hidden" name="api-key-id" value="{{ api_key.id }}">
|
||||
<span class="card-link btn btn-link float-right text-danger delete-api-key">
|
||||
Delete
|
||||
</span>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<hr>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<form method="post">
|
||||
{{ new_api_key_form.csrf_token }}
|
||||
<input type="hidden" name="form-name" value="create">
|
||||
|
||||
<label class="form-label">Api Key Name</label>
|
||||
<small>Name of the api key, e.g. where it will be used.</small>
|
||||
<h2 class="h4">New Api Key</h2>
|
||||
|
||||
{{ new_api_key_form.name(class="form-control", placeholder="Chrome, Firefox") }}
|
||||
{{ render_field_errors(new_api_key_form.name) }}
|
||||
<div class="small-text">Name of the api key, e.g. where it will be used.</div>
|
||||
|
||||
<button class="btn btn-lg btn-success mt-2">Create</button>
|
||||
</form>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,12 @@
|
|||
{% block default_content %}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="h3"> Custom Domains </h1>
|
||||
<h1 class="h3"> Custom Domains
|
||||
<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">
|
||||
|
|
@ -19,49 +24,52 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="alert alert-primary" role="alert">
|
||||
<div class="alert alert-primary collapse" id="howtouse" role="alert">
|
||||
If you own a domain, let's say <b>example.com</b>, you will be able to create aliases with this domain, for
|
||||
example
|
||||
contact@example.com, help@example.com, etc with SimpleLogin. <br>
|
||||
You could also enable <b>catch-all</b> feature that allows you to create aliases on-the-fly.
|
||||
</div>
|
||||
|
||||
{% for custom_domain in custom_domains %}
|
||||
<div class="card" style="">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a>
|
||||
{% if custom_domain.verified %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="Domain Verified">✅</span>
|
||||
{% else %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="DNS Setup Needed">
|
||||
<div class="row">
|
||||
{% for custom_domain in custom_domains %}
|
||||
<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=custom_domain.id) }}">{{ custom_domain.domain }}</a>
|
||||
{% if custom_domain.verified %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="Domain Verified">✅</span>
|
||||
{% else %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="DNS Setup Needed">
|
||||
<a href="{{ url_for('dashboard.domain_detail_dns', custom_domain_id=custom_domain.id) }}"
|
||||
class="text-decoration-none">🚫
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">
|
||||
Created {{ custom_domain.created_at | dt }} <br>
|
||||
<span class="font-weight-bold">{{ custom_domain.nb_alias() }}</span> aliases.
|
||||
</h6>
|
||||
{% endif %}
|
||||
</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">
|
||||
Created {{ custom_domain.created_at | dt }} <br>
|
||||
<span class="font-weight-bold">{{ custom_domain.nb_alias() }}</span> aliases.
|
||||
</h6>
|
||||
|
||||
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">Details ➡</a>
|
||||
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">Details ➡</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<hr>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<form method="post">
|
||||
{{ new_custom_domain_form.csrf_token }}
|
||||
<input type="hidden" name="form-name" value="create">
|
||||
|
||||
<label class="form-label">Domain</label>
|
||||
<small>Please use full path domain, for ex <em>my-subdomain.my-domain.com</em></small>
|
||||
<h2 class="h4">New Domain</h2>
|
||||
|
||||
{{ new_custom_domain_form.domain(class="form-control", placeholder="my-domain.com") }}
|
||||
{{ render_field_errors(new_custom_domain_form.domain) }}
|
||||
<div class="small-text">Please use full path domain, for ex <em>my-subdomain.my-domain.com</em></div>
|
||||
|
||||
<button class="btn btn-lg btn-success mt-2">Create</button>
|
||||
</form>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,13 @@
|
|||
{% block default_content %}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="h3"> Directories </h1>
|
||||
<h1 class="h3"> Directories
|
||||
<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">
|
||||
|
|
@ -16,14 +22,15 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="alert alert-primary" role="alert">
|
||||
<div class="alert alert-primary collapse" id="howtouse" role="alert">
|
||||
<div>
|
||||
Directory allows you to create aliases <b>on the fly</b>.
|
||||
</div>
|
||||
<div class="mt-2 pb-2">
|
||||
1️⃣ Pick a name for your directory, says <em>my_dir</em> <br>
|
||||
|
||||
2️⃣ Quickly use one of the following formats to create an alias on-the-fly <b>without creating this alias beforehand</b>
|
||||
2️⃣ Quickly use one of the following formats to create an alias on-the-fly <b>without creating this alias
|
||||
beforehand</b>
|
||||
</div>
|
||||
<div class="pl-3 py-2 bg-white">
|
||||
<em>my_dir/<b>anything</b>@{{ FIRST_ALIAS_DOMAIN }}</em> or <br>
|
||||
|
|
@ -46,55 +53,56 @@
|
|||
|
||||
</div>
|
||||
|
||||
{% for dir in dirs %}
|
||||
<div class="card" style="">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
{{ dir.name }}
|
||||
</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">
|
||||
Created {{ dir.created_at | dt }} <br>
|
||||
<span class="font-weight-bold">{{ dir.nb_alias() }}</span> aliases.
|
||||
</h6>
|
||||
</div>
|
||||
<div class="row">
|
||||
{% for dir in dirs %}
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card" style="">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
{{ dir.name }}
|
||||
</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">
|
||||
Created {{ dir.created_at | dt }} <br>
|
||||
<span class="font-weight-bold">{{ dir.nb_alias() }}</span> aliases.
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<div class="card-footer p-0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="delete">
|
||||
<input type="hidden" class="dir-name" value="{{ dir.name }}">
|
||||
<input type="hidden" name="dir-id" value="{{ dir.id }}">
|
||||
<span class="card-link btn btn-link float-right text-danger delete-dir">
|
||||
<div class="card-footer p-0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="delete">
|
||||
<input type="hidden" class="dir-name" value="{{ dir.name }}">
|
||||
<input type="hidden" name="dir-id" value="{{ dir.id }}">
|
||||
<span class="card-link btn btn-link float-right text-danger delete-dir">
|
||||
Delete
|
||||
</span>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if dirs|length > 0 %}
|
||||
<hr>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" class="mt-6">
|
||||
<form method="post" class="mt-2">
|
||||
{{ new_dir_form.csrf_token }}
|
||||
<input type="hidden" name="form-name" value="create">
|
||||
|
||||
<div class="font-weight-bold">Directory Name</div>
|
||||
<div class="small-text">
|
||||
Directory name must be at least 3 characters.
|
||||
Only lowercase letter, number, dash (-), underscore (_) can be used.
|
||||
</div>
|
||||
<h2 class="h4">New Directory</h2>
|
||||
|
||||
{{ new_dir_form.name(class="form-control", placeholder="my-directory",
|
||||
pattern="[0-9a-z-_]{3,}",
|
||||
title="Only letter, number, dash (-), underscore (_) can be used. Directory name must be at least 3 characters.") }}
|
||||
{{ render_field_errors(new_dir_form.name) }}
|
||||
<div class="small-text">
|
||||
Directory name must be at least 3 characters.
|
||||
Only lowercase letter, number, dash (-), underscore (_) can be used.
|
||||
</div>
|
||||
|
||||
<button class="btn btn-lg btn-success mt-2">Create</button>
|
||||
</form>
|
||||
|
||||
|
|
@ -110,7 +118,7 @@
|
|||
|
||||
let that = $(this);
|
||||
let message = `All aliases associated with <b>${directory}</b> directory will also be deleted, ` +
|
||||
" please confirm.";
|
||||
" please confirm.";
|
||||
|
||||
bootbox.confirm({
|
||||
message: message,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,12 @@
|
|||
{% block default_content %}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="h3"> Mailboxes </h1>
|
||||
<h1 class="h3"> Mailboxes
|
||||
<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">
|
||||
|
|
@ -16,7 +21,7 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="alert alert-primary" role="alert">
|
||||
<div class="alert alert-primary collapse" id="howtouse" role="alert">
|
||||
A <em>mailbox</em> is just another personal email address. When creating a new alias, you could choose the
|
||||
mailbox that <em>owns</em> this alias, i.e: <br>
|
||||
- all emails sent to this alias will be forwarded to this mailbox <br>
|
||||
|
|
@ -29,88 +34,89 @@
|
|||
if you want to create aliases for your buddy.
|
||||
</div>
|
||||
|
||||
{% for mailbox in mailboxes %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
{{ mailbox.email }}
|
||||
{% if mailbox.verified %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Verified">✅</span>
|
||||
{% else %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Not Verified">
|
||||
<div class="row">
|
||||
{% for mailbox in mailboxes %}
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
{{ mailbox.email }}
|
||||
{% if mailbox.verified %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Verified">✅</span>
|
||||
{% else %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Not Verified">
|
||||
🚫
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if mailbox.pgp_finger_print %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if mailbox.pgp_finger_print %}
|
||||
<span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span>
|
||||
{% endif %}
|
||||
|
||||
{% if mailbox.id == current_user.default_mailbox_id %}
|
||||
<div class="badge badge-primary float-right" data-toggle="tooltip"
|
||||
title="When a new random alias is created, it belongs to the default mailbox">Default Mailbox
|
||||
</div>
|
||||
{% endif %}
|
||||
</h5>
|
||||
{% if mailbox.id == current_user.default_mailbox_id %}
|
||||
<div class="badge badge-primary float-right" data-toggle="tooltip"
|
||||
title="When a new random alias is created, it belongs to the default mailbox">Default Mailbox
|
||||
</div>
|
||||
{% endif %}
|
||||
</h5>
|
||||
|
||||
<h6 class="card-subtitle mb-2 text-muted">
|
||||
Created {{ mailbox.created_at | dt }} <br>
|
||||
<span class="font-weight-bold">{{ mailbox.nb_alias() }}</span> aliases. <br>
|
||||
<h6 class="card-subtitle mb-2 text-muted">
|
||||
Created {{ mailbox.created_at | dt }} <br>
|
||||
<span class="font-weight-bold">{{ mailbox.nb_alias() }}</span> aliases. <br>
|
||||
|
||||
</h6>
|
||||
</h6>
|
||||
|
||||
<a href="{{ url_for('dashboard.mailbox_detail_route', mailbox_id=mailbox.id) }}">Edit ➡</a>
|
||||
</div>
|
||||
<a href="{{ url_for('dashboard.mailbox_detail_route', mailbox_id=mailbox.id) }}">Edit ➡</a>
|
||||
</div>
|
||||
|
||||
<div class="card-footer p-0">
|
||||
<div class="row">
|
||||
{% if mailbox.verified %}
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="set-default">
|
||||
<input type="hidden" class="mailbox" value="{{ mailbox.email }}">
|
||||
<input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
|
||||
<button class="card-link btn btn-link
|
||||
<div class="card-footer p-0">
|
||||
<div class="row">
|
||||
{% if mailbox.verified %}
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="set-default">
|
||||
<input type="hidden" class="mailbox" value="{{ mailbox.email }}">
|
||||
<input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
|
||||
<button class="card-link btn btn-link
|
||||
{% if mailbox.id == current_user.default_mailbox_id %} disabled {% endif %}"
|
||||
>
|
||||
Set As Default Mailbox
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
>
|
||||
Set As Default Mailbox
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="delete">
|
||||
<input type="hidden" class="mailbox" value="{{ mailbox.email }}">
|
||||
<input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
|
||||
<span class="card-link btn btn-link text-danger float-right delete-mailbox
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="delete">
|
||||
<input type="hidden" class="mailbox" value="{{ mailbox.email }}">
|
||||
<input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
|
||||
<span class="card-link btn btn-link text-danger float-right delete-mailbox
|
||||
{% if mailbox.id == current_user.default_mailbox_id %} disabled {% endif %}">
|
||||
Delete
|
||||
</span>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if mailboxs|length > 0 %}
|
||||
<hr>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" class="mt-6">
|
||||
<form method="post" class="mt-2">
|
||||
{{ new_mailbox_form.csrf_token }}
|
||||
<input type="hidden" name="form-name" value="create">
|
||||
|
||||
<div class="font-weight-bold">Email</div>
|
||||
<div class="small-text">
|
||||
A verification email will be sent to this email to make sure you have access to this email.
|
||||
</div>
|
||||
<h2 class="h4">New Mailbox</h2>
|
||||
|
||||
{{ new_mailbox_form.email(class="form-control", placeholder="email@example.com") }}
|
||||
{{ render_field_errors(new_mailbox_form.email) }}
|
||||
<div class="small-text">
|
||||
A verification email will be sent to this email address.
|
||||
</div>
|
||||
|
||||
<button class="btn btn-lg btn-success mt-2">Create</button>
|
||||
</form>
|
||||
|
||||
|
|
@ -126,7 +132,7 @@
|
|||
|
||||
let that = $(this);
|
||||
let message = `All aliases owned by this mailbox <b>${mailbox}</b> will be also deleted, ` +
|
||||
" please confirm.";
|
||||
" please confirm.";
|
||||
|
||||
bootbox.confirm({
|
||||
message: message,
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<b>Name</b>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="mr-2" style="min-width: 20em">
|
||||
<div class="mr-2">
|
||||
<input name="name" class="form-control" value="{{ referral.name or '' }}">
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -45,20 +45,20 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<div class="mt-2">
|
||||
Please use this referral link to invite your friends trying out SimpleLogin: <br>
|
||||
|
||||
<div class="d-flex mb-5" style="max-width: 40em">
|
||||
<div class="flex-grow-1 mr-1">
|
||||
<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-primary" data-clipboard-action="copy"
|
||||
<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>
|
||||
Copy <i class="fe fe-clipboard"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue