mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-16 08:27:07 +00:00
SethBurkart123
f9406fb469
- Move Cloud section inline with other settings, remove dedicated header bar - Replace in-extension login form with browser redirect to accounts.betterseqta.org - Background script intercepts OAuth callback URL to capture tokens - Add animated CloudPanel overlay (same pattern as ColourPicker) - Hide cloud sync details and profile picture setting when not signed in - Simplify CloudSettingsSync UI, reduce text verbosity - Fix settings download to merge keys instead of clear+set - Add legacy-to-plugin settings migration for cloud sync - Shorten profile picture and default page descriptions - Make DisclaimerModal title/message dynamic - Update CloudHeader button styling to match other buttons
80 lines
2.3 KiB
Svelte
80 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition";
|
|
import { animate } from "motion";
|
|
import { onMount } from "svelte";
|
|
import { cloudAuth } from "@/seqta/utils/CloudAuth";
|
|
|
|
let { onClose } = $props<{ onClose: () => void }>();
|
|
let modalElement: HTMLElement;
|
|
|
|
onMount(() => {
|
|
return cloudAuth.subscribe((s) => {
|
|
if (s.isLoggedIn) onClose();
|
|
});
|
|
});
|
|
|
|
$effect(() => {
|
|
if (modalElement) {
|
|
animate(
|
|
modalElement,
|
|
{ scale: [0.9, 1], opacity: [0, 1] },
|
|
{ type: "spring", stiffness: 300, damping: 25 },
|
|
);
|
|
}
|
|
});
|
|
|
|
async function handleSignIn() {
|
|
await cloudAuth.startLogin();
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="flex fixed inset-0 z-[99999] justify-center items-center bg-black/50"
|
|
onclick={(e) => {
|
|
if (e.target === e.currentTarget) onClose();
|
|
}}
|
|
onkeydown={(e) => {
|
|
if (e.key === "Escape") onClose();
|
|
}}
|
|
role="button"
|
|
tabindex="-1"
|
|
transition:fade={{ duration: 150 }}
|
|
>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
bind:this={modalElement}
|
|
class="p-4 mx-4 w-full max-w-md max-h-[90vh] overflow-y-auto bg-white rounded-2xl shadow-2xl dark:bg-zinc-800 dark:text-white"
|
|
onclick={(e) => e.stopPropagation()}
|
|
onkeydown={(e) => e.stopPropagation()}
|
|
>
|
|
<h2 class="mb-3 text-xl font-bold text-zinc-900 dark:text-white">
|
|
Sign in to favorite themes
|
|
</h2>
|
|
|
|
<p class="mb-4 text-sm text-zinc-600 dark:text-zinc-400">
|
|
Sign in to the Theme Store to save favorites across devices, or create an account to get started.
|
|
</p>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={handleSignIn}
|
|
class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors duration-200"
|
|
>
|
|
Sign in with BetterSEQTA Cloud
|
|
</button>
|
|
<p class="mt-2 text-xs text-center text-zinc-400 dark:text-zinc-500">
|
|
Opens accounts.betterseqta.org in a new tab
|
|
</p>
|
|
|
|
<div class="flex justify-end mt-4">
|
|
<button
|
|
type="button"
|
|
onclick={onClose}
|
|
class="px-4 py-2 text-sm font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|