Dashboard - Sidebar Maintenance & Confirm Account Banner (#310)

* Dashboard - Sidebar Maintenance & Confirm Account Banner

* Forgot IF statement
This commit is contained in:
Brewhouse Digital 2023-10-03 22:31:23 -05:00 committed by GitHub
parent 68ac5a9e79
commit 2aba52999b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 51 deletions

View File

@ -33,12 +33,12 @@
</MediaQuery>
<div class="flex flex-col gap-2 mb-auto">
<a on:click={handleClick} href="/dashboard" class={linkClasses}
><i
<a on:click={handleClick} href="/dashboard" class={linkClasses}>
<i
class="fa-regular fa-table-columns {$page.url.pathname ===
'/dashboard' && 'text-primary'}"
></i> Dashboard</a
>
></i> Dashboard
</a>
<div class="pl-8 flex flex-col gap-4 mb-4">
{#each values($globalInstancesStore) as app}
@ -47,10 +47,15 @@
on:click={handleClick}
class={subLinkClasses}
>
<i
class="fa-regular fa-server {$page.url.pathname ===
`/app/instances/${app.id}` && 'text-primary'}"
></i>
{#if app.maintenance}
<i class="fa-regular fa-triangle-person-digging text-warning"></i>
{:else}
<i
class="fa-regular fa-server {$page.url.pathname ===
`/app/instances/${app.id}` && 'text-primary'}"
></i>
{/if}
{app.subdomain}
</a>
{/each}

View File

@ -1,24 +1,18 @@
<script lang="ts">
import AlertBar from '$components/AlertBar.svelte'
import { AlertTypes } from '$components/AlertBar.types'
import { handleResendVerificationEmail } from '$util/database'
import { slide } from 'svelte/transition'
import { isUserLoggedIn, isUserVerified } from '$util/stores'
let defaultAlertBarType: AlertTypes = AlertTypes.Warning
let isButtonProcessing: boolean = false
let formError: string = ''
const handleClick = () => {
// Reset the alert type if resubmitted
defaultAlertBarType = AlertTypes.Warning
// Update the state
isButtonProcessing = true
handleResendVerificationEmail((error) => {
formError = error
defaultAlertBarType = AlertTypes.Danger
isButtonProcessing = false
})
@ -30,38 +24,29 @@
</script>
{#if $isUserLoggedIn && !$isUserVerified}
<div class="container py-3">
<AlertBar alertType={defaultAlertBarType}>
<div
class="d-flex flex-wrap align-items-center justify-content-center gap-3"
>
<i class="bi bi-envelope-exclamation" />
<div class="alert alert-info mb-8">
<i class="fa-regular fa-envelopes"></i>
<div>Please verify your account by clicking the link in your email</div>
<div>Please verify your account by clicking the link in your email</div>
{#if isButtonProcessing}
<div class="success-icon">
<i class="bi bi-check-square" />
Sent!
</div>
{:else}
<button
type="button"
class="btn btn-outline-secondary"
on:click={handleClick}>Resend Email</button
>
{/if}
</div>
<div class="text-right">
{#if isButtonProcessing}
<div class="btn btn-success">
<i class="fa-regular fa-check"></i> Sent!
</div>
{:else}
<button
type="button"
class="btn btn-outline-secondary"
on:click={handleClick}>Resend Email</button
>
{/if}
{#if formError}
<div class="border-top text-center mt-2 pt-2">{formError}</div>
<div transition:slide class="border-top text-center mt-2 pt-2">
{formError}
</div>
{/if}
</AlertBar>
</div>
</div>
{/if}
<style>
.success-icon {
padding: 0.375rem 0.75rem;
}
</style>

View File

@ -1,7 +1,5 @@
<script>
import Navbar from '$components/Navbar.svelte'
import VerifyAccountBar from '$components/VerifyAccountBar.svelte'
import AuthStateGuard from '$components/helpers/AuthStateGuard.svelte'
import Meta from '$components/helpers/Meta.svelte'
import Protect from '$components/helpers/Protect.svelte'
import MediaQuery from '$components/MediaQuery.svelte'
@ -9,17 +7,12 @@
import '../app.css'
import { isUserLoggedIn } from '$util/stores'
import Logo from '$components/Logo.svelte'
</script>
<Meta />
<Protect />
{#if $isUserLoggedIn}
<AuthStateGuard>
<VerifyAccountBar />
</AuthStateGuard>
<div class="layout xl:flex">
<MediaQuery query="(min-width: 1280px)" let:matches>
{#if matches}

View File

@ -3,6 +3,7 @@
import { globalInstancesStore } from '$util/stores'
import { values } from '@s-libs/micro-dash'
import InstanceList from './InstanceList.svelte'
import VerifyAccountBar from '$components/VerifyAccountBar.svelte'
$: isFirstApplication = values($globalInstancesStore).length === 0
</script>
@ -21,6 +22,8 @@
>
</div>
<VerifyAccountBar />
<!--<UsageChartForAllInstances />-->
<InstanceList />