mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-08-22 08:02:19 +00:00
replaceState on logout and loading screen while loading user
This commit is contained in:
Ruben Fiszel
@@ -12,7 +12,7 @@ export function logoutWithRedirect(rd?: string): void {
|
||||
? `error=${encodeURIComponent('You have been logged out because your session has expired.')}&`
|
||||
: ''
|
||||
clearCookies()
|
||||
goto(`/user/login?${error}${rd ? 'rd=' + encodeURIComponent(rd) : ''}`)
|
||||
goto(`/user/login?${error}${rd ? 'rd=' + encodeURIComponent(rd) : ''}`, { replaceState: true })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faArrowLeft, faSpinner } from '@fortawesome/free-solid-svg-icons'
|
||||
import Icon from 'svelte-awesome'
|
||||
|
||||
import UserMenu from '$lib/components/sidebar/UserMenu.svelte'
|
||||
@@ -9,6 +9,8 @@
|
||||
import WorkspaceMenu from '$lib/components/sidebar/WorkspaceMenu.svelte'
|
||||
import SidebarContent from '$lib/components/sidebar/SidebarContent.svelte'
|
||||
import '../app.css'
|
||||
import { userStore } from '$lib/stores'
|
||||
import CenteredModal from '$lib/components/CenteredModal.svelte'
|
||||
|
||||
OpenAPI.WITH_CREDENTIALS = true
|
||||
|
||||
@@ -26,137 +28,147 @@
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<div>
|
||||
<div
|
||||
class={classNames('relative md:hidden ', menuOpen ? 'z-40' : 'pointer-events-none')}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
{#if $userStore}
|
||||
<div>
|
||||
<div
|
||||
class={classNames(
|
||||
'fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity ease-linear duration-300',
|
||||
menuOpen ? 'opacity-100' : 'opacity-0 '
|
||||
)}
|
||||
/>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
class={classNames('relative md:hidden ', menuOpen ? 'z-40' : 'pointer-events-none')}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div
|
||||
class={classNames(
|
||||
'relative flex-1 flex flex-col max-w-xs w-full bg-white transition ease-in-out duration-300 transform',
|
||||
menuOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
'fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity ease-linear duration-300',
|
||||
menuOpen ? 'opacity-100' : 'opacity-0 '
|
||||
)}
|
||||
>
|
||||
/>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
<div
|
||||
class={classNames(
|
||||
'absolute top-0 right-0 -mr-12 pt-2 ease-in-out duration-300',
|
||||
menuOpen ? 'opacity-100' : 'opacity-0'
|
||||
'relative flex-1 flex flex-col max-w-xs w-full bg-white transition ease-in-out duration-300 transform',
|
||||
menuOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
menuOpen = !menuOpen
|
||||
}}
|
||||
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-blue-500 h-full">
|
||||
<div class="flex items-center flex-shrink-0 p-4 font-extrabold text-white">Windmill</div>
|
||||
|
||||
<div class="px-2 py-4 space-y-2 border-y border-blue-400 ">
|
||||
<WorkspaceMenu />
|
||||
<UserMenu />
|
||||
</div>
|
||||
|
||||
<SidebarContent {isCollapsed} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class={classNames(
|
||||
'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 ',
|
||||
isCollapsed ? 'md:w-12' : 'md:w-48'
|
||||
)}
|
||||
>
|
||||
<div class="flex-1 flex flex-col min-h-0 shadow-lg bg-blue-500">
|
||||
<div class="flex items-center flex-shrink-0 p-4 font-extrabold text-white">
|
||||
{#if isCollapsed}
|
||||
W
|
||||
{:else}
|
||||
Windmill
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="px-2 py-4 space-y-2 border-y border-blue-400 ">
|
||||
<WorkspaceMenu {isCollapsed} />
|
||||
<UserMenu {isCollapsed} />
|
||||
</div>
|
||||
<SidebarContent {isCollapsed} />
|
||||
|
||||
<div class="flex-shrink-0 flex p-4 border-t border-blue-400">
|
||||
<button
|
||||
on:click={() => {
|
||||
isCollapsed = !isCollapsed
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
data={faArrowLeft}
|
||||
<div
|
||||
class={classNames(
|
||||
'flex-shrink-0 h-4 w-4 transition-all ease-in-out duration-200 text-white',
|
||||
isCollapsed ? 'rotate-180' : 'rotate-0'
|
||||
'absolute top-0 right-0 -mr-12 pt-2 ease-in-out duration-300',
|
||||
menuOpen ? 'opacity-100' : 'opacity-0'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
menuOpen = !menuOpen
|
||||
}}
|
||||
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-blue-500 h-full">
|
||||
<div class="flex items-center flex-shrink-0 p-4 font-extrabold text-white">
|
||||
Windmill
|
||||
</div>
|
||||
|
||||
<div class="px-2 py-4 space-y-2 border-y border-blue-400 ">
|
||||
<WorkspaceMenu />
|
||||
<UserMenu />
|
||||
</div>
|
||||
|
||||
<SidebarContent {isCollapsed} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class={classNames(
|
||||
'flex flex-col flex-1 transition-all ease-in-out duration-200',
|
||||
isCollapsed ? 'md:pl-12' : 'md:pl-48'
|
||||
)}
|
||||
>
|
||||
<main>
|
||||
<div class="border-b w-full">
|
||||
<div
|
||||
class="py-2 px-2 sm:px-4 md:px-8 flex justify-between items-center shadow-sm max-w-6xl mx-auto md:hidden"
|
||||
>
|
||||
|
||||
<div
|
||||
class={classNames(
|
||||
'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 ',
|
||||
isCollapsed ? 'md:w-12' : 'md:w-48'
|
||||
)}
|
||||
>
|
||||
<div class="flex-1 flex flex-col min-h-0 shadow-lg bg-blue-500">
|
||||
<div class="flex items-center flex-shrink-0 p-4 font-extrabold text-white">
|
||||
{#if isCollapsed}
|
||||
W
|
||||
{:else}
|
||||
Windmill
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="px-2 py-4 space-y-2 border-y border-blue-400 ">
|
||||
<WorkspaceMenu {isCollapsed} />
|
||||
<UserMenu {isCollapsed} />
|
||||
</div>
|
||||
<SidebarContent {isCollapsed} />
|
||||
|
||||
<div class="flex-shrink-0 flex p-4 border-t border-blue-400">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
menuOpen = true
|
||||
isCollapsed = !isCollapsed
|
||||
}}
|
||||
class="h-8 w-8 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<Icon
|
||||
data={faArrowLeft}
|
||||
class={classNames(
|
||||
'flex-shrink-0 h-4 w-4 transition-all ease-in-out duration-200 text-white',
|
||||
isCollapsed ? 'rotate-180' : 'rotate-0'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div
|
||||
class={classNames(
|
||||
'flex flex-col flex-1 transition-all ease-in-out duration-200',
|
||||
isCollapsed ? 'md:pl-12' : 'md:pl-48'
|
||||
)}
|
||||
>
|
||||
<main>
|
||||
<div class="border-b w-full">
|
||||
<div
|
||||
class="py-2 px-2 sm:px-4 md:px-8 flex justify-between items-center shadow-sm max-w-6xl mx-auto md:hidden"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
menuOpen = true
|
||||
}}
|
||||
class="h-8 w-8 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<CenteredModal title="Loading user">
|
||||
<div class="mx-auto w-0">
|
||||
<Icon class="animate-spin" data={faSpinner} scale={2.0} />
|
||||
</div>
|
||||
</CenteredModal>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user