mirror of
https://github.com/pockethost/pockethost.git
synced 2025-07-10 14:52:32 +00:00
Dashboard - Sidebar Maintenance & Confirm Account Banner (#310)
* Dashboard - Sidebar Maintenance & Confirm Account Banner * Forgot IF statement
This commit is contained in:
parent
68ac5a9e79
commit
2aba52999b
@ -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}
|
||||
>
|
||||
{#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}
|
||||
|
@ -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,19 +24,15 @@
|
||||
</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 class="text-right">
|
||||
{#if isButtonProcessing}
|
||||
<div class="success-icon">
|
||||
<i class="bi bi-check-square" />
|
||||
Sent!
|
||||
<div class="btn btn-success">
|
||||
<i class="fa-regular fa-check"></i> Sent!
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
@ -51,17 +41,12 @@
|
||||
on:click={handleClick}>Resend Email</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#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>
|
||||
|
@ -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}
|
||||
|
@ -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 />
|
||||
|
Loading…
x
Reference in New Issue
Block a user