Change verification banner implementation to respect portal and design app section layouts (#11813)
This commit is contained in:
Gerard Burns
GitHub
parent
02718dc8bc
commit
ac50ce5832
|
|
@ -0,0 +1,102 @@
|
|||
<script>
|
||||
import { notifications, Button, Icon, Body } from "@budibase/bbui"
|
||||
import { admin, auth } from "stores/portal"
|
||||
|
||||
$: user = $auth.user
|
||||
let loading = false
|
||||
let complete = false
|
||||
|
||||
const resetPassword = async () => {
|
||||
if (loading || complete) return
|
||||
loading = true
|
||||
|
||||
try {
|
||||
await fetch(`${$admin.accountPortalUrl}/api/auth/reset`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ email: user.email }),
|
||||
})
|
||||
|
||||
complete = true
|
||||
} catch (e) {
|
||||
notifications.error("There was an issue sending your validation email.")
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if user?.account?.verified === false}
|
||||
<section class="banner">
|
||||
<div class="icon">
|
||||
<Icon name="Info" />
|
||||
</div>
|
||||
<div class="copy">
|
||||
<Body size="S">
|
||||
Please verify your account. We've sent the verification link to <span
|
||||
class="email">{user.email}</span
|
||||
></Body
|
||||
>
|
||||
</div>
|
||||
<div class="button" class:disabled={loading || complete}>
|
||||
<Button on:click={resetPassword}
|
||||
>{complete ? "Email sent" : "Resend email"}</Button
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.banner {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
background-color: var(--grey-2);
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 15px;
|
||||
color: var(--ink);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.copy {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.copy :global(p) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.email {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.button :global(button) {
|
||||
color: var(--ink);
|
||||
background-color: var(--grey-3);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button :global(button):hover {
|
||||
background-color: var(--grey-4);
|
||||
}
|
||||
|
||||
.disabled :global(button) {
|
||||
pointer-events: none;
|
||||
color: var(--ink);
|
||||
background-color: var(--grey-4);
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
import { admin, auth, licensing } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import { CookieUtils, Constants } from "@budibase/frontend-core"
|
||||
import { banner, BANNER_TYPES } from "@budibase/bbui"
|
||||
import { API } from "api"
|
||||
import Branding from "./Branding.svelte"
|
||||
|
||||
|
|
@ -17,32 +16,6 @@
|
|||
$: user = $auth.user
|
||||
|
||||
$: useAccountPortal = cloud && !$admin.disableAccountPortal
|
||||
let showVerificationPrompt = false
|
||||
|
||||
const checkVerification = user => {
|
||||
if (!showVerificationPrompt && user?.account?.verified === false) {
|
||||
showVerificationPrompt = true
|
||||
banner.queue([
|
||||
{
|
||||
message: `Please verify your account. We've sent the verification link to ${user.email}`,
|
||||
type: BANNER_TYPES.NEUTRAL,
|
||||
showCloseButton: false,
|
||||
extraButtonAction: () => {
|
||||
fetch(`${$admin.accountPortalUrl}/api/auth/reset`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ email: user.email }),
|
||||
})
|
||||
},
|
||||
extraButtonText: "Resend email",
|
||||
},
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
$: checkVerification(user)
|
||||
|
||||
const validateTenantId = async () => {
|
||||
const host = window.location.host
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
import { isActive, goto, layout, redirect } from "@roxi/routify"
|
||||
import { capitalise } from "helpers"
|
||||
import { onMount, onDestroy } from "svelte"
|
||||
import VerificationPromptBanner from "components/common/VerificationPromptBanner.svelte"
|
||||
import CommandPalette from "components/commandPalette/CommandPalette.svelte"
|
||||
import TourWrap from "components/portal/onboarding/TourWrap.svelte"
|
||||
import TourPopover from "components/portal/onboarding/TourPopover.svelte"
|
||||
|
|
@ -136,6 +137,7 @@
|
|||
{/if}
|
||||
|
||||
<div class="root" class:blur={$store.showPreview}>
|
||||
<VerificationPromptBanner />
|
||||
<div class="top-nav">
|
||||
{#if $store.initialised}
|
||||
<div class="topleftnav">
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
import Logo from "./_components/Logo.svelte"
|
||||
import UserDropdown from "./_components/UserDropdown.svelte"
|
||||
import HelpMenu from "components/common/HelpMenu.svelte"
|
||||
import VerificationPromptBanner from "components/common/VerificationPromptBanner.svelte"
|
||||
import { sdk } from "@budibase/shared-core"
|
||||
|
||||
let loaded = false
|
||||
|
|
@ -55,6 +56,7 @@
|
|||
{:else}
|
||||
<HelpMenu />
|
||||
<div class="container">
|
||||
<VerificationPromptBanner />
|
||||
<div class="nav">
|
||||
<div class="branding">
|
||||
<Logo />
|
||||
|
|
|
|||
Loading…
Reference in a new issue