From bbeb7291565f574497339e44c1f972089edf0b2c Mon Sep 17 00:00:00 2001 From: Jorrin Date: Sat, 20 Apr 2024 00:11:02 +0200 Subject: [PATCH] add register and login screens --- apps/expo/package.json | 1 + apps/expo/src/app/(tabs)/downloads.tsx | 2 +- apps/expo/src/app/(tabs)/movie-web.tsx | 78 ++----- apps/expo/src/app/(tabs)/settings.tsx | 6 +- apps/expo/src/app/sync/login.tsx | 79 ++++++++ apps/expo/src/app/sync/register/account.tsx | 190 ++++++++++++++++++ apps/expo/src/app/sync/register/confirm.tsx | 68 +++++++ apps/expo/src/app/sync/register/index.tsx | 132 ++++++++++++ apps/expo/src/app/sync/trust/[url].tsx | 30 ++- .../components/player/AudioTrackSelector.tsx | 2 +- .../components/player/CaptionsSelector.tsx | 2 +- .../src/components/player/DownloadButton.tsx | 2 +- .../player/SeasonEpisodeSelector.tsx | 4 +- .../components/player/SettingsSelector.tsx | 2 +- .../src/components/player/SourceSelector.tsx | 4 +- apps/expo/src/components/ui/Card.tsx | 2 +- apps/expo/src/components/ui/Input.tsx | 28 ++- apps/expo/src/hooks/useAuth.ts | 4 +- apps/expo/tamagui.config.ts | 11 - pnpm-lock.yaml | 11 + 20 files changed, 555 insertions(+), 103 deletions(-) create mode 100644 apps/expo/src/app/sync/login.tsx create mode 100644 apps/expo/src/app/sync/register/account.tsx create mode 100644 apps/expo/src/app/sync/register/confirm.tsx create mode 100644 apps/expo/src/app/sync/register/index.tsx diff --git a/apps/expo/package.json b/apps/expo/package.json index 3cad57d..8335e5a 100644 --- a/apps/expo/package.json +++ b/apps/expo/package.json @@ -41,6 +41,7 @@ "expo-av": "~13.10.5", "expo-brightness": "~11.8.0", "expo-build-properties": "~0.11.1", + "expo-clipboard": "^5.0.1", "expo-constants": "~15.4.5", "expo-file-system": "~16.0.8", "expo-haptics": "~12.8.1", diff --git a/apps/expo/src/app/(tabs)/downloads.tsx b/apps/expo/src/app/(tabs)/downloads.tsx index bfb2fab..cc0997b 100644 --- a/apps/expo/src/app/(tabs)/downloads.tsx +++ b/apps/expo/src/app/(tabs)/downloads.tsx @@ -55,7 +55,7 @@ const TestDownloadButton = (props: { } onPress={async () => { diff --git a/apps/expo/src/app/(tabs)/movie-web.tsx b/apps/expo/src/app/(tabs)/movie-web.tsx index 3fccc4b..1d20c47 100644 --- a/apps/expo/src/app/(tabs)/movie-web.tsx +++ b/apps/expo/src/app/(tabs)/movie-web.tsx @@ -1,53 +1,12 @@ import { Link } from "expo-router"; -import { MaterialCommunityIcons } from "@expo/vector-icons"; -import { H2, H5, Paragraph, useTheme, View } from "tamagui"; +import { H3, H5, Paragraph, View } from "tamagui"; import ScreenLayout from "~/components/layout/ScreenLayout"; import { MWButton } from "~/components/ui/Button"; import { MWCard } from "~/components/ui/Card"; import { MWInput } from "~/components/ui/Input"; -import { useAuth } from "~/hooks/useAuth"; import { useAuthStore } from "~/stores/settings"; -function TestButtons() { - const theme = useTheme(); - const { login } = useAuth(); - - return ( - - - } - onPress={async () => { - const passhphrase = ""; - if (!passhphrase) { - alert("Please configure your passphrase"); - return; - } - - const account = await login({ - mnemonic: passhphrase, - userData: { - device: "phone", - }, - }); - console.log(account); - }} - > - test login - - - ); -} - export default function MovieWebScreen() { const { backendUrl, setBackendUrl } = useAuthStore(); @@ -59,16 +18,15 @@ export default function MovieWebScreen() { justifyContent: "center", }} > - - - -

+ + +

Sync to the cloud -

-
+
+
Share your watch progress between devices and keep them synced.
- + First choose the backend you want to use. If you do not know what this does, use the default and click on 'Get started'. @@ -77,24 +35,24 @@ export default function MovieWebScreen() { - - + + Get started - - + + diff --git a/apps/expo/src/app/(tabs)/settings.tsx b/apps/expo/src/app/(tabs)/settings.tsx index aa152ad..810287c 100644 --- a/apps/expo/src/app/(tabs)/settings.tsx +++ b/apps/expo/src/app/(tabs)/settings.tsx @@ -206,7 +206,7 @@ export default function SettingsScreen() { android: "android", })} size={24} - color={theme.buttonSecondaryText.val} + color={theme.silver300.val} /> } iconAfter={ @@ -229,7 +229,7 @@ export default function SettingsScreen() { } onPress={() => clearCacheDirectory()} @@ -304,7 +304,7 @@ export function UpdateSheet({ } onPress={() => WebBrowser.openBrowserAsync(downloadUrl)} diff --git a/apps/expo/src/app/sync/login.tsx b/apps/expo/src/app/sync/login.tsx new file mode 100644 index 0000000..603faab --- /dev/null +++ b/apps/expo/src/app/sync/login.tsx @@ -0,0 +1,79 @@ +import { Stack } from "expo-router"; +import { H4, Label, Paragraph, Text, YStack } from "tamagui"; + +import ScreenLayout from "~/components/layout/ScreenLayout"; +import { MWButton } from "~/components/ui/Button"; +import { MWCard } from "~/components/ui/Card"; +import { MWInput } from "~/components/ui/Input"; + +export default function Page() { + return ( + + + + + +

+ Login to your account +

+ + + Please enter your passphrase to login to your account + + + + + + + + + + + + + + + + Login + + + Don't have an account yet?{"\n"} + + Create an account. + + + + + + ); +} diff --git a/apps/expo/src/app/sync/register/account.tsx b/apps/expo/src/app/sync/register/account.tsx new file mode 100644 index 0000000..162a69b --- /dev/null +++ b/apps/expo/src/app/sync/register/account.tsx @@ -0,0 +1,190 @@ +import { useState } from "react"; +import { Link, Stack } from "expo-router"; +import { FontAwesome6, Ionicons } from "@expo/vector-icons"; +import { Circle, H4, Label, Paragraph, View, XStack, YStack } from "tamagui"; +import { LinearGradient } from "tamagui/linear-gradient"; + +import ScreenLayout from "~/components/layout/ScreenLayout"; +import { MWButton } from "~/components/ui/Button"; +import { MWCard } from "~/components/ui/Card"; +import { MWInput } from "~/components/ui/Input"; + +const colors = ["#0A54FF", "#CF2E68", "#F9DD7F", "#7652DD", "#2ECFA8"] as const; + +function ColorPicker(props: { + value: (typeof colors)[number]; + onInput: (v: (typeof colors)[number]) => void; +}) { + return ( + + {colors.map((color) => { + return ( + props.onInput(color)} + flexGrow={1} + height="$4" + borderRadius="$4" + justifyContent="center" + alignItems="center" + backgroundColor={color} + key={color} + > + {props.value === color ? ( + + ) : null} + + ); + })} + + ); +} + +const icons = [ + "user-group", + "couch", + "mobile-screen", + "ticket", + "handcuffs", +] as const; + +function UserIconPicker(props: { + value: (typeof icons)[number]; + onInput: (v: (typeof icons)[number]) => void; +}) { + return ( + + {icons.map((icon) => { + return ( + props.onInput(icon)} + > + + + ); + })} + + ); +} + +interface AvatarProps { + colorA: string; + colorB: string; + icon: (typeof icons)[number]; +} + +export function Avatar(props: AvatarProps) { + return ( + + + + + + ); +} + +export default function Page() { + const [color, setColor] = useState<(typeof colors)[number]>(colors[0]); + const [color2, setColor2] = useState<(typeof colors)[number]>(colors[0]); + const [icon, setIcon] = useState<(typeof icons)[number]>(icons[0]); + + return ( + + + + + + + + + +

+ Account information +

+ + + Enter a name for your device and pick colours and a user icon of + your choosing + + + + + + + + + + + setColor(color)} /> + + + + setColor2(color)} /> + + + + setIcon(icon)} /> + + + + + + + Next + + + + + + ); +} diff --git a/apps/expo/src/app/sync/register/confirm.tsx b/apps/expo/src/app/sync/register/confirm.tsx new file mode 100644 index 0000000..517de54 --- /dev/null +++ b/apps/expo/src/app/sync/register/confirm.tsx @@ -0,0 +1,68 @@ +import { Link, Stack } from "expo-router"; +import { H4, Label, Paragraph, YStack } from "tamagui"; + +import ScreenLayout from "~/components/layout/ScreenLayout"; +import { MWButton } from "~/components/ui/Button"; +import { MWCard } from "~/components/ui/Card"; +import { MWInput } from "~/components/ui/Input"; + +export default function Page() { + return ( + + + + + +

+ Confirm your passphrase +

+ + + Please enter your passphrase from earlier to confirm you have saved + it and to create your account + + + + + + + + + + + + + Create account + + + + + ); +} diff --git a/apps/expo/src/app/sync/register/index.tsx b/apps/expo/src/app/sync/register/index.tsx new file mode 100644 index 0000000..65ca629 --- /dev/null +++ b/apps/expo/src/app/sync/register/index.tsx @@ -0,0 +1,132 @@ +import { TouchableOpacity } from "react-native-gesture-handler"; +import * as Clipboard from "expo-clipboard"; +import { Link, Stack } from "expo-router"; +import { Feather } from "@expo/vector-icons"; +import { H4, Paragraph, Text, useTheme, View, XStack, YStack } from "tamagui"; + +import { genMnemonic } from "@movie-web/api"; + +import ScreenLayout from "~/components/layout/ScreenLayout"; +import { MWButton } from "~/components/ui/Button"; +import { MWCard } from "~/components/ui/Card"; + +function PassphraseWord({ word }: { word: string }) { + return ( + + {word} + + ); +} + +export default function Page() { + const theme = useTheme(); + const words = genMnemonic().split(" "); + + return ( + + + + + +

+ Your passphrase +

+ + + Your passphrase acts as your username and password. Make sure to + keep it safe as you will need to enter it to login to your account + + + + + + + Passphrase + + { + await Clipboard.setStringAsync(words.join("")); + }} + > + + + Copy + + + + + {words.map((word, index) => ( + + ))} + + + + + + I have saved my passphrase + + + + Already have an account?{"\n"} + + Login here + + + + + + ); +} diff --git a/apps/expo/src/app/sync/trust/[url].tsx b/apps/expo/src/app/sync/trust/[url].tsx index 9f64eaa..f6df9a7 100644 --- a/apps/expo/src/app/sync/trust/[url].tsx +++ b/apps/expo/src/app/sync/trust/[url].tsx @@ -1,4 +1,4 @@ -import { Stack, useLocalSearchParams } from "expo-router"; +import { Link, Stack, useLocalSearchParams } from "expo-router"; import { useQuery } from "@tanstack/react-query"; import { H4, Paragraph, Text, View } from "tamagui"; @@ -30,7 +30,7 @@ export default function Page() { title: "", }} /> - +

Do you trust this server? @@ -90,15 +90,23 @@ export default function Page() { flexDirection="column" gap="$4" > - I trust this server - Go back - - - Already have an account?{" "} - - Login here - - + + I trust this server + + + Go back + diff --git a/apps/expo/src/components/player/AudioTrackSelector.tsx b/apps/expo/src/components/player/AudioTrackSelector.tsx index 214a25c..d05dcbd 100644 --- a/apps/expo/src/components/player/AudioTrackSelector.tsx +++ b/apps/expo/src/components/player/AudioTrackSelector.tsx @@ -58,7 +58,7 @@ export const AudioTrackSelector = () => { } onPress={() => setOpen(true)} diff --git a/apps/expo/src/components/player/CaptionsSelector.tsx b/apps/expo/src/components/player/CaptionsSelector.tsx index ea5bff6..e82ac89 100644 --- a/apps/expo/src/components/player/CaptionsSelector.tsx +++ b/apps/expo/src/components/player/CaptionsSelector.tsx @@ -65,7 +65,7 @@ export const CaptionsSelector = () => { } onPress={() => setOpen(true)} diff --git a/apps/expo/src/components/player/DownloadButton.tsx b/apps/expo/src/components/player/DownloadButton.tsx index d1d213b..a755a38 100644 --- a/apps/expo/src/components/player/DownloadButton.tsx +++ b/apps/expo/src/components/player/DownloadButton.tsx @@ -38,7 +38,7 @@ export const DownloadButton = () => { } onPress={() => diff --git a/apps/expo/src/components/player/SeasonEpisodeSelector.tsx b/apps/expo/src/components/player/SeasonEpisodeSelector.tsx index 5de15fa..d0aef38 100644 --- a/apps/expo/src/components/player/SeasonEpisodeSelector.tsx +++ b/apps/expo/src/components/player/SeasonEpisodeSelector.tsx @@ -47,7 +47,7 @@ const EpisodeSelector = ({ { setSelectedSeason(null); props.onOpenChange?.(false); @@ -119,7 +119,7 @@ export const SeasonSelector = () => { } onPress={() => setOpen(true)} diff --git a/apps/expo/src/components/player/SettingsSelector.tsx b/apps/expo/src/components/player/SettingsSelector.tsx index d035a36..348d2a3 100644 --- a/apps/expo/src/components/player/SettingsSelector.tsx +++ b/apps/expo/src/components/player/SettingsSelector.tsx @@ -23,7 +23,7 @@ export const SettingsSelector = () => { } onPress={() => setOpen(true)} diff --git a/apps/expo/src/components/player/SourceSelector.tsx b/apps/expo/src/components/player/SourceSelector.tsx index f0e00b3..62339ba 100644 --- a/apps/expo/src/components/player/SourceSelector.tsx +++ b/apps/expo/src/components/player/SourceSelector.tsx @@ -102,7 +102,7 @@ const EmbedsPart = ({ { props.onOpenChange?.(false); }} @@ -160,7 +160,7 @@ export const SourceSelector = () => { } onPress={() => setOpen(true)} diff --git a/apps/expo/src/components/ui/Card.tsx b/apps/expo/src/components/ui/Card.tsx index 34790f4..529e85a 100644 --- a/apps/expo/src/components/ui/Card.tsx +++ b/apps/expo/src/components/ui/Card.tsx @@ -1,7 +1,7 @@ import { Card, styled, withStaticProperties } from "tamagui"; export const MWCardFrame = styled(Card, { - backgroundColor: "$shade400", + backgroundColor: "$shade600", borderColor: "$shade400", variants: { diff --git a/apps/expo/src/components/ui/Input.tsx b/apps/expo/src/components/ui/Input.tsx index 01cc7ae..0d0b8cd 100644 --- a/apps/expo/src/components/ui/Input.tsx +++ b/apps/expo/src/components/ui/Input.tsx @@ -6,21 +6,37 @@ export const MWInput = styled(Input, { variants: { type: { default: { - backgroundColor: "$inputBackground", - color: "$inputText", - placeholderTextColor: "$placeHolderText", - borderColor: "$inputBorder", + backgroundColor: "$ash600", + color: "$ash100", + placeholderTextColor: "$ash200", + borderColor: "$ash500", outlineStyle: "none", + focusStyle: { + borderColor: "$ash300", + }, }, search: { - backgroundColor: "$searchBackground", + backgroundColor: "$shade500", + color: "$shade100", borderColor: "$colorTransparent", - placeholderTextColor: "$searchPlaceholder", + placeholderTextColor: "$shade100", outlineStyle: "none", focusStyle: { borderColor: "$colorTransparent", }, }, + authentication: { + backgroundColor: "$shade500", + color: "$shade100", + placeholderTextColor: "$shade400", + outlineStyle: "none", + focusStyle: { + borderColor: "$shade300", + }, + pressStyle: { + backgroundColor: "$shade500", + }, + }, }, }, }); diff --git a/apps/expo/src/hooks/useAuth.ts b/apps/expo/src/hooks/useAuth.ts index 91be5d6..65e9cbe 100644 --- a/apps/expo/src/hooks/useAuth.ts +++ b/apps/expo/src/hooks/useAuth.ts @@ -71,7 +71,7 @@ export function useAuth() { backendUrl, publicKeyBase64Url, ); - const signature = await signChallenge(keys, challenge); + const signature = signChallenge(keys, challenge); const loginResult = await loginAccount(backendUrl, { challenge: { code: challenge, @@ -110,7 +110,7 @@ export function useAuth() { registerData.recaptchaToken, ); const keys = await keysFromMnemonic(registerData.mnemonic); - const signature = await signChallenge(keys, challenge); + const signature = signChallenge(keys, challenge); const registerResult = await registerAccount(backendUrl, { challenge: { code: challenge, diff --git a/apps/expo/tamagui.config.ts b/apps/expo/tamagui.config.ts index 525dce4..250845a 100644 --- a/apps/expo/tamagui.config.ts +++ b/apps/expo/tamagui.config.ts @@ -57,17 +57,6 @@ const createThemeConfig = (tokens: Tokens) => ({ loadingIndicator: tokens.purple.c200, - buttonSecondaryBackground: tokens.ash.c700, - buttonSecondaryText: tokens.semantic.silver.c300, - buttonSecondaryBackgroundHover: tokens.ash.c700, - buttonPrimaryBackground: tokens.white, - buttonPrimaryText: tokens.black, - buttonPrimaryBackgroundHover: tokens.semantic.silver.c100, - buttonPurpleBackground: tokens.purple.c500, - buttonPurpleBackgroundHover: tokens.purple.c400, - buttonCancelBackground: tokens.ash.c500, - buttonCancelBackgroundHover: tokens.ash.c300, - switchActiveTrackColor: tokens.purple.c300, switchInactiveTrackColor: tokens.ash.c500, switchThumbColor: tokens.white, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 87bb026..6c71bfc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -95,6 +95,9 @@ importers: expo-build-properties: specifier: ~0.11.1 version: 0.11.1(expo@50.0.14) + expo-clipboard: + specifier: ^5.0.1 + version: 5.0.1(expo@50.0.14) expo-constants: specifier: ~15.4.5 version: 15.4.5(expo@50.0.14) @@ -7860,6 +7863,14 @@ packages: semver: 7.5.4 dev: false + /expo-clipboard@5.0.1(expo@50.0.14): + resolution: {integrity: sha512-JH853QJPr5W3h87If3aDTnMK+ESSIrwzU2TdfZrqZttVDY2pMIf/w37mVHHNYodXM4ATHXadtOkjKbAa0DWwUg==} + peerDependencies: + expo: '*' + dependencies: + expo: 50.0.14(@babel/core@7.23.9)(@react-native/babel-preset@0.73.21) + dev: false + /expo-constants@15.4.5(expo@50.0.14): resolution: {integrity: sha512-1pVVjwk733hbbIjtQcvUFCme540v4gFemdNlaxM2UXKbfRCOh2hzgKN5joHMOysoXQe736TTUrRj7UaZI5Yyhg==} peerDependencies: