mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-05-24 02:02:36 -04:00
Rework login and navbar account display
This commit is contained in:
Zoe Roux
parent
fbf43fb10f
commit
0ac388f3eb
@ -18,102 +18,74 @@
|
||||
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { z } from "zod";
|
||||
import { deleteSecureItem, getSecureItem, setSecureItem } from "./secure-store";
|
||||
import { zdate } from "./utils";
|
||||
import { queryFn } from "./query";
|
||||
import { KyooErrors } from "./kyoo-errors";
|
||||
import { Platform } from "react-native";
|
||||
|
||||
const TokenP = z.object({
|
||||
token_type: z.literal("Bearer"),
|
||||
access_token: z.string(),
|
||||
refresh_token: z.string(),
|
||||
expire_in: z.string(),
|
||||
expire_at: zdate(),
|
||||
});
|
||||
type Token = z.infer<typeof TokenP>;
|
||||
import { Account, Token, TokenP } from "./accounts";
|
||||
import { UserP } from "./resources";
|
||||
import { addAccount, getCurrentAccount, removeAccounts, updateAccount } from "./account-internal";
|
||||
|
||||
type Result<A, B> =
|
||||
| { ok: true; value: A; error?: undefined }
|
||||
| { ok: false; value?: undefined; error: B };
|
||||
|
||||
export type Account = Token & { apiUrl: string; username: string };
|
||||
|
||||
const addAccount = (token: Token, apiUrl: string, username: string | null) => {
|
||||
const accounts: Account[] = JSON.parse(getSecureItem("accounts") ?? "[]");
|
||||
if (accounts.find((x) => x.username === username && x.apiUrl === apiUrl)) return;
|
||||
accounts.push({ ...token, username: username!, apiUrl });
|
||||
setSecureItem("accounts", JSON.stringify(accounts));
|
||||
setSecureItem("selected", (accounts.length - 1).toString());
|
||||
};
|
||||
|
||||
const setCurrentAccountToken = (token: Token) => {
|
||||
const accounts: Account[] = JSON.parse(getSecureItem("accounts") ?? "[]");
|
||||
const selected = parseInt(getSecureItem("selected") ?? "0");
|
||||
if (selected >= accounts.length) return;
|
||||
|
||||
accounts[selected] = { ...accounts[selected], ...token };
|
||||
setSecureItem("accounts", JSON.stringify(accounts));
|
||||
};
|
||||
|
||||
export const loginFunc = async (
|
||||
action: "register" | "login" | "refresh",
|
||||
body: { username: string; password: string; email?: string } | string,
|
||||
apiUrl?: string,
|
||||
export const login = async (
|
||||
action: "register" | "login",
|
||||
{ apiUrl, ...body }: { username: string; password: string; email?: string; apiUrl?: string },
|
||||
timeout?: number,
|
||||
): Promise<Result<Token, string>> => {
|
||||
): Promise<Result<Account, string>> => {
|
||||
try {
|
||||
const controller = timeout !== undefined ? new AbortController() : undefined;
|
||||
if (controller) setTimeout(() => controller.abort(), timeout);
|
||||
const token = await queryFn(
|
||||
{
|
||||
path: ["auth", action, typeof body === "string" && `?token=${body}`],
|
||||
method: typeof body === "string" ? "GET" : "POST",
|
||||
body: typeof body === "object" ? body : undefined,
|
||||
path: ["auth", action],
|
||||
method: "POST",
|
||||
body,
|
||||
authenticated: false,
|
||||
apiUrl,
|
||||
abortSignal: controller?.signal,
|
||||
timeout,
|
||||
},
|
||||
TokenP,
|
||||
);
|
||||
|
||||
if (typeof window !== "undefined") setSecureItem("auth", JSON.stringify(token));
|
||||
if (Platform.OS !== "web" && apiUrl && typeof body !== "string")
|
||||
addAccount(token, apiUrl, body.username);
|
||||
else if (Platform.OS !== "web" && action === "refresh") setCurrentAccountToken(token);
|
||||
return { ok: true, value: token };
|
||||
const user = await queryFn(
|
||||
{ path: ["auth", "me"], method: "GET", apiUrl },
|
||||
UserP,
|
||||
token.access_token,
|
||||
);
|
||||
const account: Account = { ...user, apiUrl: apiUrl ?? "/api", token, selected: true };
|
||||
addAccount(account);
|
||||
return { ok: true, value: account };
|
||||
} catch (e) {
|
||||
console.error(action, e);
|
||||
return { ok: false, error: (e as KyooErrors).errors[0] };
|
||||
}
|
||||
};
|
||||
|
||||
export const getTokenWJ = async (cookies?: string): Promise<[string, Token] | [null, null]> => {
|
||||
const tokenStr = getSecureItem("auth", cookies);
|
||||
if (!tokenStr) return [null, null];
|
||||
let token = TokenP.parse(JSON.parse(tokenStr));
|
||||
export const getTokenWJ = async (account?: Account | null): Promise<[string, Token] | [null, null]> => {
|
||||
if (account === null)
|
||||
account = getCurrentAccount();
|
||||
if (!account) return [null, null];
|
||||
|
||||
if (token.expire_at <= new Date(new Date().getTime() + 10 * 1000)) {
|
||||
const { ok, value: nToken, error } = await loginFunc("refresh", token.refresh_token);
|
||||
if (!ok) console.error("Error refreshing token durring ssr:", error);
|
||||
else token = nToken;
|
||||
if (account.token.expire_at <= new Date(new Date().getTime() + 10 * 1000)) {
|
||||
try {
|
||||
const token = await queryFn(
|
||||
{
|
||||
path: ["auth", "refresh", `?token=${account.token.refresh_token}`],
|
||||
method: "GET",
|
||||
},
|
||||
TokenP,
|
||||
);
|
||||
updateAccount(account.id, { ...account, token });
|
||||
} catch (e) {
|
||||
console.error("Error refreshing token durring ssr:", e);
|
||||
}
|
||||
}
|
||||
return [`${token.token_type} ${token.access_token}`, token];
|
||||
return [`${account.token.token_type} ${account.token.access_token}`, account.token];
|
||||
};
|
||||
|
||||
export const getToken = async (cookies?: string): Promise<string | null> =>
|
||||
(await getTokenWJ(cookies))[0];
|
||||
export const getToken = async (): Promise<string | null> =>
|
||||
(await getTokenWJ())[0];
|
||||
|
||||
export const logout = () => {
|
||||
if (Platform.OS !== "web") {
|
||||
let accounts: Account[] = JSON.parse(getSecureItem("accounts") ?? "[]");
|
||||
const selected = parseInt(getSecureItem("selected") ?? "0");
|
||||
accounts.splice(selected, 1);
|
||||
setSecureItem("accounts", JSON.stringify(accounts));
|
||||
}
|
||||
|
||||
deleteSecureItem("auth");
|
||||
removeAccounts((x) => x.selected);
|
||||
};
|
||||
|
||||
export const deleteAccount = async () => {
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { loginFunc, QueryPage } from "@kyoo/models";
|
||||
import { login, QueryPage } from "@kyoo/models";
|
||||
import { Button, P, Input, ts, H1, A } from "@kyoo/primitives";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@ -74,10 +74,9 @@ export const LoginPage: QueryPage = () => {
|
||||
<Button
|
||||
text={t("login.login")}
|
||||
onPress={async () => {
|
||||
const { error } = await loginFunc("login", { username, password }, cleanApiUrl(apiUrl));
|
||||
const { error } = await login("login", { username, password, apiUrl: cleanApiUrl(apiUrl) });
|
||||
setError(error);
|
||||
if (error) return;
|
||||
queryClient.invalidateQueries({ queryKey: ["auth", "me"] });
|
||||
router.replace("/", undefined, {
|
||||
experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
|
||||
});
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { loginFunc, QueryPage } from "@kyoo/models";
|
||||
import { login, QueryPage } from "@kyoo/models";
|
||||
import { Button, P, Input, ts, H1, A } from "@kyoo/primitives";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@ -30,7 +30,6 @@ import { DefaultLayout } from "../layout";
|
||||
import { FormPage } from "./form";
|
||||
import { PasswordInput } from "./password-input";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { setSecureItem } from "@kyoo/models/src/secure-store";
|
||||
import { cleanApiUrl } from "./login";
|
||||
|
||||
export const RegisterPage: QueryPage = () => {
|
||||
@ -84,15 +83,13 @@ export const RegisterPage: QueryPage = () => {
|
||||
text={t("login.register")}
|
||||
disabled={password !== confirm}
|
||||
onPress={async () => {
|
||||
const { error } = await loginFunc(
|
||||
const { error } = await login(
|
||||
"register",
|
||||
{ email, username, password },
|
||||
cleanApiUrl(apiUrl),
|
||||
{ email, username, password, apiUrl: cleanApiUrl(apiUrl) },
|
||||
5_000,
|
||||
);
|
||||
setError(error);
|
||||
if (error) return;
|
||||
queryClient.invalidateQueries({ queryKey: ["auth", "me"] });
|
||||
router.replace("/", undefined, {
|
||||
experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
|
||||
});
|
||||
|
||||
@ -18,7 +18,15 @@
|
||||
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { AccountContext, deleteAccount, logout, QueryIdentifier, User, UserP } from "@kyoo/models";
|
||||
import {
|
||||
deleteAccount,
|
||||
logout,
|
||||
QueryIdentifier,
|
||||
useAccount,
|
||||
useAccounts,
|
||||
User,
|
||||
UserP,
|
||||
} from "@kyoo/models";
|
||||
import {
|
||||
Alert,
|
||||
Input,
|
||||
@ -99,79 +107,65 @@ const getDisplayUrl = (url: string) => {
|
||||
export const NavbarProfile = () => {
|
||||
const { css, theme } = useYoshiki();
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const { accounts, selected, setSelected } = useContext(AccountContext);
|
||||
const account = useAccount();
|
||||
const accounts = useAccounts();
|
||||
|
||||
return (
|
||||
<FetchNE query={MeQuery}>
|
||||
{({ isError: isGuest, username }) => (
|
||||
<Menu
|
||||
Trigger={Avatar}
|
||||
as={PressableFeedback}
|
||||
placeholder={username}
|
||||
alt={t("navbar.login")}
|
||||
size={24}
|
||||
color={theme.colors.white}
|
||||
{...css({ marginLeft: ts(1), justifyContent: "center" })}
|
||||
{...tooltip(username ?? t("navbar.login"))}
|
||||
>
|
||||
{accounts?.map((x, i) => (
|
||||
<Menu.Item
|
||||
key={x.refresh_token}
|
||||
label={`${x.username} - ${getDisplayUrl(x.apiUrl)}`}
|
||||
left={<Avatar placeholder={x.username} />}
|
||||
selected={selected === i}
|
||||
onSelect={() => setSelected!(i)}
|
||||
/>
|
||||
))}
|
||||
{accounts && accounts.length > 0 && <HR />}
|
||||
{isGuest ? (
|
||||
<>
|
||||
<Menu.Item label={t("login.login")} icon={Login} href="/login" />
|
||||
<Menu.Item label={t("login.register")} icon={Register} href="/register" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Menu.Item label={t("login.add-account")} icon={Login} href="/login" />
|
||||
<Menu.Item
|
||||
label={t("login.logout")}
|
||||
icon={Logout}
|
||||
onSelect={() => {
|
||||
logout();
|
||||
queryClient.invalidateQueries({ queryKey: ["auth", "me"] });
|
||||
}}
|
||||
/>
|
||||
<Menu.Item
|
||||
label={t("login.delete")}
|
||||
icon={Delete}
|
||||
onSelect={async () => {
|
||||
Alert.alert(
|
||||
t("login.delete"),
|
||||
t("login.delete-confirmation"),
|
||||
[
|
||||
{
|
||||
text: t("misc.delete"),
|
||||
onPress: async () => {
|
||||
await deleteAccount();
|
||||
queryClient.invalidateQueries({ queryKey: ["auth", "me"] });
|
||||
},
|
||||
style: "destructive",
|
||||
},
|
||||
{ text: t("misc.cancel"), style: "cancel" },
|
||||
],
|
||||
{
|
||||
cancelable: true,
|
||||
userInterfaceStyle: theme.mode === "auto" ? "light" : theme.mode,
|
||||
icon: "warning",
|
||||
},
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
<Menu
|
||||
Trigger={Avatar}
|
||||
as={PressableFeedback}
|
||||
placeholder={account?.username}
|
||||
alt={t("navbar.login")}
|
||||
size={24}
|
||||
color={theme.colors.white}
|
||||
{...css({ marginLeft: ts(1), justifyContent: "center" })}
|
||||
{...tooltip(account?.username ?? t("navbar.login"))}
|
||||
>
|
||||
{accounts?.map((x, i) => (
|
||||
<Menu.Item
|
||||
key={x.id}
|
||||
label={`${x.username} - ${getDisplayUrl(x.apiUrl)}`}
|
||||
left={<Avatar placeholder={x.username} />}
|
||||
selected={x.selected}
|
||||
onSelect={() => x.select()}
|
||||
/>
|
||||
))}
|
||||
{accounts.length > 0 && <HR />}
|
||||
{!accounts ? (
|
||||
<>
|
||||
<Menu.Item label={t("login.login")} icon={Login} href="/login" />
|
||||
<Menu.Item label={t("login.register")} icon={Register} href="/register" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Menu.Item label={t("login.add-account")} icon={Login} href="/login" />
|
||||
<Menu.Item label={t("login.logout")} icon={Logout} onSelect={logout} />
|
||||
<Menu.Item
|
||||
label={t("login.delete")}
|
||||
icon={Delete}
|
||||
onSelect={async () => {
|
||||
Alert.alert(
|
||||
t("login.delete"),
|
||||
t("login.delete-confirmation"),
|
||||
[
|
||||
{
|
||||
text: t("misc.delete"),
|
||||
onPress: deleteAccount,
|
||||
style: "destructive",
|
||||
},
|
||||
{ text: t("misc.cancel"), style: "cancel" },
|
||||
],
|
||||
{
|
||||
cancelable: true,
|
||||
userInterfaceStyle: theme.mode === "auto" ? "light" : theme.mode,
|
||||
icon: "warning",
|
||||
},
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</FetchNE>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
export const NavbarRight = () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user