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

View File

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

View File

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

View File

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