btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: better implimentation for slots

Browse Source
This commit is contained in:
liyasthomas
2021-06-30 14:16:02 +05:30
parent 0dd0d262d6
commit b750ccd46f
46 changed files with 1144 additions and 758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
components/firebase/Email.vue
View File

@@ -1,16 +1,12 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
<div v-if="mode === 'sign-in'" slot="body" class="flex flex-col">
<template #header>
<h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</template>
<template v-if="mode === 'sign-in'" #body>
<label for="email"> E-mail </label>
<input
id="email"
@@ -25,47 +21,47 @@
autofocus
@keyup.enter="signInWithEmail"
/>
</div>
<div v-else slot="body" class="flex flex-col items-center">
<div class="flex justify-center max-w-md p-4 items-center flex-col">
<i class="material-icons text-accent" style="font-size: 64px">
verified
</i>
<h3 class="font-bold my-2 text-center text-lg">
{{ $t("we_sent_magic_link") }}
</h3>
<p class="text-center">
{{ $t("we_sent_magic_link_description", { email: form.email }) }}
</p>
<p class="info">{{ $t("check_your_inbox") }}</p>
</template>
<template v-else #body>
<div class="flex flex-col items-center">
<div class="flex justify-center max-w-md p-4 items-center flex-col">
<i class="material-icons text-accent" style="font-size: 64px">
verified
</i>
<h3 class="font-bold my-2 text-center text-lg">
{{ $t("we_sent_magic_link") }}
</h3>
<p class="text-center">
{{ $t("we_sent_magic_link_description", { email: form.email }) }}
</p>
<p class="info">{{ $t("check_your_inbox") }}</p>
</div>
</div>
</div>
<div v-if="mode === 'sign-in'" slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button v-if="signingInWithEmail" class="icon button" type="button">
{{ $t("loading") }}
</button>
<button
v-else
class="rounded-md button"
:disabled="
form.email.length !== 0
? emailRegex.test(form.email)
? false
: true
</template>
<template v-if="mode === 'sign-in'" #footer>
<span></span>
<span>
<button v-if="signingInWithEmail" class="icon button" type="button">
{{ $t("loading") }}
</button>
<button
v-else
class="rounded-md button"
:disabled="
form.email.length !== 0
? emailRegex.test(form.email)
? false
: true
"
type="button"
tabindex="-1"
@click="signInWithEmail"
>
{{ $t("send_magic_link") }}
</button>
</span>
</div>
</div>
: true
"
type="button"
tabindex="-1"
@click="signInWithEmail"
>
{{ $t("send_magic_link") }}
</button>
</span>
</template>
</SmartModal>
</template>