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

fix logout function, prepare for multi-account support

Browse Source
This commit is contained in:
Ren Amamiya
2023-09-08 08:36:15 +07:00
parent 472925bb05
commit a1fa777f8c
12 changed files with 119 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/auth/create/step-1.tsx
View File

@@ -67,7 +67,7 @@ export function CreateStep1Screen() {
useEffect(() => {
// save current step, if user close app and reopen it
setStep('/auth/create/step-1');
setStep('/auth/create');
}, []);
return (

2
src/app/auth/create/step-2.tsx
View File

@@ -63,7 +63,7 @@ export function CreateStep2Screen() {
const dir = await appConfigDir();
const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
db.secureDB = stronghold;
if (!db.secureDB) db.secureDB = stronghold;
// save privkey to secure storage
await db.secureSave(pubkey, privkey);

2
src/app/auth/import/step-1.tsx
View File

@@ -79,7 +79,7 @@ export function ImportStep1Screen() {
useEffect(() => {
// save current step, if user close app and reopen it
setStep('/auth/import/step-1');
setStep('/auth/import');
}, []);
return (

2
src/app/auth/import/step-2.tsx
View File

@@ -63,7 +63,7 @@ export function ImportStep2Screen() {
const dir = await appConfigDir();
const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
db.secureDB = stronghold;
if (!db.secureDB) db.secureDB = stronghold;
// save privkey to secure storage
await db.secureSave(pubkey, privkey);

9
src/libs/storage/instance.ts
View File

@@ -291,6 +291,15 @@ export class LumeStorage {
);
}
public async accountLogout() {
await this.db.execute("UPDATE accounts SET is_active = '0' WHERE id = $1;", [
this.account.id,
]);
this.account = null;
return true;
}
public async close() {
return this.db.close();
}

5
src/shared/accounts/more.tsx
View File

@@ -3,6 +3,7 @@ import { useState } from 'react';
import { Link } from 'react-router-dom';
import { HorizontalDotsIcon } from '@shared/icons';
import { Logout } from '@shared/logout';
export function AccountMoreActions({ pubkey }: { pubkey: string }) {
const [open, setOpen] = useState(false);
@@ -44,9 +45,7 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item asChild>
<button className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10">
Logout
</button>
<Logout />
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>

102
src/shared/logout.tsx
View File

@@ -1,75 +1,65 @@
import * as Dialog from '@radix-ui/react-dialog';
import { useQueryClient } from '@tanstack/react-query';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
import { useNavigate } from 'react-router-dom';
import { CancelIcon, LogoutIcon } from '@shared/icons';
import { useStorage } from '@libs/storage/provider';
import { useStronghold } from '@stores/stronghold';
export function Logout() {
const queryClient = useQueryClient();
const { db } = useStorage();
const navigate = useNavigate();
const clearPrivkey = useStronghold((state) => state.clearPrivkey);
const logout = async () => {
// reset database
// await removeAll();
// reset react query
queryClient.clear();
// remove account
db.accountLogout();
// clear privkey in session storage
clearPrivkey();
// redirect to welcome screen
navigate('/auth/welcome');
};
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<AlertDialog.Root>
<AlertDialog.Trigger asChild>
<button
type="button"
aria-label="Logout"
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10"
>
<LogoutIcon className="h-4 w-4 text-white" />
Logout
</button>
</Dialog.Trigger>
<Dialog.Portal className="relative z-10">
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-6">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<Dialog.Title className="text-lg font-semibold leading-none text-white">
Are you sure!
</Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
<CancelIcon className="h-4 w-4 text-white/50" />
</Dialog.Close>
</div>
<Dialog.Description className="text-sm leading-tight text-white/50">
<p className="mb-2">
When logout, all local data will be wiped, and restart app then you
need to start onboarding process again when you log in.
</p>
<p>
In the next version, Lume will support multi account, then you can
switch between all account s instead of logout
</p>
</Dialog.Description>
</div>
</AlertDialog.Trigger>
<AlertDialog.Portal className="relative z-10">
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl">
<div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">
<AlertDialog.Title className="text-lg font-semibold leading-none text-white">
Are you sure!
</AlertDialog.Title>
<AlertDialog.Description className="text-sm leading-tight text-white/50">
You can always log back in at any time. If you just want to switch
accounts, you can do that by adding an existing account.
</AlertDialog.Description>
</div>
<div className="flex h-full w-full flex-col items-end justify-center overflow-y-auto px-5 py-2.5">
<div className="flex items-center gap-2">
<button
type="button"
className="inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-white/50 backdrop-blur-xl hover:bg-white/10"
>
<div className="flex justify-end gap-2 px-5 py-3">
<AlertDialog.Cancel asChild>
<button className="inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium leading-none text-white outline-none hover:bg-white/10 hover:backdrop-blur-xl">
Cancel
</button>
<button
type="button"
onClick={() => logout()}
className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-3 text-sm font-medium text-white hover:bg-red-600"
>
Confirm
</button>
</div>
</AlertDialog.Cancel>
<button
type="button"
onClick={() => logout()}
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-fuchsia-500"
>
Logout
</button>
</div>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
);
}

10
src/shared/notes/actions/repost.tsx
View File

@@ -46,26 +46,26 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<AlertDialog.Portal className="relative z-10">
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl">
<div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">
<AlertDialog.Title className="text-lg font-semibold leading-none text-white">
Confirm repost this post?
</AlertDialog.Title>
<AlertDialog.Description className="text-sm leading-none text-white/50">
<AlertDialog.Description className="text-sm leading-tight text-white/50">
Reposted post will be visible to your followers, and you cannot undo this
action.
</AlertDialog.Description>
</div>
<div className="flex justify-end gap-6 px-5 py-3">
<div className="flex justify-end gap-2 px-5 py-3">
<AlertDialog.Cancel asChild>
<button className="inline-flex h-11 items-center justify-center rounded-lg bg-white/10 px-4 font-medium leading-none text-white outline-none backdrop-blur-xl">
<button className="inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium leading-none text-white outline-none hover:bg-white/10 hover:backdrop-blur-xl">
Cancel
</button>
</AlertDialog.Cancel>
<button
type="button"
onClick={() => submit()}
className="inline-flex h-11 items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium leading-none text-white outline-none"
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-fuchsia-500"
>
Yes, repost
</button>

4
src/stores/stronghold.ts
View File

@@ -4,6 +4,7 @@ import { createJSONStorage, persist } from 'zustand/middleware';
interface StrongholdState {
privkey: null | string;
setPrivkey: (privkey: string) => void;
clearPrivkey: () => void;
}
export const useStronghold = create<StrongholdState>()(
@@ -13,6 +14,9 @@ export const useStronghold = create<StrongholdState>()(
setPrivkey: (privkey: string) => {
set({ privkey: privkey });
},
clearPrivkey: () => {
set({ privkey: null });
},
}),
{
name: 'stronghold',