diff --git a/front/apps/mobile/app/register/index.tsx b/front/apps/mobile/app/register/index.tsx new file mode 100644 index 00000000..36338a73 --- /dev/null +++ b/front/apps/mobile/app/register/index.tsx @@ -0,0 +1,23 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import { RegisterPage } from "@kyoo/ui"; + +export default RegisterPage; diff --git a/front/apps/web/src/pages/register/index.tsx b/front/apps/web/src/pages/register/index.tsx new file mode 100644 index 00000000..0558bfc1 --- /dev/null +++ b/front/apps/web/src/pages/register/index.tsx @@ -0,0 +1,24 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import { RegisterPage } from "@kyoo/ui"; +import { withRoute } from "~/router"; + +export default withRoute(RegisterPage); diff --git a/front/packages/primitives/src/button.tsx b/front/packages/primitives/src/button.tsx index 1b9391fd..7fe4af8d 100644 --- a/front/packages/primitives/src/button.tsx +++ b/front/packages/primitives/src/button.tsx @@ -18,7 +18,8 @@ * along with Kyoo. If not, see . */ -import { px, Stylable, Theme, useYoshiki } from "yoshiki/native"; +import { ComponentProps } from "react"; +import { Theme, useYoshiki } from "yoshiki/native"; import { PressableFeedback } from "./links"; import { P } from "./text"; import { ts } from "./utils"; @@ -27,16 +28,15 @@ export const Button = ({ text, onPress, ...props -}: { text: string; onPress?: () => void } & Stylable) => { +}: { text: string } & ComponentProps) => { const { css } = useYoshiki(); return ( theme.accent, borderWidth: ts(0.5), @@ -45,6 +45,7 @@ export const Button = ({ text: { color: (theme: Theme) => theme.colors.white }, }, }, + // @ts-ignore ?? props, )} > diff --git a/front/packages/ui/src/index.ts b/front/packages/ui/src/index.ts index b1064b5e..84797c0f 100644 --- a/front/packages/ui/src/index.ts +++ b/front/packages/ui/src/index.ts @@ -23,4 +23,4 @@ export { BrowsePage } from "./browse"; export { MovieDetails, ShowDetails } from "./details"; export { Player } from "./player"; export { SearchPage } from "./search"; -export { LoginPage } from "./login"; +export { LoginPage, RegisterPage } from "./login"; diff --git a/front/packages/ui/src/login/form.tsx b/front/packages/ui/src/login/form.tsx new file mode 100644 index 00000000..8d90b917 --- /dev/null +++ b/front/packages/ui/src/login/form.tsx @@ -0,0 +1,86 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import { ts } from "@kyoo/primitives"; +import { ReactNode } from "react"; +import { ImageBackground, ImageProps, Platform, View } from "react-native"; +import Svg, { SvgProps, Path } from "react-native-svg"; +import { min, percent, px, Stylable, useYoshiki, vh, vw } from "yoshiki/native"; + +const SvgBlob = (props: SvgProps) => { + const { css, theme } = useYoshiki(); + + return ( + + + + + + ); +}; + +export const FormPage = ({ children, ...props }: { children: ReactNode } & Stylable) => { + const { css } = useYoshiki(); + + // TODO: Replace the hardcoded 1 to a random show/movie thumbnail. + const src = `${Platform.OS === "web" ? "/api/" : process.env.PUBLIC_BACK_URL}/shows/1/thumbnail`; + const nativeProps = Platform.select({ + web: { + defaultSource: typeof src === "string" ? { uri: src! } : Array.isArray(src) ? src[0] : src!, + }, + default: {}, + }); + + return ( + theme.dark.background, + })} + > + + + + {children} + + + + ); +}; diff --git a/front/packages/ui/src/login/index.ts b/front/packages/ui/src/login/index.ts new file mode 100644 index 00000000..e36fb536 --- /dev/null +++ b/front/packages/ui/src/login/index.ts @@ -0,0 +1,22 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +export { LoginPage } from "./login"; +export { RegisterPage } from "./register"; diff --git a/front/packages/ui/src/login/index.tsx b/front/packages/ui/src/login/index.tsx deleted file mode 100644 index 21f10bdf..00000000 --- a/front/packages/ui/src/login/index.tsx +++ /dev/null @@ -1,181 +0,0 @@ -/* - * Kyoo - A portable and vast media library solution. - * Copyright (c) Kyoo. - * - * See AUTHORS.md and LICENSE file in the project root for full license information. - * - * Kyoo is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * any later version. - * - * Kyoo is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with Kyoo. If not, see . - */ - -import { KyooErrors, kyooUrl, QueryPage } from "@kyoo/models"; -import { Button, P, Input, ts, H1, A, IconButton } from "@kyoo/primitives"; -import { ComponentProps, useState } from "react"; -import { useTranslation } from "react-i18next"; -import { ImageBackground, ImageProps, Platform, View } from "react-native"; -import { Trans } from "react-i18next"; -import { min, percent, px, useYoshiki, vh, vw } from "yoshiki/native"; -import Visibility from "@material-symbols/svg-400/rounded/visibility-fill.svg"; -import VisibilityOff from "@material-symbols/svg-400/rounded/visibility_off-fill.svg"; -import { DefaultLayout } from "../layout"; -import Svg, { SvgProps, Path } from "react-native-svg"; - -const SvgBlob = (props: SvgProps) => { - const { css, theme } = useYoshiki(); - - return ( - - - - - - ); -}; - -const PasswordInput = (props: ComponentProps) => { - const { css } = useYoshiki(); - const [show, setVisibility] = useState(false); - - return ( - setVisibility(!show)} - {...css({ width: px(19), height: px(19), m: 0, p: 0 })} - /> - } - {...props} - /> - ); -}; - -const login = async (username: string, password: string) => { - let resp; - try { - resp = await fetch(`${kyooUrl}/auth/login`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - username, - password, - }), - }); - } catch (e) { - console.error("Login error", e); - throw { errors: ["Could not reach Kyoo's server."] } as KyooErrors; - } - if (!resp.ok) { - const err = await resp.json() as KyooErrors; - return { type: "error", value: null, error: err.errors[0] }; - } - const token = await resp.json(); - // TODO: Save the token in the secure storage. - return { type: "value", value: token, error: null }; -}; - -export const LoginPage: QueryPage = () => { - const { t } = useTranslation(); - const { css } = useYoshiki(); - - // TODO: Replace the hardcoded 1 to a random show/movie thumbnail. - const src = `${Platform.OS === "web" ? "/api/" : process.env.PUBLIC_BACK_URL}/shows/1/thumbnail`; - const nativeProps = Platform.select({ - web: { - defaultSource: typeof src === "string" ? { uri: src! } : Array.isArray(src) ? src[0] : src!, - }, - default: {}, - }); - - const [username, setUsername] = useState(""); - const [password, setPassword] = useState(""); - const [error, setError] = useState(null); - - return ( - theme.dark.background, - })} - > - - - -

{t("login.login")}

- {Platform.OS !== "web" && ( - <> -

{t("login.server")}

- - - )} -

{t("login.username")}

- setUsername(value)} - /> -

{t("login.password")}

- setPassword(value)} - /> - {error &&

theme.colors.red })}>{error}

} -