reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update onboarding flow

Browse Source
This commit is contained in:
reya
2024-01-12 10:12:06 +07:00
parent 2c8571ecc7
commit e0d4c53098
10 changed files with 468 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/desktop/src/routes/auth/create.tsx
View File

@@ -85,7 +85,7 @@ export function CreateAccountScreen() {
setOnboarding(true);
return navigate("/auth/onboarding");
return navigate("/auth/onboarding", { replace: true });
};
const onSubmit = async (data: { username: string; email: string }) => {
@@ -164,7 +164,7 @@ export function CreateAccountScreen() {
setOnboarding(true);
setIsLoading(false);
return navigate("/auth/onboarding");
return navigate("/auth/onboarding", { replace: true });
} catch (e) {
setIsLoading(false);
toast.error(String(e));

4
apps/desktop/src/routes/auth/login-key.tsx
View File

@@ -35,7 +35,7 @@ export function LoginWithKey() {
privkey: privkey,
});
return navigate("/auth/onboarding");
return navigate("/auth/onboarding", { replace: true });
} catch (e) {
setLoading(false);
setError("nsec", {
@@ -98,7 +98,7 @@ export function LoginWithKey() {
</div>
<button
type="submit"
disabled={!isValid}
disabled={!isValid || loading}
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
>
{loading ? (

4
apps/desktop/src/routes/auth/login-nsecbunker.tsx
View File

@@ -52,7 +52,7 @@ export function LoginWithNsecbunker() {
privkey: localSigner.privateKey,
});
return navigate("/auth/onboarding");
return navigate("/auth/onboarding", { replace: true });
} catch (e) {
setLoading(false);
setError("npub", {
@@ -93,7 +93,7 @@ export function LoginWithNsecbunker() {
</div>
<button
type="submit"
disabled={!isValid}
disabled={!isValid || loading}
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
>
{loading ? (

51
apps/desktop/src/routes/auth/login-oauth.tsx
View File

@@ -42,24 +42,30 @@ export function LoginWithOAuth() {
},
});
if (!req.ok)
if (!req.ok) {
setLoading(false);
return toast.error(
"Cannot verify your NIP-05 address, please try again later.",
);
}
const res: NIP05 = await req.json();
if (!res.names[localPath.toLowerCase()] || !res.names[localPath])
if (!res.names[localPath.toLowerCase()] || !res.names[localPath]) {
setLoading(false);
return toast.error(
"Cannot verify your NIP-05 address, please try again later.",
);
}
const pubkey =
(res.names[localPath] as string) ||
(res.names[localPath.toLowerCase()] as string);
if (!res.nip46[pubkey])
if (!res.nip46[pubkey]) {
setLoading(false);
return toast.error("Cannot found NIP-46 with this address");
}
const nip46Relays = res.nip46[pubkey] as unknown as string[];
@@ -73,20 +79,39 @@ export function LoginWithOAuth() {
const localSigner = NDKPrivateKeySigner.generate();
const remoteSigner = new NDKNip46Signer(bunker, pubkey, localSigner);
await remoteSigner.blockUntilReady();
ark.updateNostrSigner({ signer: remoteSigner });
await storage.createSetting("nsecbunker", "1");
await storage.createAccount({
pubkey,
privkey: localSigner.privateKey,
// handle auth url request
let authWindow: Window;
remoteSigner.addListener("authUrl", (authUrl: string) => {
authWindow = new Window(`auth-${pubkey}`, {
url: authUrl,
title: "Login",
titleBarStyle: "overlay",
width: 415,
height: 600,
center: true,
closable: false,
});
});
return navigate("/auth/onboarding");
const remoteUser = await remoteSigner.blockUntilReady();
if (remoteUser) {
authWindow.close();
ark.updateNostrSigner({ signer: remoteSigner });
await storage.createSetting("nsecbunker", "1");
await storage.createAccount({
pubkey,
privkey: localSigner.privateKey,
});
return navigate("/auth/onboarding", { replace: true });
}
} catch (e) {
setLoading(false);
setError("npub", {
setError("nip05", {
type: "manual",
message: String(e),
});
@@ -122,7 +147,7 @@ export function LoginWithOAuth() {
</div>
<button
type="submit"
disabled={!isValid}
disabled={!isValid || loading}
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
>
{loading ? (

109
apps/desktop/src/routes/auth/onboarding.tsx
View File

@@ -10,6 +10,7 @@ import {
} from "@tauri-apps/plugin-notification";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
export function OnboardingScreen() {
const ark = useArk();
@@ -18,24 +19,41 @@ export function OnboardingScreen() {
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [apiKey, setAPIKey] = useState("");
const [settings, setSettings] = useState({
autoupdate: false,
notification: false,
lowPower: false,
translation: false,
});
const toggleAutoupdate = async () => {
await storage.createSetting("autoupdate", String(+!settings.autoupdate));
// update state
setSettings((prev) => ({ ...prev, autoupdate: !settings.autoupdate }));
const toggleLowPower = async () => {
await storage.createSetting("lowPower", String(+!settings.lowPower));
setSettings((state) => ({ ...state, autoupdate: !settings.lowPower }));
};
const toggleTranslation = async () => {
await storage.createSetting("translation", String(+!settings.translation));
setSettings((state) => ({ ...state, translation: !settings.translation }));
};
const toggleNofitication = async () => {
await requestPermission();
// update state
setSettings((prev) => ({ ...prev, notification: !settings.notification }));
setSettings((state) => ({
...state,
notification: !settings.notification,
}));
};
const completeAuth = async () => {
if (settings.translation) {
if (!apiKey.length)
return toast.warning(
"You need to provide Translate API if enable translation",
);
await storage.createSetting("translateApiKey", apiKey);
}
setLoading(true);
// get account contacts
@@ -71,17 +89,23 @@ export function OnboardingScreen() {
useEffect(() => {
async function loadSettings() {
// get notification permission
const permissionGranted = await isPermissionGranted();
setSettings((prev) => ({ ...prev, notification: permissionGranted }));
// get other settings
const data = await storage.getAllSettings();
if (!data) return;
for (const item of data) {
if (item.key === "autoupdate")
if (item.key === "lowPower")
setSettings((prev) => ({
...prev,
autoupdate: !!parseInt(item.value),
lowPower: !!parseInt(item.value),
}));
if (item.key === "translation")
setSettings((prev) => ({
...prev,
translation: !!parseInt(item.value),
}));
}
}
@@ -101,24 +125,6 @@ export function OnboardingScreen() {
</p>
</div>
<div className="flex flex-col gap-3">
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
<Switch.Root
checked={settings.autoupdate}
onClick={() => toggleAutoupdate()}
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
>
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
</Switch.Root>
<div>
<h3 className="text-lg font-semibold">
Auto check for update on Login
</h3>
<p className="text-neutral-500">
Keep Lume up to date with latest version, always have new
features and bug free.
</p>
</div>
</div>
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
<Switch.Root
checked={settings.notification}
@@ -135,6 +141,51 @@ export function OnboardingScreen() {
</p>
</div>
</div>
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
<Switch.Root
checked={settings.lowPower}
onClick={() => toggleLowPower()}
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
>
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
</Switch.Root>
<div>
<h3 className="font-semibold text-lg">Low Power Mode</h3>
<p className="text-neutral-500">
Limited relay connection and hide all media, sustainable for low
network environment
</p>
</div>
</div>
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
<Switch.Root
checked={settings.translation}
onClick={() => toggleTranslation()}
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
>
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
</Switch.Root>
<div>
<h3 className="font-semibold text-lg">
Translation (nostr.wine)
</h3>
<p className="text-neutral-500">
Translate text to your preferred language, powered by Nostr Wine
</p>
</div>
</div>
{settings.translation ? (
<div className="flex flex-col w-full items-start justify-between gap-2 rounded-xl px-5 py-4 bg-neutral-950">
<h3 className="font-semibold">Translate API Key</h3>
<input
type="password"
spellCheck={false}
value={apiKey}
onChange={(e) => setAPIKey(e.target.value)}
className="w-full text-xl border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-11 rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-900"
/>
</div>
) : null}
<div className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm bg-blue-950 text-blue-300">
<InfoIcon className="size-8" />
<p>