This commit is contained in:
ngxson
2021-10-03 14:03:26 +02:00
parent 15f7e49c6f
commit 4a046d17ab
10 changed files with 70 additions and 54 deletions
+7 -7
View File
@@ -67,12 +67,12 @@
<img
v-if="isChrome"
src="../images/chrome-permission-screenshot.png"
style="width: 400px"
style="width: 400px;"
/>
<img
v-else
src="../images/firefox-permission-screenshot.png"
style="width: 400px"
style="width: 400px;"
/>
<p>
@@ -84,7 +84,7 @@
<img
alt="SimpleLogin Button demo"
src="../images/sl-button-demo.png"
style="width: 400px"
style="width: 400px;"
class="mb-3"
/>
@@ -106,7 +106,7 @@
<button
@click="nextStep()"
class="btn"
style="color: #888; font-size: 0.8em"
style="color: #888; font-size: 0.8em;"
>
Skip
</button>
@@ -119,20 +119,20 @@
<img
alt="SimpleLogin"
src="../images/icon-simplelogin.png"
style="height: 1.2em"
style="height: 1.2em;"
/>
icon at the corner of your browser.
</p>
<p
v-if="isChrome"
class="alert alert-primary"
style="border-left: 5px #467fcf solid"
style="border-left: 5px #467fcf solid;"
>
Note: this icon maybe hidden under
<img
alt="Extension Menu"
src="../images/icon-puzzle.png"
style="height: 1.2em"
style="height: 1.2em;"
/>
button.
</p>
+4 -1
View File
@@ -29,7 +29,10 @@ const API_ROUTE = {
TOGGLE_ALIAS: { method: "POST", path: "/api/aliases/:alias_id/toggle" },
EDIT_ALIAS: { method: "PUT", path: "/api/aliases/:alias_id" },
DELETE_ALIAS: { method: "DELETE", path: "/api/aliases/:alias_id" },
CREATE_REVERSE_ALIAS: { method: "POST", path: "/api/aliases/:alias_id/contacts" },
CREATE_REVERSE_ALIAS: {
method: "POST",
path: "/api/aliases/:alias_id/contacts",
},
GET_API_KEY_FROM_COOKIE: { method: "POST", path: "/api/api_key" },
};
+2 -2
View File
@@ -29,7 +29,7 @@
<textarea-autosize
placeholder="Note, can be anything to help you remember why you created this alias. This field is optional."
class="form-control"
style="width: 100%"
style="width: 100%;"
v-model="moreOptions.note"
:disabled="loading"
></textarea-autosize>
@@ -69,7 +69,7 @@
<button
class="btn btn-sm btn-delete"
style="color: #dc3545"
style="color: #dc3545;"
v-on:click="handleClickDelete"
:disabled="loading"
>
+5 -5
View File
@@ -1,21 +1,21 @@
<template>
<div class="header">
<div class="row mt-2 pb-2 ml-3 mr-2" style="border-bottom: 1px #eee solid">
<div class="row mt-2 pb-2 ml-3 mr-2" style="border-bottom: 1px #eee solid;">
<div>
<div
v-on:click="navigateBack()"
v-bind:class="{ back: canBack }"
style="display: inline-block"
style="display: inline-block;"
>
<img
v-if="canBack"
src="/images/back-button.svg"
style="height: 20px"
style="height: 20px;"
/>
<img
class="sl-logo"
src="/images/horizontal-logo.svg"
style="height: 18px"
style="height: 18px;"
/>
</div>
<div class="beta-badge" v-if="isBeta">BETA</div>
@@ -53,7 +53,7 @@
:href="apiUrl + '/dashboard/'"
target="_blank"
class="dashboard-btn float-right"
style="padding: 0.25rem 0.5rem; font-size: 0.875rem"
style="padding: 0.25rem 0.5rem; font-size: 0.875rem;"
title="Dashboard"
v-b-tooltip.hover
:disabled="!useCompactLayout"
+3 -3
View File
@@ -1,7 +1,7 @@
<template>
<div class="content">
<!-- Login/register screen -->
<div v-if="!isShowMfa" class="p-6 container" style="min-height: 350px">
<div v-if="!isShowMfa" class="p-6 container" style="min-height: 350px;">
<h1 class="h5 mb-3">
Welcome to
<a href="https://simplelogin.io" target="_blank"
@@ -52,7 +52,7 @@
<!-- END Login/register screen -->
<!-- MFA screen -->
<div v-else class="p-6 container" style="min-height: 350px">
<div v-else class="p-6 container" style="min-height: 350px;">
<div class="p-3">
<div class="mb-2">
Your account is protected with Two Factor Authentication. <br />
@@ -63,7 +63,7 @@
<p>Please enter the 2FA code from your 2FA authenticator</p>
</div>
<div style="margin: auto">
<div style="margin: auto;">
<input
v-model="mfaCode"
v-on:keyup.enter="submitMfaCode"
+18 -15
View File
@@ -5,7 +5,7 @@
<!-- Main Page -->
<div class="container">
<div v-if="recommendation.show" class="text-center">
<div class="" style="font-size: 12px">
<div class="" style="font-size: 12px;">
You created this alias on this website before:
</div>
<div class="flex-grow-1">
@@ -27,14 +27,14 @@
<div>
<p
class="font-weight-bold mt-2 align-self-center"
style="display: inline-block"
style="display: inline-block;"
>
New Alias
</p>
<button
:disabled="loading || !canCreate"
style="margin-left: 15px"
style="margin-left: 15px;"
class="btn btn-outline-primary btn-sm"
title="Generate a totally random alias."
@click="createRandomAlias"
@@ -49,7 +49,7 @@
<div class="row mb-2">
<div
class="col align-self-start input-group-sm"
style="padding-right: 0"
style="padding-right: 0;"
>
<input
v-model="aliasPrefix"
@@ -63,7 +63,7 @@
<div
class="col align-self-start input-group-sm"
style="padding-left: 5px; padding-right: 5px"
style="padding-left: 5px; padding-right: 5px;"
>
<select
v-model="signedSuffix"
@@ -82,7 +82,7 @@
<button
:disabled="loading || !canCreate"
style="margin-right: 15px"
style="margin-right: 15px;"
class="btn btn-primary btn-sm align-self-start"
>
Create
@@ -90,7 +90,7 @@
</div>
<div
class="row text-danger"
style="font-size: 12px"
style="font-size: 12px;"
v-if="aliasPrefixError != ''"
>
<div class="col">
@@ -100,13 +100,13 @@
</form>
</div>
<div class="mb-1 text-center" v-if="aliasPrefix" style="font-size: 12px">
<div class="mb-1 text-center" v-if="aliasPrefix" style="font-size: 12px;">
You're about to create alias
<span class="text-primary">{{ aliasPrefix }}{{ signedSuffix[0] }}</span>
</div>
<div v-if="!canCreate">
<p class="text-danger" style="font-size: 14px">
<p class="text-danger" style="font-size: 14px;">
You have reached limit number of email aliases in free plan, please
<a :href="apiUrl + '/dashboard/pricing'" target="_blank">upgrade</a>
or reuse one of the existing aliases.
@@ -119,7 +119,7 @@
Or use an existing alias
</div>
<div class="mx-auto" style="max-width: 60%">
<div class="mx-auto" style="max-width: 60%;">
<input
v-model="searchString"
v-on:keyup.enter="loadAlias"
@@ -133,7 +133,7 @@
v-if="searchString"
@click="resetSearch"
class="float-right"
style="color: blue; border: none; padding: 0; background: none"
style="color: blue; border: none; padding: 0; background: none;"
>
Reset
</button>
@@ -157,7 +157,7 @@
</a>
<div class="list-item-email-fade" />
</div>
<div style="white-space: nowrap">
<div style="white-space: nowrap;">
<toggle-button
:value="alias.enabled"
color="#b02a8f"
@@ -166,7 +166,10 @@
@change="toggleAlias(alias)"
/>
<div class="btn-svg btn-send" @click="goToReverseAlias(alias)">
<div
class="btn-svg btn-send"
@click="goToReverseAlias(alias)"
>
<font-awesome-icon icon="paper-plane" />
</div>
@@ -189,7 +192,7 @@
{{ alias.note }}
</div>
<div class="font-weight-lighter" style="font-size: 11px">
<div class="font-weight-lighter" style="font-size: 11px;">
{{ alias.nb_forward }} forwards, {{ alias.nb_reply }} replies,
{{ alias.nb_block }} blocks.
</div>
@@ -210,7 +213,7 @@
<div v-if="isFetchingAlias" class="text-secondary mx-auto text-center">
<img
src="/images/loading-three-dots.svg"
style="width: 80px; margin: 20px"
style="width: 80px; margin: 20px;"
/>
</div>
</div>
+1 -1
View File
@@ -41,7 +41,7 @@
<a
@click="doNotAskRateAgain"
class="text-secondary cursor"
style="font-size: 0.7em"
style="font-size: 0.7em;"
>
Do not ask again
</a>
+28 -18
View File
@@ -1,20 +1,30 @@
<template>
<div class="content ">
<div class="content">
<div class="p-2 container">
<!-- Reverse-alias screen -->
<div class="m-2 p-2" v-if="!createdReverseAlias">
<p>Create reverse-alias for <span class="font-weight-bold">{{ alias.email }}</span></p>
<p>
Create reverse-alias for
<span class="font-weight-bold">{{ alias.email }}</span>
</p>
<small>
To send an email from your alias to a contact, you need to create a reverse-alias, a special email address. When you send an email to the reverse-alias, the email will be sent from your alias to the contact.<br/><br/>
This Youtube video can also quickly walk you through the steps: <a href="https://www.youtube.com/watch?v=VsypF-DBaow" target="_blank" rel="noopener noreferrer">How to send emails from an alias</a>
To send an email from your alias to a contact, you need to create a
reverse-alias, a special email address. When you send an email to the
reverse-alias, the email will be sent from your alias to the
contact.<br /><br />
This Youtube video can also quickly walk you through the steps:
<a
href="https://www.youtube.com/watch?v=VsypF-DBaow"
target="_blank"
rel="noopener noreferrer"
>How to send emails from an alias</a
>
</small>
<br/><br/>
<br /><br />
<label>
Receiver:
<font-awesome-icon
v-b-tooltip.hover.top="
'Where do you want to send the email?'
"
v-b-tooltip.hover.top="'Where do you want to send the email?'"
icon="question-circle"
/>
</label>
@@ -43,10 +53,14 @@
</a>
</p>
<small>
Emails sent to this address will be forwarded to <b>{{ createdReverseAlias.contact }}</b>. The receiver will see <b>{{ alias.email }}</b> as your email.<br/>
You can use this reverse-alias from one of these mailbox(es):<br/>
Emails sent to this address will be forwarded to
<b>{{ createdReverseAlias.contact }}</b
>. The receiver will see <b>{{ alias.email }}</b> as your email.<br />
You can use this reverse-alias from one of these mailbox(es):<br />
<ul>
<li v-for="mailbox in alias.mailboxes" v-bind:key="mailbox.id">{{ mailbox.email }}</li>
<li v-for="mailbox in alias.mailboxes" v-bind:key="mailbox.id">
{{ mailbox.email }}
</li>
</ul>
</small>
</div>
@@ -61,11 +75,7 @@
Create a reverse-alias
</button>
<button
class="btn btn-sm btn-primary"
@click="backToMainPage"
v-else
>
<button class="btn btn-sm btn-primary" @click="backToMainPage" v-else>
<font-awesome-icon icon="arrow-left" />
Back
</button>
@@ -86,7 +96,7 @@ export default {
alias: SLStorage.getTemporary("alias"),
createdReverseAlias: null,
loading: false,
receiverEmail: '',
receiverEmail: "",
};
},
methods: {
@@ -112,7 +122,7 @@ export default {
API_ON_ERR.TOAST
);
this.createdReverseAlias = data;
console.log(this.createdReverseAlias)
console.log(this.createdReverseAlias);
this.loading = false;
},
+1 -1
View File
@@ -7,7 +7,7 @@
</div>
<div class="mb-2">The default API URL is https://app.simplelogin.io</div>
<div style="margin: auto">
<div style="margin: auto;">
<input
v-model="apiUrl"
v-on:keyup.enter="saveApiUrl"
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div v-if="show" style="height: 400px">
<div v-if="show" style="height: 400px;">
<div class="splash overlay">
<div class="overlay-content">
<img class="logo" src="/images/horizontal-logo.svg" /><br />