mirror of
https://github.com/pockethost/pockethost.git
synced 2025-07-10 06:42:30 +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>
|
</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}
|
||||||
|
@ -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>
|
|
||||||
|
@ -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}
|
||||||
|
@ -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 />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user