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 { admin, auth, licensing } from "stores/portal"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
import { CookieUtils, Constants } from "@budibase/frontend-core"
|
import { CookieUtils, Constants } from "@budibase/frontend-core"
|
||||||
import { banner, BANNER_TYPES } from "@budibase/bbui"
|
|
||||||
import { API } from "api"
|
import { API } from "api"
|
||||||
import Branding from "./Branding.svelte"
|
import Branding from "./Branding.svelte"
|
||||||
|
|
||||||
|
|
@ -17,32 +16,6 @@
|
||||||
$: user = $auth.user
|
$: user = $auth.user
|
||||||
|
|
||||||
$: useAccountPortal = cloud && !$admin.disableAccountPortal
|
$: 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 validateTenantId = async () => {
|
||||||
const host = window.location.host
|
const host = window.location.host
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
import { isActive, goto, layout, redirect } from "@roxi/routify"
|
import { isActive, goto, layout, redirect } from "@roxi/routify"
|
||||||
import { capitalise } from "helpers"
|
import { capitalise } from "helpers"
|
||||||
import { onMount, onDestroy } from "svelte"
|
import { onMount, onDestroy } from "svelte"
|
||||||
|
import VerificationPromptBanner from "components/common/VerificationPromptBanner.svelte"
|
||||||
import CommandPalette from "components/commandPalette/CommandPalette.svelte"
|
import CommandPalette from "components/commandPalette/CommandPalette.svelte"
|
||||||
import TourWrap from "components/portal/onboarding/TourWrap.svelte"
|
import TourWrap from "components/portal/onboarding/TourWrap.svelte"
|
||||||
import TourPopover from "components/portal/onboarding/TourPopover.svelte"
|
import TourPopover from "components/portal/onboarding/TourPopover.svelte"
|
||||||
|
|
@ -136,6 +137,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="root" class:blur={$store.showPreview}>
|
<div class="root" class:blur={$store.showPreview}>
|
||||||
|
<VerificationPromptBanner />
|
||||||
<div class="top-nav">
|
<div class="top-nav">
|
||||||
{#if $store.initialised}
|
{#if $store.initialised}
|
||||||
<div class="topleftnav">
|
<div class="topleftnav">
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
import Logo from "./_components/Logo.svelte"
|
import Logo from "./_components/Logo.svelte"
|
||||||
import UserDropdown from "./_components/UserDropdown.svelte"
|
import UserDropdown from "./_components/UserDropdown.svelte"
|
||||||
import HelpMenu from "components/common/HelpMenu.svelte"
|
import HelpMenu from "components/common/HelpMenu.svelte"
|
||||||
|
import VerificationPromptBanner from "components/common/VerificationPromptBanner.svelte"
|
||||||
import { sdk } from "@budibase/shared-core"
|
import { sdk } from "@budibase/shared-core"
|
||||||
|
|
||||||
let loaded = false
|
let loaded = false
|
||||||
|
|
@ -55,6 +56,7 @@
|
||||||
{:else}
|
{:else}
|
||||||
<HelpMenu />
|
<HelpMenu />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<VerificationPromptBanner />
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<div class="branding">
|
<div class="branding">
|
||||||
<Logo />
|
<Logo />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue