Files
obsidian-livesync/src/modules/features/SetupWizard/dialogs/SelectMethodNewUser.svelte

60 lines
3.0 KiB
Svelte

<script lang="ts">
import DialogHeader from "@/lib/src/UI/components/DialogHeader.svelte";
import Guidance from "@/lib/src/UI/components/Guidance.svelte";
import Decision from "@/lib/src/UI/components/Decision.svelte";
import Question from "@/lib/src/UI/components/Question.svelte";
import Option from "@/lib/src/UI/components/Option.svelte";
import Options from "@/lib/src/UI/components/Options.svelte";
import Instruction from "@/lib/src/UI/components/Instruction.svelte";
import UserDecisions from "@/lib/src/UI/components/UserDecisions.svelte";
import InfoNote from "@/lib/src/UI/components/InfoNote.svelte";
import ExtraItems from "@/lib/src/UI/components/ExtraItems.svelte";
import Check from "@/lib/src/UI/components/Check.svelte";
const TYPE_USE_SETUP_URI = "use-setup-uri";
const TYPE_CONFIGURE_MANUALLY = "configure-manually";
const TYPE_CANCELLED = "cancelled";
type ResultType = typeof TYPE_USE_SETUP_URI | typeof TYPE_CONFIGURE_MANUALLY | typeof TYPE_CANCELLED;
type Props = {
setResult: (result: ResultType) => void;
};
const { setResult }: Props = $props();
let userType = $state<ResultType>(TYPE_CANCELLED);
let proceedTitle = $derived.by(() => {
if (userType === TYPE_USE_SETUP_URI) {
return "Proceed with Setup URI";
} else if (userType === TYPE_CONFIGURE_MANUALLY) {
return "I know my server details, let me enter them";
} else {
return "Please select an option to proceed";
}
});
const canProceed = $derived.by(() => {
return userType === TYPE_USE_SETUP_URI || userType === TYPE_CONFIGURE_MANUALLY;
});
</script>
<DialogHeader title="Connection Method" />
<Guidance>We will now proceed with the server configuration.</Guidance>
<Instruction>
<Question>How would you like to configure the connection to your server?</Question>
<Options>
<Option selectedValue={TYPE_USE_SETUP_URI} title="Use a Setup URI (Recommended)" bind:value={userType}>
A Setup URI is a single string of text containing your server address and authentication details. Using a
URI, if one was generated by your server installation script, provides a simple and secure configuration.
</Option>
<Option
selectedValue={TYPE_CONFIGURE_MANUALLY}
title="Enter the server information manually"
bind:value={userType}
>
This is an advanced option for users who do not have a URI or who wish to configure detailed settings.
You can also select this option if you intend to use <strong>P2P (Peer-to-Peer) synchronisation</strong>
instead of a CouchDB/S3 server — P2P requires no server setup at all.
</Option>
</Options>
</Instruction>
<UserDecisions>
<Decision title={proceedTitle} important={canProceed} disabled={!canProceed} commit={() => setResult(userType)} />
<Decision title="Cancel" commit={() => setResult(TYPE_CANCELLED)} />
</UserDecisions>