feat(webapp): hide push token behind onboarding advanced settings
This commit is contained in:
@@ -8,6 +8,8 @@
|
|||||||
import { Input } from '$lib/components/ui/input/index.js';
|
import { Input } from '$lib/components/ui/input/index.js';
|
||||||
import { Label } from '$lib/components/ui/label/index.js';
|
import { Label } from '$lib/components/ui/label/index.js';
|
||||||
import { ToggleGroup, ToggleGroupItem } from '$lib/components/ui/toggle-group/index.js';
|
import { ToggleGroup, ToggleGroupItem } from '$lib/components/ui/toggle-group/index.js';
|
||||||
|
|
||||||
|
let showAdvancedSettings = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AppChrome pageKey="onboarding">
|
<AppChrome pageKey="onboarding">
|
||||||
@@ -58,6 +60,35 @@
|
|||||||
</ToggleGroup>
|
</ToggleGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<Label class="text-xs font-semibold tracking-wider text-gray-400">ADVANCED SETTINGS</Label>
|
||||||
|
<p class="text-xs text-gray-500">Optional device settings and push configuration.</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
id="toggleAdvancedSettingsBtn"
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
class="h-10 w-10 rounded-full border border-white/10 bg-black/30 p-0 text-gray-300 hover:bg-white/5 hover:text-white"
|
||||||
|
aria-label={showAdvancedSettings ? 'Hide advanced settings' : 'Show advanced settings'}
|
||||||
|
aria-expanded={showAdvancedSettings}
|
||||||
|
onclick={() => (showAdvancedSettings = !showAdvancedSettings)}
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||||
|
/>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if showAdvancedSettings}
|
||||||
|
<div class="rounded-2xl border border-white/8 bg-black/30 p-4">
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<Label class="text-xs font-semibold tracking-wider text-gray-400" for="pushToken">PUSH TOKEN (OPTIONAL)</Label>
|
<Label class="text-xs font-semibold tracking-wider text-gray-400" for="pushToken">PUSH TOKEN (OPTIONAL)</Label>
|
||||||
<Input
|
<Input
|
||||||
@@ -69,6 +100,9 @@
|
|||||||
oninput={(event) => appController.setOnboardingField('pushToken', (event.currentTarget as HTMLInputElement).value)}
|
oninput={(event) => appController.setOnboardingField('pushToken', (event.currentTarget as HTMLInputElement).value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardFooter class="flex flex-col items-stretch gap-3 border-0 bg-transparent px-6 pb-6 pt-2">
|
<CardFooter class="flex flex-col items-stretch gap-3 border-0 bg-transparent px-6 pb-6 pt-2">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
Reference in New Issue
Block a user