From a1fc95f30e8ff9f8903451b6f5d2daa318653167 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 15 Mar 2024 13:49:13 +0000 Subject: convert password reset flow --- src/components/forms/HostingProvider.tsx | 69 ++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/components/forms/HostingProvider.tsx (limited to 'src/components/forms/HostingProvider.tsx') diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx new file mode 100644 index 000000000..df506b77c --- /dev/null +++ b/src/components/forms/HostingProvider.tsx @@ -0,0 +1,69 @@ +import React from 'react' +import {TouchableOpacity, View} from 'react-native' + +import {isAndroid} from '#/platform/detection' +import {atoms as a, useTheme} from '#/alf' +import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' +import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' +import * as TextField from './TextField' +import {useDialogControl} from '../Dialog' +import {Text} from '../Typography' +import {ServerInputDialog} from '#/view/com/auth/server-input' +import {toNiceDomain} from '#/lib/strings/url-helpers' + +export function HostingProvider({ + serviceUrl, + onSelectServiceUrl, + onOpenDialog, +}: { + serviceUrl: string + onSelectServiceUrl: (provider: string) => void + onOpenDialog?: () => void +}) { + const serverInputControl = useDialogControl() + const t = useTheme() + + const onPressSelectService = React.useCallback(() => { + serverInputControl.open() + if (onOpenDialog) { + onOpenDialog() + } + }, [onOpenDialog, serverInputControl]) + + return ( + <> + + + + {toNiceDomain(serviceUrl)} + + + + + + ) +} -- cgit 1.4.1 From fd448a5fab2e5239abcf4504a1de24cb7aca700c Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:28:18 +0000 Subject: rename pencil -> pencilLine and reexport --- assets/icons/pencilLine_stroke2_corner0_rounded.svg | 1 + assets/icons/pencil_stroke2_corner0_rounded.svg | 1 - src/components/forms/HostingProvider.tsx | 2 +- src/components/icons/Pencil.tsx | 4 ++-- 4 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 assets/icons/pencilLine_stroke2_corner0_rounded.svg delete mode 100644 assets/icons/pencil_stroke2_corner0_rounded.svg (limited to 'src/components/forms/HostingProvider.tsx') diff --git a/assets/icons/pencilLine_stroke2_corner0_rounded.svg b/assets/icons/pencilLine_stroke2_corner0_rounded.svg new file mode 100644 index 000000000..3ff2161d9 --- /dev/null +++ b/assets/icons/pencilLine_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/pencil_stroke2_corner0_rounded.svg b/assets/icons/pencil_stroke2_corner0_rounded.svg deleted file mode 100644 index 734198989..000000000 --- a/assets/icons/pencil_stroke2_corner0_rounded.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index df506b77c..c8cd7263f 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -4,7 +4,7 @@ import {TouchableOpacity, View} from 'react-native' import {isAndroid} from '#/platform/detection' import {atoms as a, useTheme} from '#/alf' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' +import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' import * as TextField from './TextField' import {useDialogControl} from '../Dialog' import {Text} from '../Typography' diff --git a/src/components/icons/Pencil.tsx b/src/components/icons/Pencil.tsx index 1b7fc17cf..854d51a3b 100644 --- a/src/components/icons/Pencil.tsx +++ b/src/components/icons/Pencil.tsx @@ -1,5 +1,5 @@ import {createSinglePathSVG} from './TEMPLATE' -export const Pencil_Stroke2_Corner0_Rounded = createSinglePathSVG({ - path: 'M13.586 1.5a2 2 0 0 1 2.828 0L19.5 4.586a2 2 0 0 1 0 2.828l-13 13A2 2 0 0 1 5.086 21H1a1 1 0 0 1-1-1v-4.086A2 2 0 0 1 .586 14.5l13-13ZM15 2.914l-13 13V19h3.086l13-13L15 2.914ZM11 20a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z', +export const PencilLine_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M15.586 2.5a2 2 0 0 1 2.828 0L21.5 5.586a2 2 0 0 1 0 2.828l-13 13A2 2 0 0 1 7.086 22H3a1 1 0 0 1-1-1v-4.086a2 2 0 0 1 .586-1.414l13-13ZM17 3.914l-13 13V20h3.086l13-13L17 3.914ZM13 21a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z', }) -- cgit 1.4.1 From 717c53bea82cfe902af9d1ea17d43b4d8064de04 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:30:41 +0000 Subject: remove explicit height/width --- src/components/forms/HostingProvider.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'src/components/forms/HostingProvider.tsx') diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index c8cd7263f..c0dd7218e 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -57,11 +57,7 @@ export function HostingProvider({ t.atoms.bg_contrast_100, {marginLeft: 'auto', left: 6, padding: 6}, ]}> - + -- cgit 1.4.1 From 8556016a69642477e497fb7d695521b01945febc Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:37:12 +0000 Subject: remove textfield references from hosting provider --- src/components/forms/HostingProvider.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'src/components/forms/HostingProvider.tsx') diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index c0dd7218e..80660b580 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -5,7 +5,6 @@ import {isAndroid} from '#/platform/detection' import {atoms as a, useTheme} from '#/alf' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' -import * as TextField from './TextField' import {useDialogControl} from '../Dialog' import {Text} from '../Typography' import {ServerInputDialog} from '#/view/com/auth/server-input' @@ -49,7 +48,9 @@ export function HostingProvider({ t.atoms.bg_contrast_25, ]} onPress={onPressSelectService}> - + + + {toNiceDomain(serviceUrl)} - + -- cgit 1.4.1 From 2428d22368a96450f9a99b79a7e689a57e899a48 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:58:53 +0000 Subject: change hosting provider and forgot pw touchables to button --- src/components/forms/HostingProvider.tsx | 54 ++++++++++++++++++++++---------- src/screens/Login/LoginForm.tsx | 12 +++---- 2 files changed, 43 insertions(+), 23 deletions(-) (limited to 'src/components/forms/HostingProvider.tsx') diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index 80660b580..1653b0da4 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -1,5 +1,7 @@ import React from 'react' -import {TouchableOpacity, View} from 'react-native' +import {View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {isAndroid} from '#/platform/detection' import {atoms as a, useTheme} from '#/alf' @@ -9,6 +11,7 @@ import {useDialogControl} from '../Dialog' import {Text} from '../Typography' import {ServerInputDialog} from '#/view/com/auth/server-input' import {toNiceDomain} from '#/lib/strings/url-helpers' +import {Button} from '../Button' export function HostingProvider({ serviceUrl, @@ -21,6 +24,7 @@ export function HostingProvider({ }) { const serverInputControl = useDialogControl() const t = useTheme() + const {_} = useLingui() const onPressSelectService = React.useCallback(() => { serverInputControl.open() @@ -35,8 +39,11 @@ export function HostingProvider({ control={serverInputControl} onSelect={onSelectServiceUrl} /> - - - - - {toNiceDomain(serviceUrl)} - - - - + {({hovered}) => ( + <> + + + + {toNiceDomain(serviceUrl)} + + + + + )} + ) } diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index e9620db5c..8c9ef3e27 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -4,7 +4,6 @@ import { Keyboard, LayoutAnimation, TextInput, - TouchableOpacity, View, } from 'react-native' import {ComAtprotoServerDescribeServer} from '@atproto/api' @@ -193,22 +192,23 @@ export const LoginForm = ({ : _(msg`Input the password tied to ${identifier}`) } /> - - + Forgot? - + -- cgit 1.4.1 From fb17afc99d8fbc4f6b35e2aca0a3bdfda2b447f4 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 20 Mar 2024 18:02:18 +0000 Subject: dismiss keyboard when opening dialog --- src/components/forms/HostingProvider.tsx | 3 ++- src/view/com/auth/server-input/index.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src/components/forms/HostingProvider.tsx') diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index 1653b0da4..11d76316d 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {View} from 'react-native' +import {Keyboard, View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -27,6 +27,7 @@ export function HostingProvider({ const {_} = useLingui() const onPressSelectService = React.useCallback(() => { + Keyboard.dismiss() serverInputControl.open() if (onOpenDialog) { onOpenDialog() diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx index 0661b7a35..b26ac1dcb 100644 --- a/src/view/com/auth/server-input/index.tsx +++ b/src/view/com/auth/server-input/index.tsx @@ -67,7 +67,7 @@ export function ServerInputDialog({ return ( -- cgit 1.4.1 From 1d10946f540de596ef5b895a1608e63ea15c896f Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 20 Mar 2024 19:44:52 +0000 Subject: sort imports for files related to this PR --- src/components/forms/DateField/index.android.tsx | 6 +++--- src/components/forms/DateField/index.shared.tsx | 8 ++++---- src/components/forms/DateField/index.tsx | 16 ++++++++-------- src/components/forms/DateField/index.web.tsx | 8 ++++---- src/components/forms/FormError.tsx | 2 +- src/components/forms/HostingProvider.tsx | 6 +++--- src/screens/Login/ChooseAccountForm.tsx | 20 ++++++++++---------- src/screens/Login/ForgotPasswordForm.tsx | 22 +++++++++++----------- src/screens/Login/FormContainer.tsx | 4 ++-- src/screens/Login/LoginForm.tsx | 24 ++++++++++++------------ src/screens/Login/PasswordUpdatedForm.tsx | 7 ++++--- src/screens/Login/SetNewPasswordForm.tsx | 24 ++++++++++++------------ src/screens/Login/index.tsx | 22 +++++++++++----------- src/screens/Signup/StepCaptcha.tsx | 9 +++++---- src/screens/Signup/StepHandle.tsx | 21 +++++++++++---------- src/screens/Signup/index.tsx | 21 +++++++++++---------- src/screens/Signup/state.ts | 20 ++++++++++---------- 17 files changed, 122 insertions(+), 118 deletions(-) (limited to 'src/components/forms/HostingProvider.tsx') diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx index 35c2459f0..4a1d0d6d1 100644 --- a/src/components/forms/DateField/index.android.tsx +++ b/src/components/forms/DateField/index.android.tsx @@ -1,11 +1,11 @@ import React from 'react' +import DatePicker from 'react-native-date-picker' +import {isAndroid} from 'platform/detection' import {useTheme} from '#/alf' -import * as TextField from '#/components/forms/TextField' import {DateFieldProps} from '#/components/forms/DateField/types' import {toSimpleDateString} from '#/components/forms/DateField/utils' -import DatePicker from 'react-native-date-picker' -import {isAndroid} from 'platform/detection' +import * as TextField from '#/components/forms/TextField' import {DateFieldButton} from './index.shared' export * as utils from '#/components/forms/DateField/utils' diff --git a/src/components/forms/DateField/index.shared.tsx b/src/components/forms/DateField/index.shared.tsx index 29b3e8cb6..1f54bdc8b 100644 --- a/src/components/forms/DateField/index.shared.tsx +++ b/src/components/forms/DateField/index.shared.tsx @@ -1,11 +1,11 @@ import React from 'react' -import {View, Pressable} from 'react-native' +import {Pressable, View} from 'react-native' -import {atoms as a, android, useTheme, web} from '#/alf' -import {Text} from '#/components/Typography' -import {useInteractionState} from '#/components/hooks/useInteractionState' +import {android, atoms as a, useTheme, web} from '#/alf' import * as TextField from '#/components/forms/TextField' +import {useInteractionState} from '#/components/hooks/useInteractionState' import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' +import {Text} from '#/components/Typography' import {localizeDate} from './utils' // looks like a TextField.Input, but is just a button. It'll do something different on each platform on press diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx index 22fa3a9f5..d5a4beda0 100644 --- a/src/components/forms/DateField/index.tsx +++ b/src/components/forms/DateField/index.tsx @@ -1,16 +1,16 @@ import React from 'react' import {View} from 'react-native' - -import {useTheme, atoms as a} from '#/alf' -import * as TextField from '#/components/forms/TextField' -import {toSimpleDateString} from '#/components/forms/DateField/utils' -import {DateFieldProps} from '#/components/forms/DateField/types' import DatePicker from 'react-native-date-picker' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' +import {DateFieldProps} from '#/components/forms/DateField/types' +import {toSimpleDateString} from '#/components/forms/DateField/utils' +import * as TextField from '#/components/forms/TextField' import {DateFieldButton} from './index.shared' -import {Button, ButtonText} from '#/components/Button' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label diff --git a/src/components/forms/DateField/index.web.tsx b/src/components/forms/DateField/index.web.tsx index a3aa302f9..982d32711 100644 --- a/src/components/forms/DateField/index.web.tsx +++ b/src/components/forms/DateField/index.web.tsx @@ -1,12 +1,12 @@ import React from 'react' -import {TextInput, TextInputProps, StyleSheet} from 'react-native' +import {StyleSheet, TextInput, TextInputProps} from 'react-native' // @ts-ignore import {unstable_createElement} from 'react-native-web' -import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' -import * as TextField from '#/components/forms/TextField' -import {toSimpleDateString} from '#/components/forms/DateField/utils' import {DateFieldProps} from '#/components/forms/DateField/types' +import {toSimpleDateString} from '#/components/forms/DateField/utils' +import * as TextField from '#/components/forms/TextField' +import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label diff --git a/src/components/forms/FormError.tsx b/src/components/forms/FormError.tsx index 05f2e5893..905aeebd6 100644 --- a/src/components/forms/FormError.tsx +++ b/src/components/forms/FormError.tsx @@ -1,9 +1,9 @@ import React from 'react' import {View} from 'react-native' +import {atoms as a, useTheme} from '#/alf' import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' import {Text} from '#/components/Typography' -import {atoms as a, useTheme} from '#/alf' export function FormError({error}: {error?: string}) { const t = useTheme() diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index 11d76316d..34db9442d 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -3,15 +3,15 @@ import {Keyboard, View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {toNiceDomain} from '#/lib/strings/url-helpers' import {isAndroid} from '#/platform/detection' +import {ServerInputDialog} from '#/view/com/auth/server-input' import {atoms as a, useTheme} from '#/alf' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' +import {Button} from '../Button' import {useDialogControl} from '../Dialog' import {Text} from '../Typography' -import {ServerInputDialog} from '#/view/com/auth/server-input' -import {toNiceDomain} from '#/lib/strings/url-helpers' -import {Button} from '../Button' export function HostingProvider({ serviceUrl, diff --git a/src/screens/Login/ChooseAccountForm.tsx b/src/screens/Login/ChooseAccountForm.tsx index d90675f9e..28e99b02f 100644 --- a/src/screens/Login/ChooseAccountForm.tsx +++ b/src/screens/Login/ChooseAccountForm.tsx @@ -1,23 +1,23 @@ import React from 'react' import {View} from 'react-native' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {UserAvatar} from '../../view/com/util/UserAvatar' -import {colors} from 'lib/styles' -import {useSession, useSessionApi, SessionAccount} from '#/state/session' +import {useAnalytics} from '#/lib/analytics/analytics' +import {logEvent} from '#/lib/statsig/statsig' +import {colors} from '#/lib/styles' import {useProfileQuery} from '#/state/queries/profile' +import {SessionAccount, useSession, useSessionApi} from '#/state/session' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import * as Toast from '#/view/com/util/Toast' -import {Button} from '#/components/Button' +import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useTheme} from '#/alf' -import {Text} from '#/components/Typography' -import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron' -import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' +import {Button} from '#/components/Button' import * as TextField from '#/components/forms/TextField' +import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' +import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron' +import {Text} from '#/components/Typography' import {FormContainer} from './FormContainer' -import {logEvent} from '#/lib/statsig/statsig' function AccountItem({ account, diff --git a/src/screens/Login/ForgotPasswordForm.tsx b/src/screens/Login/ForgotPasswordForm.tsx index ab9d02536..37d24bb10 100644 --- a/src/screens/Login/ForgotPasswordForm.tsx +++ b/src/screens/Login/ForgotPasswordForm.tsx @@ -1,23 +1,23 @@ -import React, {useState, useEffect} from 'react' +import React, {useEffect, useState} from 'react' import {ActivityIndicator, Keyboard, View} from 'react-native' import {ComAtprotoServerDescribeServer} from '@atproto/api' -import * as EmailValidator from 'email-validator' import {BskyAgent} from '@atproto/api' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import * as EmailValidator from 'email-validator' -import * as TextField from '#/components/forms/TextField' -import {HostingProvider} from '#/components/forms/HostingProvider' -import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' -import {atoms as a, useTheme} from '#/alf' -import {useAnalytics} from 'lib/analytics/analytics' -import {isNetworkError} from 'lib/strings/errors' -import {cleanError} from 'lib/strings/errors' +import {useAnalytics} from '#/lib/analytics/analytics' +import {isNetworkError} from '#/lib/strings/errors' +import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' +import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' +import {FormError} from '#/components/forms/FormError' +import {HostingProvider} from '#/components/forms/HostingProvider' +import * as TextField from '#/components/forms/TextField' +import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' import {Text} from '#/components/Typography' import {FormContainer} from './FormContainer' -import {FormError} from '#/components/forms/FormError' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/screens/Login/FormContainer.tsx b/src/screens/Login/FormContainer.tsx index cd17d06d7..20a3ba321 100644 --- a/src/screens/Login/FormContainer.tsx +++ b/src/screens/Login/FormContainer.tsx @@ -1,15 +1,15 @@ import React from 'react' import { ScrollView, + type StyleProp, StyleSheet, View, - type StyleProp, type ViewStyle, } from 'react-native' +import {isWeb} from '#/platform/detection' import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Text} from '#/components/Typography' -import {isWeb} from '#/platform/detection' export function FormContainer({ testID, diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index f43f6da1f..a2cdb7f96 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -1,4 +1,4 @@ -import React, {useState, useRef} from 'react' +import React, {useRef, useState} from 'react' import { ActivityIndicator, Keyboard, @@ -7,25 +7,25 @@ import { View, } from 'react-native' import {ComAtprotoServerDescribeServer} from '@atproto/api' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {createFullHandle} from 'lib/strings/handles' -import {isNetworkError} from 'lib/strings/errors' -import {useSessionApi} from '#/state/session' -import {cleanError} from 'lib/strings/errors' +import {useAnalytics} from '#/lib/analytics/analytics' +import {isNetworkError} from '#/lib/strings/errors' +import {cleanError} from '#/lib/strings/errors' +import {createFullHandle} from '#/lib/strings/handles' import {logger} from '#/logger' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {useSessionApi} from '#/state/session' import {atoms as a, useTheme} from '#/alf' -import {Text} from '#/components/Typography' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {FormError} from '#/components/forms/FormError' +import {HostingProvider} from '#/components/forms/HostingProvider' import * as TextField from '#/components/forms/TextField' import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' -import {HostingProvider} from '#/components/forms/HostingProvider' -import {FormContainer} from './FormContainer' -import {FormError} from '#/components/forms/FormError' import {Loader} from '#/components/Loader' +import {Text} from '#/components/Typography' +import {FormContainer} from './FormContainer' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/screens/Login/PasswordUpdatedForm.tsx b/src/screens/Login/PasswordUpdatedForm.tsx index 218cab539..5407f3f1e 100644 --- a/src/screens/Login/PasswordUpdatedForm.tsx +++ b/src/screens/Login/PasswordUpdatedForm.tsx @@ -1,12 +1,13 @@ import React, {useEffect} from 'react' import {View} from 'react-native' -import {useAnalytics} from 'lib/analytics/analytics' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {FormContainer} from './FormContainer' + +import {useAnalytics} from '#/lib/analytics/analytics' +import {atoms as a, useBreakpoints} from '#/alf' import {Button, ButtonText} from '#/components/Button' import {Text} from '#/components/Typography' -import {atoms as a, useBreakpoints} from '#/alf' +import {FormContainer} from './FormContainer' export const PasswordUpdatedForm = ({ onPressNext, diff --git a/src/screens/Login/SetNewPasswordForm.tsx b/src/screens/Login/SetNewPasswordForm.tsx index 678440cf4..072d7a978 100644 --- a/src/screens/Login/SetNewPasswordForm.tsx +++ b/src/screens/Login/SetNewPasswordForm.tsx @@ -1,22 +1,22 @@ -import React, {useState, useEffect} from 'react' +import React, {useEffect, useState} from 'react' import {ActivityIndicator, View} from 'react-native' import {BskyAgent} from '@atproto/api' -import {useAnalytics} from 'lib/analytics/analytics' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' -import {isNetworkError} from 'lib/strings/errors' -import {cleanError} from 'lib/strings/errors' -import {checkAndFormatResetCode} from 'lib/strings/password' +import {useAnalytics} from '#/lib/analytics/analytics' +import {isNetworkError} from '#/lib/strings/errors' +import {cleanError} from '#/lib/strings/errors' +import {checkAndFormatResetCode} from '#/lib/strings/password' import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {FormContainer} from './FormContainer' -import {Text} from '#/components/Typography' +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonText} from '#/components/Button' +import {FormError} from '#/components/forms/FormError' import * as TextField from '#/components/forms/TextField' import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket' -import {Button, ButtonText} from '#/components/Button' -import {useTheme, atoms as a} from '#/alf' -import {FormError} from '#/components/forms/FormError' +import {Text} from '#/components/Typography' +import {FormContainer} from './FormContainer' export const SetNewPasswordForm = ({ error, diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx index e032d4189..49f7518b0 100644 --- a/src/screens/Login/index.tsx +++ b/src/screens/Login/index.tsx @@ -1,23 +1,23 @@ import React from 'react' import {KeyboardAvoidingView} from 'react-native' -import {useAnalytics} from '#/lib/analytics/analytics' +import {LayoutAnimationConfig} from 'react-native-reanimated' +import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout' -import {SessionAccount, useSession} from '#/state/session' +import {useAnalytics} from '#/lib/analytics/analytics' import {DEFAULT_SERVICE} from '#/lib/constants' -import {useLoggedOutView} from '#/state/shell/logged-out' -import {useServiceQuery} from '#/state/queries/service' -import {msg} from '@lingui/macro' import {logger} from '#/logger' -import {atoms as a} from '#/alf' -import {ChooseAccountForm} from './ChooseAccountForm' +import {useServiceQuery} from '#/state/queries/service' +import {SessionAccount, useSession} from '#/state/session' +import {useLoggedOutView} from '#/state/shell/logged-out' +import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout' import {ForgotPasswordForm} from '#/screens/Login/ForgotPasswordForm' -import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm' -import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm' import {LoginForm} from '#/screens/Login/LoginForm' +import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm' +import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm' +import {atoms as a} from '#/alf' +import {ChooseAccountForm} from './ChooseAccountForm' import {ScreenTransition} from './ScreenTransition' -import {LayoutAnimationConfig} from 'react-native-reanimated' enum Forms { Login, diff --git a/src/screens/Signup/StepCaptcha.tsx b/src/screens/Signup/StepCaptcha.tsx index c4181e552..14da8ee93 100644 --- a/src/screens/Signup/StepCaptcha.tsx +++ b/src/screens/Signup/StepCaptcha.tsx @@ -3,13 +3,14 @@ import {ActivityIndicator, StyleSheet, View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {nanoid} from 'nanoid/non-secure' + +import {createFullHandle} from '#/lib/strings/handles' +import {isWeb} from '#/platform/detection' +import {CaptchaWebView} from '#/view/com/auth/create/CaptchaWebView' +import {ScreenTransition} from '#/screens/Login/ScreenTransition' import {useSignupContext, useSubmitSignup} from '#/screens/Signup/state' -import {CaptchaWebView} from 'view/com/auth/create/CaptchaWebView' -import {createFullHandle} from 'lib/strings/handles' -import {isWeb} from 'platform/detection' import {atoms as a, useTheme} from '#/alf' import {FormError} from '#/components/forms/FormError' -import {ScreenTransition} from '#/screens/Login/ScreenTransition' const CAPTCHA_PATH = '/gate/signup' diff --git a/src/screens/Signup/StepHandle.tsx b/src/screens/Signup/StepHandle.tsx index e0a79e8fb..97b5f8322 100644 --- a/src/screens/Signup/StepHandle.tsx +++ b/src/screens/Signup/StepHandle.tsx @@ -1,21 +1,22 @@ import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {useLingui} from '@lingui/react' import {msg, Trans} from '@lingui/macro' -import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times' -import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' -import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' -import * as TextField from '#/components/forms/TextField' -import {useSignupContext} from '#/screens/Signup/state' -import {Text} from '#/components/Typography' -import {atoms as a, useTheme} from '#/alf' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + import { createFullHandle, IsValidHandle, validateHandle, -} from 'lib/strings/handles' +} from '#/lib/strings/handles' import {ScreenTransition} from '#/screens/Login/ScreenTransition' +import {useSignupContext} from '#/screens/Signup/state' +import {atoms as a, useTheme} from '#/alf' +import * as TextField from '#/components/forms/TextField' +import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' +import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' +import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times' +import {Text} from '#/components/Typography' export function StepHandle() { const {_} = useLingui() diff --git a/src/screens/Signup/index.tsx b/src/screens/Signup/index.tsx index b1acbbdf0..3414aacc1 100644 --- a/src/screens/Signup/index.tsx +++ b/src/screens/Signup/index.tsx @@ -1,7 +1,14 @@ import React from 'react' import {ScrollView, View} from 'react-native' -import {useLingui} from '@lingui/react' import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {useAnalytics} from '#/lib/analytics/analytics' +import {FEEDBACK_FORM_URL} from '#/lib/constants' +import {createFullHandle} from '#/lib/strings/handles' +import {useServiceQuery} from '#/state/queries/service' +import {getAgent} from '#/state/session' +import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout' import { initialState, reducer, @@ -9,19 +16,13 @@ import { SignupStep, useSubmitSignup, } from '#/screens/Signup/state' -import {StepInfo} from '#/screens/Signup/StepInfo' -import {StepHandle} from '#/screens/Signup/StepHandle' import {StepCaptcha} from '#/screens/Signup/StepCaptcha' +import {StepHandle} from '#/screens/Signup/StepHandle' +import {StepInfo} from '#/screens/Signup/StepInfo' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' -import {Text} from '#/components/Typography' -import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' -import {FEEDBACK_FORM_URL} from 'lib/constants' import {InlineLink} from '#/components/Link' -import {useServiceQuery} from 'state/queries/service' -import {getAgent} from 'state/session' -import {createFullHandle} from 'lib/strings/handles' -import {useAnalytics} from 'lib/analytics/analytics' +import {Text} from '#/components/Typography' export function Signup({onPressBack}: {onPressBack: () => void}) { const {_} = useLingui() diff --git a/src/screens/Signup/state.ts b/src/screens/Signup/state.ts index 1ae43612e..f185e2d44 100644 --- a/src/screens/Signup/state.ts +++ b/src/screens/Signup/state.ts @@ -1,25 +1,25 @@ import React, {useCallback} from 'react' import {LayoutAnimation} from 'react-native' -import * as EmailValidator from 'email-validator' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' -import {cleanError} from 'lib/strings/errors' import { ComAtprotoServerCreateAccount, ComAtprotoServerDescribeServer, } from '@atproto/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import * as EmailValidator from 'email-validator' +import {DEFAULT_SERVICE, IS_PROD_SERVICE} from '#/lib/constants' +import {cleanError} from '#/lib/strings/errors' +import {createFullHandle, validateHandle} from '#/lib/strings/handles' +import {getAge} from '#/lib/strings/time' import {logger} from '#/logger' -import {DEFAULT_SERVICE, IS_PROD_SERVICE} from 'lib/constants' -import {createFullHandle, validateHandle} from 'lib/strings/handles' -import {getAge} from 'lib/strings/time' -import {useSessionApi} from 'state/session' import { DEFAULT_PROD_FEEDS, usePreferencesSetBirthDateMutation, useSetSaveFeedsMutation, -} from 'state/queries/preferences' -import {useOnboardingDispatch} from 'state/shell' +} from '#/state/queries/preferences' +import {useSessionApi} from '#/state/session' +import {useOnboardingDispatch} from '#/state/shell' export type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema -- cgit 1.4.1 From 6e1541f2030897c8e32090dee3904fc65284ee8c Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 20 Mar 2024 16:15:41 -0500 Subject: HostingProvider tweaks --- src/components/forms/HostingProvider.tsx | 60 ++++++++++++++++++-------------- 1 file changed, 34 insertions(+), 26 deletions(-) (limited to 'src/components/forms/HostingProvider.tsx') diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index 34db9442d..f2d11062a 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -51,36 +51,44 @@ export function HostingProvider({ a.align_center, a.rounded_sm, a.px_md, + a.pr_sm, a.gap_xs, {paddingVertical: isAndroid ? 14 : 9}, ]} onPress={onPressSelectService}> - {({hovered}) => ( - <> - - - - {toNiceDomain(serviceUrl)} - - - - - )} + {({hovered, pressed}) => { + const interacted = hovered || pressed + return ( + <> + + + + {toNiceDomain(serviceUrl)} + + + + + ) + }} ) -- cgit 1.4.1