+1

assets/icons/ticket_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" stroke="#000" stroke-linejoin="round" d="M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12c0-1.296.704-2.426 1.75-3.032a.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z"/></svg>

+69

src/alf/atoms.ts

··· 300 300 /* 301 301 * Padding 302 302 */ 303 303 + p_0: { 304 304 + padding: 0, 305 305 + }, 303 306 p_2xs: { 304 307 padding: tokens.space._2xs, 305 308 }, ··· 329 332 }, 330 333 p_5xl: { 331 334 padding: tokens.space._5xl, 335 335 + }, 336 336 + px_0: { 337 337 + paddingLeft: 0, 338 338 + paddingRight: 0, 332 339 }, 333 340 px_2xs: { 334 341 paddingLeft: tokens.space._2xs, ··· 370 377 paddingLeft: tokens.space._5xl, 371 378 paddingRight: tokens.space._5xl, 372 379 }, 380 380 + py_0: { 381 381 + paddingTop: 0, 382 382 + paddingBottom: 0, 383 383 + }, 373 384 py_2xs: { 374 385 paddingTop: tokens.space._2xs, 375 386 paddingBottom: tokens.space._2xs, ··· 409 420 py_5xl: { 410 421 paddingTop: tokens.space._5xl, 411 422 paddingBottom: tokens.space._5xl, 423 423 + }, 424 424 + pt_0: { 425 425 + paddingTop: 0, 412 426 }, 413 427 pt_2xs: { 414 428 paddingTop: tokens.space._2xs, ··· 440 454 pt_5xl: { 441 455 paddingTop: tokens.space._5xl, 442 456 }, 457 457 + pb_0: { 458 458 + paddingBottom: 0, 459 459 + }, 443 460 pb_2xs: { 444 461 paddingBottom: tokens.space._2xs, 445 462 }, ··· 470 487 pb_5xl: { 471 488 paddingBottom: tokens.space._5xl, 472 489 }, 490 490 + pl_0: { 491 491 + paddingLeft: 0, 492 492 + }, 473 493 pl_2xs: { 474 494 paddingLeft: tokens.space._2xs, 475 495 }, ··· 499 519 }, 500 520 pl_5xl: { 501 521 paddingLeft: tokens.space._5xl, 522 522 + }, 523 523 + pr_0: { 524 524 + paddingRight: 0, 502 525 }, 503 526 pr_2xs: { 504 527 paddingRight: tokens.space._2xs, ··· 534 557 /* 535 558 * Margin 536 559 */ 560 560 + m_0: { 561 561 + margin: 0, 562 562 + }, 537 563 m_2xs: { 538 564 margin: tokens.space._2xs, 539 565 }, ··· 564 590 m_5xl: { 565 591 margin: tokens.space._5xl, 566 592 }, 593 593 + m_auto: { 594 594 + margin: 'auto', 595 595 + }, 596 596 + mx_0: { 597 597 + marginLeft: 0, 598 598 + marginRight: 0, 599 599 + }, 567 600 mx_2xs: { 568 601 marginLeft: tokens.space._2xs, 569 602 marginRight: tokens.space._2xs, ··· 604 637 marginLeft: tokens.space._5xl, 605 638 marginRight: tokens.space._5xl, 606 639 }, 640 640 + mx_auto: { 641 641 + marginLeft: 'auto', 642 642 + marginRight: 'auto', 643 643 + }, 644 644 + my_0: { 645 645 + marginTop: 0, 646 646 + marginBottom: 0, 647 647 + }, 607 648 my_2xs: { 608 649 marginTop: tokens.space._2xs, 609 650 marginBottom: tokens.space._2xs, ··· 644 685 marginTop: tokens.space._5xl, 645 686 marginBottom: tokens.space._5xl, 646 687 }, 688 688 + my_auto: { 689 689 + marginTop: 'auto', 690 690 + marginBottom: 'auto', 691 691 + }, 692 692 + mt_0: { 693 693 + marginTop: 0, 694 694 + }, 647 695 mt_2xs: { 648 696 marginTop: tokens.space._2xs, 649 697 }, ··· 674 722 mt_5xl: { 675 723 marginTop: tokens.space._5xl, 676 724 }, 725 725 + mt_auto: { 726 726 + marginTop: 'auto', 727 727 + }, 728 728 + mb_0: { 729 729 + marginBottom: 0, 730 730 + }, 677 731 mb_2xs: { 678 732 marginBottom: tokens.space._2xs, 679 733 }, ··· 704 758 mb_5xl: { 705 759 marginBottom: tokens.space._5xl, 706 760 }, 761 761 + mb_auto: { 762 762 + marginBottom: 'auto', 763 763 + }, 764 764 + ml_0: { 765 765 + marginLeft: 0, 766 766 + }, 707 767 ml_2xs: { 708 768 marginLeft: tokens.space._2xs, 709 769 }, ··· 734 794 ml_5xl: { 735 795 marginLeft: tokens.space._5xl, 736 796 }, 797 797 + ml_auto: { 798 798 + marginLeft: 'auto', 799 799 + }, 800 800 + mr_0: { 801 801 + marginRight: 0, 802 802 + }, 737 803 mr_2xs: { 738 804 marginRight: tokens.space._2xs, 739 805 }, ··· 763 829 }, 764 830 mr_5xl: { 765 831 marginRight: tokens.space._5xl, 832 832 + }, 833 833 + mr_auto: { 834 834 + marginRight: 'auto', 766 835 }, 767 836 } as const

+69

src/components/forms/HostingProvider.tsx

··· 1 1 + import React from 'react' 2 2 + import {TouchableOpacity, View} from 'react-native' 3 3 + 4 4 + import {isAndroid} from '#/platform/detection' 5 5 + import {atoms as a, useTheme} from '#/alf' 6 6 + import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' 7 7 + import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' 8 8 + import * as TextField from './TextField' 9 9 + import {useDialogControl} from '../Dialog' 10 10 + import {Text} from '../Typography' 11 11 + import {ServerInputDialog} from '#/view/com/auth/server-input' 12 12 + import {toNiceDomain} from '#/lib/strings/url-helpers' 13 13 + 14 14 + export function HostingProvider({ 15 15 + serviceUrl, 16 16 + onSelectServiceUrl, 17 17 + onOpenDialog, 18 18 + }: { 19 19 + serviceUrl: string 20 20 + onSelectServiceUrl: (provider: string) => void 21 21 + onOpenDialog?: () => void 22 22 + }) { 23 23 + const serverInputControl = useDialogControl() 24 24 + const t = useTheme() 25 25 + 26 26 + const onPressSelectService = React.useCallback(() => { 27 27 + serverInputControl.open() 28 28 + if (onOpenDialog) { 29 29 + onOpenDialog() 30 30 + } 31 31 + }, [onOpenDialog, serverInputControl]) 32 32 + 33 33 + return ( 34 34 + <> 35 35 + <ServerInputDialog 36 36 + control={serverInputControl} 37 37 + onSelect={onSelectServiceUrl} 38 38 + /> 39 39 + <TouchableOpacity 40 40 + accessibilityRole="button" 41 41 + style={[ 42 42 + a.w_full, 43 43 + a.flex_row, 44 44 + a.align_center, 45 45 + a.rounded_sm, 46 46 + a.px_md, 47 47 + a.gap_xs, 48 48 + {paddingVertical: isAndroid ? 14 : 9}, 49 49 + t.atoms.bg_contrast_25, 50 50 + ]} 51 51 + onPress={onPressSelectService}> 52 52 + <TextField.Icon icon={Globe} /> 53 53 + <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text> 54 54 + <View 55 55 + style={[ 56 56 + a.rounded_sm, 57 57 + t.atoms.bg_contrast_100, 58 58 + {marginLeft: 'auto', left: 6, padding: 6}, 59 59 + ]}> 60 60 + <Pencil 61 61 + style={{color: t.palette.contrast_500}} 62 62 + height={18} 63 63 + width={18} 64 64 + /> 65 65 + </View> 66 66 + </TouchableOpacity> 67 67 + </> 68 68 + ) 69 69 + }

+5

src/components/icons/Ticket.tsx

··· 1 1 + import {createSinglePathSVG} from './TEMPLATE' 2 2 + 3 3 + export const Ticket_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 4 + path: 'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12c0-1.296.704-2.426 1.75-3.032a.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z', 5 5 + })

+22 -21

src/screens/Login/ChooseAccountForm.tsx

··· 1 1 import React from 'react' 2 2 - import {ScrollView, TouchableOpacity, View} from 'react-native' 2 2 + import {TouchableOpacity, View} from 'react-native' 3 3 import {Trans, msg} from '@lingui/macro' 4 4 import {useLingui} from '@lingui/react' 5 5 import flattenReactChildren from 'react-keyed-flatten-children' ··· 7 7 import {useAnalytics} from 'lib/analytics/analytics' 8 8 import {UserAvatar} from '../../view/com/util/UserAvatar' 9 9 import {colors} from 'lib/styles' 10 10 - import {styles} from '../../view/com/auth/login/styles' 11 10 import {useSession, useSessionApi, SessionAccount} from '#/state/session' 12 11 import {useProfileQuery} from '#/state/queries/profile' 13 12 import {useLoggedOutViewControls} from '#/state/shell/logged-out' 14 13 import * as Toast from '#/view/com/util/Toast' 15 14 import {Button} from '#/components/Button' 16 16 - import {atoms as a, useBreakpoints, useTheme} from '#/alf' 15 15 + import {atoms as a, useTheme} from '#/alf' 17 16 import {Text} from '#/components/Typography' 18 17 import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron' 19 18 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' 19 19 + import * as TextField from '#/components/forms/TextField' 20 20 + import {FormContainer} from './FormContainer' 20 21 21 22 function Group({children}: {children: React.ReactNode}) { 22 23 const t = useTheme() ··· 106 107 const {accounts, currentAccount} = useSession() 107 108 const {initSession} = useSessionApi() 108 109 const {setShowLoggedOut} = useLoggedOutViewControls() 109 109 - const {gtMobile} = useBreakpoints() 110 110 111 111 React.useEffect(() => { 112 112 screen('Choose Account') ··· 133 133 ) 134 134 135 135 return ( 136 136 - <ScrollView testID="chooseAccountForm" style={styles.maxHeight}> 137 137 - <View style={!gtMobile && a.px_lg}> 138 138 - <Text 139 139 - style={[a.mt_md, a.mb_lg, a.font_bold, t.atoms.text_contrast_medium]}> 136 136 + <FormContainer 137 137 + testID="chooseAccountForm" 138 138 + title={<Trans>Select account</Trans>}> 139 139 + <View> 140 140 + <TextField.Label> 140 141 <Trans>Sign in as...</Trans> 141 141 - </Text> 142 142 + </TextField.Label> 142 143 <Group> 143 144 {accounts.map(account => ( 144 145 <AccountItem ··· 171 172 </View> 172 173 </TouchableOpacity> 173 174 </Group> 174 174 - <View style={[a.flex_row, a.mt_lg]}> 175 175 - <Button 176 176 - label={_(msg`Back`)} 177 177 - variant="solid" 178 178 - color="secondary" 179 179 - size="small" 180 180 - onPress={onPressBack}> 181 181 - {_(msg`Back`)} 182 182 - </Button> 183 183 - <View style={[a.flex_1]} /> 184 184 - </View> 175 175 + </View> 176 176 + <View style={[a.flex_row]}> 177 177 + <Button 178 178 + label={_(msg`Back`)} 179 179 + variant="solid" 180 180 + color="secondary" 181 181 + size="small" 182 182 + onPress={onPressBack}> 183 183 + {_(msg`Back`)} 184 184 + </Button> 185 185 + <View style={[a.flex_1]} /> 185 186 </View> 186 186 - </ScrollView> 187 187 + </FormContainer> 187 188 ) 188 189 }

+183

src/screens/Login/ForgotPasswordForm.tsx

··· 1 1 + import React, {useState, useEffect} from 'react' 2 2 + import {ActivityIndicator, Keyboard, View} from 'react-native' 3 3 + import {ComAtprotoServerDescribeServer} from '@atproto/api' 4 4 + import * as EmailValidator from 'email-validator' 5 5 + import {BskyAgent} from '@atproto/api' 6 6 + import {Trans, msg} from '@lingui/macro' 7 7 + import {useLingui} from '@lingui/react' 8 8 + 9 9 + import * as TextField from '#/components/forms/TextField' 10 10 + import {HostingProvider} from '#/components/forms/HostingProvider' 11 11 + import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' 12 12 + import {atoms as a, useTheme} from '#/alf' 13 13 + import {useAnalytics} from 'lib/analytics/analytics' 14 14 + import {isNetworkError} from 'lib/strings/errors' 15 15 + import {cleanError} from 'lib/strings/errors' 16 16 + import {logger} from '#/logger' 17 17 + import {Button, ButtonText} from '#/components/Button' 18 18 + import {Text} from '#/components/Typography' 19 19 + import {FormContainer} from './FormContainer' 20 20 + import {FormError} from './FormError' 21 21 + 22 22 + type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema 23 23 + 24 24 + export const ForgotPasswordForm = ({ 25 25 + error, 26 26 + serviceUrl, 27 27 + serviceDescription, 28 28 + setError, 29 29 + setServiceUrl, 30 30 + onPressBack, 31 31 + onEmailSent, 32 32 + }: { 33 33 + error: string 34 34 + serviceUrl: string 35 35 + serviceDescription: ServiceDescription | undefined 36 36 + setError: (v: string) => void 37 37 + setServiceUrl: (v: string) => void 38 38 + onPressBack: () => void 39 39 + onEmailSent: () => void 40 40 + }) => { 41 41 + const t = useTheme() 42 42 + const [isProcessing, setIsProcessing] = useState<boolean>(false) 43 43 + const [email, setEmail] = useState<string>('') 44 44 + const {screen} = useAnalytics() 45 45 + const {_} = useLingui() 46 46 + 47 47 + useEffect(() => { 48 48 + screen('Signin:ForgotPassword') 49 49 + }, [screen]) 50 50 + 51 51 + const onPressSelectService = React.useCallback(() => { 52 52 + Keyboard.dismiss() 53 53 + }, []) 54 54 + 55 55 + const onPressNext = async () => { 56 56 + if (!EmailValidator.validate(email)) { 57 57 + return setError(_(msg`Your email appears to be invalid.`)) 58 58 + } 59 59 + 60 60 + setError('') 61 61 + setIsProcessing(true) 62 62 + 63 63 + try { 64 64 + const agent = new BskyAgent({service: serviceUrl}) 65 65 + await agent.com.atproto.server.requestPasswordReset({email}) 66 66 + onEmailSent() 67 67 + } catch (e: any) { 68 68 + const errMsg = e.toString() 69 69 + logger.warn('Failed to request password reset', {error: e}) 70 70 + setIsProcessing(false) 71 71 + if (isNetworkError(e)) { 72 72 + setError( 73 73 + _( 74 74 + msg`Unable to contact your service. Please check your Internet connection.`, 75 75 + ), 76 76 + ) 77 77 + } else { 78 78 + setError(cleanError(errMsg)) 79 79 + } 80 80 + } 81 81 + } 82 82 + 83 83 + return ( 84 84 + <FormContainer 85 85 + testID="forgotPasswordForm" 86 86 + title={<Trans>Reset password</Trans>}> 87 87 + <View> 88 88 + <TextField.Label> 89 89 + <Trans>Hosting provider</Trans> 90 90 + </TextField.Label> 91 91 + <HostingProvider 92 92 + serviceUrl={serviceUrl} 93 93 + onSelectServiceUrl={setServiceUrl} 94 94 + onOpenDialog={onPressSelectService} 95 95 + /> 96 96 + </View> 97 97 + <View> 98 98 + <TextField.Label> 99 99 + <Trans>Email address</Trans> 100 100 + </TextField.Label> 101 101 + <TextField.Root> 102 102 + <TextField.Icon icon={At} /> 103 103 + <TextField.Input 104 104 + testID="forgotPasswordEmail" 105 105 + label={_(msg`Enter your email address`)} 106 106 + autoCapitalize="none" 107 107 + autoFocus 108 108 + autoCorrect={false} 109 109 + autoComplete="email" 110 110 + value={email} 111 111 + onChangeText={setEmail} 112 112 + editable={!isProcessing} 113 113 + accessibilityHint={_(msg`Sets email for password reset`)} 114 114 + /> 115 115 + </TextField.Root> 116 116 + </View> 117 117 + <View> 118 118 + <Text style={[t.atoms.text_contrast_high, a.mb_md]}> 119 119 + <Trans> 120 120 + Enter the email you used to create your account. We'll send you a 121 121 + "reset code" so you can set a new password. 122 122 + </Trans> 123 123 + </Text> 124 124 + </View> 125 125 + <FormError error={error} /> 126 126 + <View style={[a.flex_row, a.align_center]}> 127 127 + <Button 128 128 + label={_(msg`Back`)} 129 129 + variant="solid" 130 130 + color="secondary" 131 131 + size="small" 132 132 + onPress={onPressBack}> 133 133 + <ButtonText> 134 134 + <Trans>Back</Trans> 135 135 + </ButtonText> 136 136 + </Button> 137 137 + <View style={a.flex_1} /> 138 138 + {!serviceDescription || isProcessing ? ( 139 139 + <ActivityIndicator /> 140 140 + ) : ( 141 141 + <Button 142 142 + label={_(msg`Next`)} 143 143 + variant="solid" 144 144 + color={email ? 'primary' : 'secondary'} 145 145 + size="small" 146 146 + onPress={onPressNext} 147 147 + disabled={!email}> 148 148 + <ButtonText> 149 149 + <Trans>Next</Trans> 150 150 + </ButtonText> 151 151 + </Button> 152 152 + )} 153 153 + {!serviceDescription || isProcessing ? ( 154 154 + <Text style={[t.atoms.text_contrast_high, a.pl_md]}> 155 155 + <Trans>Processing...</Trans> 156 156 + </Text> 157 157 + ) : undefined} 158 158 + </View> 159 159 + <View 160 160 + style={[ 161 161 + t.atoms.border_contrast_medium, 162 162 + a.border_t, 163 163 + a.pt_2xl, 164 164 + a.mt_md, 165 165 + a.flex_row, 166 166 + a.justify_center, 167 167 + ]}> 168 168 + <Button 169 169 + testID="skipSendEmailButton" 170 170 + onPress={onEmailSent} 171 171 + label={_(msg`Go to next`)} 172 172 + accessibilityHint={_(msg`Navigates to the next screen`)} 173 173 + size="small" 174 174 + variant="ghost" 175 175 + color="secondary"> 176 176 + <ButtonText> 177 177 + <Trans>Already have a code?</Trans> 178 178 + </ButtonText> 179 179 + </Button> 180 180 + </View> 181 181 + </FormContainer> 182 182 + ) 183 183 + }

+52

src/screens/Login/FormContainer.tsx

··· 1 1 + import React from 'react' 2 2 + import { 3 3 + ScrollView, 4 4 + StyleSheet, 5 5 + View, 6 6 + type StyleProp, 7 7 + type ViewStyle, 8 8 + } from 'react-native' 9 9 + 10 10 + import {atoms as a, useBreakpoints, useTheme} from '#/alf' 11 11 + import {Text} from '#/components/Typography' 12 12 + import {isWeb} from '#/platform/detection' 13 13 + 14 14 + export function FormContainer({ 15 15 + testID, 16 16 + title, 17 17 + children, 18 18 + style, 19 19 + contentContainerStyle, 20 20 + }: { 21 21 + testID?: string 22 22 + title?: React.ReactNode 23 23 + children: React.ReactNode 24 24 + style?: StyleProp<ViewStyle> 25 25 + contentContainerStyle?: StyleProp<ViewStyle> 26 26 + }) { 27 27 + const {gtMobile} = useBreakpoints() 28 28 + const t = useTheme() 29 29 + return ( 30 30 + <ScrollView 31 31 + testID={testID} 32 32 + style={[styles.maxHeight, contentContainerStyle]}> 33 33 + <View 34 34 + style={[a.gap_lg, a.flex_1, !gtMobile && [a.px_lg, a.pt_md], style]}> 35 35 + {title && !gtMobile && ( 36 36 + <Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}> 37 37 + {title} 38 38 + </Text> 39 39 + )} 40 40 + {children} 41 41 + </View> 42 42 + </ScrollView> 43 43 + ) 44 44 + } 45 45 + 46 46 + const styles = StyleSheet.create({ 47 47 + maxHeight: { 48 48 + // @ts-ignore web only -prf 49 49 + maxHeight: isWeb ? '100vh' : undefined, 50 50 + height: !isWeb ? '100%' : undefined, 51 51 + }, 52 52 + })

+34

src/screens/Login/FormError.tsx

··· 1 1 + import React from 'react' 2 2 + import {StyleSheet, View} from 'react-native' 3 3 + 4 4 + import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' 5 5 + import {Text} from '#/components/Typography' 6 6 + import {atoms as a, useTheme} from '#/alf' 7 7 + import {colors} from '#/lib/styles' 8 8 + 9 9 + export function FormError({error}: {error?: string}) { 10 10 + const t = useTheme() 11 11 + 12 12 + if (!error) return null 13 13 + 14 14 + return ( 15 15 + <View style={styles.error}> 16 16 + <Warning fill={t.palette.white} size="sm" /> 17 17 + <View style={(a.flex_1, a.ml_sm)}> 18 18 + <Text style={[{color: t.palette.white}, a.font_bold]}>{error}</Text> 19 19 + </View> 20 20 + </View> 21 21 + ) 22 22 + } 23 23 + 24 24 + const styles = StyleSheet.create({ 25 25 + error: { 26 26 + backgroundColor: colors.red4, 27 27 + flexDirection: 'row', 28 28 + alignItems: 'center', 29 29 + marginBottom: 15, 30 30 + borderRadius: 8, 31 31 + paddingHorizontal: 8, 32 32 + paddingVertical: 8, 33 33 + }, 34 34 + })

+127 -170

src/screens/Login/LoginForm.tsx

··· 2 2 import { 3 3 ActivityIndicator, 4 4 Keyboard, 5 5 - ScrollView, 6 5 TextInput, 7 6 TouchableOpacity, 8 7 View, 9 8 } from 'react-native' 10 9 import {ComAtprotoServerDescribeServer} from '@atproto/api' 11 10 import {Trans, msg} from '@lingui/macro' 11 11 + import {useLingui} from '@lingui/react' 12 12 13 13 import {useAnalytics} from 'lib/analytics/analytics' 14 14 - import {s} from 'lib/styles' 15 14 import {createFullHandle} from 'lib/strings/handles' 16 16 - import {toNiceDomain} from 'lib/strings/url-helpers' 17 15 import {isNetworkError} from 'lib/strings/errors' 18 16 import {useSessionApi} from '#/state/session' 19 17 import {cleanError} from 'lib/strings/errors' 20 18 import {logger} from '#/logger' 21 21 - import {styles} from '../../view/com/auth/login/styles' 22 22 - import {useLingui} from '@lingui/react' 23 23 - import {useDialogControl} from '#/components/Dialog' 24 24 - import {ServerInputDialog} from '../../view/com/auth/server-input' 25 19 import {Button, ButtonText} from '#/components/Button' 26 26 - import {isAndroid} from '#/platform/detection' 27 27 - import {atoms as a, useBreakpoints, useTheme} from '#/alf' 20 20 + import {atoms as a, useTheme} from '#/alf' 28 21 import {Text} from '#/components/Typography' 29 22 import * as TextField from '#/components/forms/TextField' 30 23 import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' 31 24 import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' 32 32 - import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' 33 33 - import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' 34 34 - import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' 25 25 + import {HostingProvider} from '#/components/forms/HostingProvider' 26 26 + import {FormContainer} from './FormContainer' 27 27 + import {FormError} from './FormError' 35 28 36 29 type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema 37 30 ··· 64 57 const passwordInputRef = useRef<TextInput>(null) 65 58 const {_} = useLingui() 66 59 const {login} = useSessionApi() 67 67 - const serverInputControl = useDialogControl() 68 68 - const {gtMobile} = useBreakpoints() 69 60 70 70 - const onPressSelectService = () => { 71 71 - serverInputControl.open() 61 61 + const onPressSelectService = React.useCallback(() => { 72 62 Keyboard.dismiss() 73 63 track('Signin:PressedSelectService') 74 74 - } 64 64 + }, [track]) 75 65 76 66 const onPressNext = async () => { 77 67 Keyboard.dismiss() ··· 131 121 132 122 const isReady = !!serviceDescription && !!identifier && !!password 133 123 return ( 134 134 - <ScrollView testID="loginForm" style={a.h_full}> 135 135 - <View style={[a.gap_lg, !gtMobile && a.px_lg, a.flex_1]}> 136 136 - <ServerInputDialog 137 137 - control={serverInputControl} 138 138 - onSelect={setServiceUrl} 124 124 + <FormContainer testID="loginForm" title={<Trans>Sign in</Trans>}> 125 125 + <View> 126 126 + <TextField.Label> 127 127 + <Trans>Hosting provider</Trans> 128 128 + </TextField.Label> 129 129 + <HostingProvider 130 130 + serviceUrl={serviceUrl} 131 131 + onSelectServiceUrl={setServiceUrl} 132 132 + onOpenDialog={onPressSelectService} 139 133 /> 140 140 - 141 141 - <View> 142 142 - <TextField.Label> 143 143 - <Trans>Hosting provider</Trans> 144 144 - </TextField.Label> 134 134 + </View> 135 135 + <View> 136 136 + <TextField.Label> 137 137 + <Trans>Account</Trans> 138 138 + </TextField.Label> 139 139 + <TextField.Root> 140 140 + <TextField.Icon icon={At} /> 141 141 + <TextField.Input 142 142 + testID="loginUsernameInput" 143 143 + label={_(msg`Username or email address`)} 144 144 + autoCapitalize="none" 145 145 + autoFocus 146 146 + autoCorrect={false} 147 147 + autoComplete="username" 148 148 + returnKeyType="next" 149 149 + textContentType="username" 150 150 + onSubmitEditing={() => { 151 151 + passwordInputRef.current?.focus() 152 152 + }} 153 153 + blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field 154 154 + value={identifier} 155 155 + onChangeText={str => 156 156 + setIdentifier((str || '').toLowerCase().trim()) 157 157 + } 158 158 + editable={!isProcessing} 159 159 + accessibilityHint={_( 160 160 + msg`Input the username or email address you used at signup`, 161 161 + )} 162 162 + /> 163 163 + </TextField.Root> 164 164 + </View> 165 165 + <View> 166 166 + <TextField.Root> 167 167 + <TextField.Icon icon={Lock} /> 168 168 + <TextField.Input 169 169 + testID="loginPasswordInput" 170 170 + inputRef={passwordInputRef} 171 171 + label={_(msg`Password`)} 172 172 + autoCapitalize="none" 173 173 + autoCorrect={false} 174 174 + autoComplete="password" 175 175 + returnKeyType="done" 176 176 + enablesReturnKeyAutomatically={true} 177 177 + secureTextEntry={true} 178 178 + textContentType="password" 179 179 + clearButtonMode="while-editing" 180 180 + value={password} 181 181 + onChangeText={setPassword} 182 182 + onSubmitEditing={onPressNext} 183 183 + blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing 184 184 + editable={!isProcessing} 185 185 + accessibilityHint={ 186 186 + identifier === '' 187 187 + ? _(msg`Input your password`) 188 188 + : _(msg`Input the password tied to ${identifier}`) 189 189 + } 190 190 + /> 145 191 <TouchableOpacity 192 192 + testID="forgotPasswordButton" 193 193 + onPress={onPressForgotPassword} 146 194 accessibilityRole="button" 195 195 + accessibilityLabel={_(msg`Forgot password`)} 196 196 + accessibilityHint={_(msg`Opens password reset form`)} 147 197 style={[ 148 148 - a.w_full, 149 149 - a.flex_row, 150 150 - a.align_center, 151 198 a.rounded_sm, 152 152 - a.px_md, 153 153 - a.gap_xs, 154 154 - {paddingVertical: isAndroid ? 14 : 9}, 155 155 - t.atoms.bg_contrast_25, 156 156 - ]} 157 157 - onPress={onPressSelectService}> 158 158 - <TextField.Icon icon={Globe} /> 159 159 - <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text> 160 160 - <View 161 161 - style={[ 162 162 - a.rounded_sm, 163 163 - t.atoms.bg_contrast_100, 164 164 - {marginLeft: 'auto', left: 6, padding: 6}, 165 165 - ]}> 166 166 - <Pencil 167 167 - style={{color: t.palette.contrast_500}} 168 168 - height={18} 169 169 - width={18} 170 170 - /> 171 171 - </View> 199 199 + t.atoms.bg_contrast_100, 200 200 + {marginLeft: 'auto', left: 6, padding: 6}, 201 201 + a.z_10, 202 202 + ]}> 203 203 + <ButtonText style={t.atoms.text_contrast_medium}> 204 204 + <Trans>Forgot?</Trans> 205 205 + </ButtonText> 172 206 </TouchableOpacity> 173 173 - </View> 174 174 - <View> 175 175 - <TextField.Label> 176 176 - <Trans>Account</Trans> 177 177 - </TextField.Label> 178 178 - <TextField.Root> 179 179 - <TextField.Icon icon={At} /> 180 180 - <TextField.Input 181 181 - testID="loginUsernameInput" 182 182 - label={_(msg`Username or email address`)} 183 183 - autoCapitalize="none" 184 184 - autoFocus 185 185 - autoCorrect={false} 186 186 - autoComplete="username" 187 187 - returnKeyType="next" 188 188 - textContentType="username" 189 189 - onSubmitEditing={() => { 190 190 - passwordInputRef.current?.focus() 191 191 - }} 192 192 - blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field 193 193 - value={identifier} 194 194 - onChangeText={str => 195 195 - setIdentifier((str || '').toLowerCase().trim()) 196 196 - } 197 197 - editable={!isProcessing} 198 198 - accessibilityHint={_( 199 199 - msg`Input the username or email address you used at signup`, 200 200 - )} 201 201 - /> 202 202 - </TextField.Root> 203 203 - </View> 204 204 - <View> 205 205 - <TextField.Root> 206 206 - <TextField.Icon icon={Lock} /> 207 207 - <TextField.Input 208 208 - testID="loginPasswordInput" 209 209 - inputRef={passwordInputRef} 210 210 - label={_(msg`Password`)} 211 211 - autoCapitalize="none" 212 212 - autoCorrect={false} 213 213 - autoComplete="password" 214 214 - returnKeyType="done" 215 215 - enablesReturnKeyAutomatically={true} 216 216 - secureTextEntry={true} 217 217 - textContentType="password" 218 218 - clearButtonMode="while-editing" 219 219 - value={password} 220 220 - onChangeText={setPassword} 221 221 - onSubmitEditing={onPressNext} 222 222 - blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing 223 223 - editable={!isProcessing} 224 224 - accessibilityHint={ 225 225 - identifier === '' 226 226 - ? _(msg`Input your password`) 227 227 - : _(msg`Input the password tied to ${identifier}`) 228 228 - } 229 229 - /> 230 230 - <TouchableOpacity 231 231 - testID="forgotPasswordButton" 232 232 - onPress={onPressForgotPassword} 233 233 - accessibilityRole="button" 234 234 - accessibilityLabel={_(msg`Forgot password`)} 235 235 - accessibilityHint={_(msg`Opens password reset form`)} 236 236 - style={[ 237 237 - a.rounded_sm, 238 238 - t.atoms.bg_contrast_100, 239 239 - {marginLeft: 'auto', left: 6, padding: 6}, 240 240 - a.z_10, 241 241 - ]}> 242 242 - <ButtonText style={t.atoms.text_contrast_medium}> 243 243 - <Trans>Forgot?</Trans> 244 244 - </ButtonText> 245 245 - </TouchableOpacity> 246 246 - </TextField.Root> 247 247 - </View> 248 248 - {error ? ( 249 249 - <View style={[styles.error, {marginHorizontal: 0}]}> 250 250 - <Warning style={s.white} size="sm" /> 251 251 - <View style={(a.flex_1, a.ml_sm)}> 252 252 - <Text style={[s.white, s.bold]}>{error}</Text> 253 253 - </View> 254 254 - </View> 255 255 - ) : undefined} 256 256 - <View style={[a.flex_row, a.align_center]}> 207 207 + </TextField.Root> 208 208 + </View> 209 209 + <FormError error={error} /> 210 210 + <View style={[a.flex_row, a.align_center]}> 211 211 + <Button 212 212 + label={_(msg`Back`)} 213 213 + variant="solid" 214 214 + color="secondary" 215 215 + size="small" 216 216 + onPress={onPressBack}> 217 217 + <ButtonText> 218 218 + <Trans>Back</Trans> 219 219 + </ButtonText> 220 220 + </Button> 221 221 + <View style={a.flex_1} /> 222 222 + {!serviceDescription && error ? ( 257 223 <Button 258 258 - label={_(msg`Back`)} 224 224 + testID="loginRetryButton" 225 225 + label={_(msg`Retry`)} 226 226 + accessibilityHint={_(msg`Retries login`)} 259 227 variant="solid" 260 228 color="secondary" 261 229 size="small" 262 262 - onPress={onPressBack}> 263 263 - {_(msg`Back`)} 230 230 + onPress={onPressRetryConnect}> 231 231 + {_(msg`Retry`)} 264 232 </Button> 265 265 - <View style={s.flex1} /> 266 266 - {!serviceDescription && error ? ( 267 267 - <Button 268 268 - testID="loginRetryButton" 269 269 - label={_(msg`Retry`)} 270 270 - accessibilityHint={_(msg`Retries login`)} 271 271 - variant="solid" 272 272 - color="secondary" 273 273 - size="small" 274 274 - onPress={onPressRetryConnect}> 275 275 - {_(msg`Retry`)} 276 276 - </Button> 277 277 - ) : !serviceDescription ? ( 278 278 - <> 279 279 - <ActivityIndicator /> 280 280 - <Text style={[t.atoms.text_contrast_high, a.pl_md]}> 281 281 - <Trans>Connecting...</Trans> 282 282 - </Text> 283 283 - </> 284 284 - ) : isProcessing ? ( 233 233 + ) : !serviceDescription ? ( 234 234 + <> 285 235 <ActivityIndicator /> 286 286 - ) : isReady ? ( 287 287 - <Button 288 288 - label={_(msg`Next`)} 289 289 - accessibilityHint={_(msg`Navigates to the next screen`)} 290 290 - variant="solid" 291 291 - color="primary" 292 292 - size="small" 293 293 - onPress={onPressNext}> 294 294 - {_(msg`Next`)} 295 295 - </Button> 296 296 - ) : undefined} 297 297 - </View> 236 236 + <Text style={[t.atoms.text_contrast_high, a.pl_md]}> 237 237 + <Trans>Connecting...</Trans> 238 238 + </Text> 239 239 + </> 240 240 + ) : isProcessing ? ( 241 241 + <ActivityIndicator /> 242 242 + ) : isReady ? ( 243 243 + <Button 244 244 + label={_(msg`Next`)} 245 245 + accessibilityHint={_(msg`Navigates to the next screen`)} 246 246 + variant="solid" 247 247 + color="primary" 248 248 + size="small" 249 249 + onPress={onPressNext}> 250 250 + <ButtonText> 251 251 + <Trans>Next</Trans> 252 252 + </ButtonText> 253 253 + </Button> 254 254 + ) : undefined} 298 255 </View> 299 299 - </ScrollView> 256 256 + </FormContainer> 300 257 ) 301 258 }

+49

src/screens/Login/PasswordUpdatedForm.tsx

··· 1 1 + import React, {useEffect} from 'react' 2 2 + import {View} from 'react-native' 3 3 + import {useAnalytics} from 'lib/analytics/analytics' 4 4 + import {msg, Trans} from '@lingui/macro' 5 5 + import {useLingui} from '@lingui/react' 6 6 + import {FormContainer} from './FormContainer' 7 7 + import {Button, ButtonText} from '#/components/Button' 8 8 + import {Text} from '#/components/Typography' 9 9 + import {atoms as a, useBreakpoints} from '#/alf' 10 10 + 11 11 + export const PasswordUpdatedForm = ({ 12 12 + onPressNext, 13 13 + }: { 14 14 + onPressNext: () => void 15 15 + }) => { 16 16 + const {screen} = useAnalytics() 17 17 + const {_} = useLingui() 18 18 + const {gtMobile} = useBreakpoints() 19 19 + 20 20 + useEffect(() => { 21 21 + screen('Signin:PasswordUpdatedForm') 22 22 + }, [screen]) 23 23 + 24 24 + return ( 25 25 + <FormContainer 26 26 + testID="passwordUpdatedForm" 27 27 + style={[a.gap_2xl, !gtMobile && a.mt_5xl]}> 28 28 + <Text style={[a.text_3xl, a.font_bold, a.text_center]}> 29 29 + <Trans>Password updated!</Trans> 30 30 + </Text> 31 31 + <Text style={[a.text_center, a.mx_auto, {maxWidth: '80%'}]}> 32 32 + <Trans>You can now sign in with your new password.</Trans> 33 33 + </Text> 34 34 + <View style={[a.flex_row, a.justify_center]}> 35 35 + <Button 36 36 + onPress={onPressNext} 37 37 + label={_(msg`Close alert`)} 38 38 + accessibilityHint={_(msg`Closes password update alert`)} 39 39 + variant="solid" 40 40 + color="primary" 41 41 + size="medium"> 42 42 + <ButtonText> 43 43 + <Trans>Okay</Trans> 44 44 + </ButtonText> 45 45 + </Button> 46 46 + </View> 47 47 + </FormContainer> 48 48 + ) 49 49 + }

+189

src/screens/Login/SetNewPasswordForm.tsx

··· 1 1 + import React, {useState, useEffect} from 'react' 2 2 + import {ActivityIndicator, View} from 'react-native' 3 3 + import {BskyAgent} from '@atproto/api' 4 4 + import {useAnalytics} from 'lib/analytics/analytics' 5 5 + 6 6 + import {isNetworkError} from 'lib/strings/errors' 7 7 + import {cleanError} from 'lib/strings/errors' 8 8 + import {checkAndFormatResetCode} from 'lib/strings/password' 9 9 + import {logger} from '#/logger' 10 10 + import {Trans, msg} from '@lingui/macro' 11 11 + import {useLingui} from '@lingui/react' 12 12 + import {FormContainer} from './FormContainer' 13 13 + import {Text} from '#/components/Typography' 14 14 + import * as TextField from '#/components/forms/TextField' 15 15 + import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' 16 16 + import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket' 17 17 + import {Button, ButtonText} from '#/components/Button' 18 18 + import {useTheme, atoms as a} from '#/alf' 19 19 + import {FormError} from './FormError' 20 20 + 21 21 + export const SetNewPasswordForm = ({ 22 22 + error, 23 23 + serviceUrl, 24 24 + setError, 25 25 + onPressBack, 26 26 + onPasswordSet, 27 27 + }: { 28 28 + error: string 29 29 + serviceUrl: string 30 30 + setError: (v: string) => void 31 31 + onPressBack: () => void 32 32 + onPasswordSet: () => void 33 33 + }) => { 34 34 + const {screen} = useAnalytics() 35 35 + const {_} = useLingui() 36 36 + const t = useTheme() 37 37 + 38 38 + useEffect(() => { 39 39 + screen('Signin:SetNewPasswordForm') 40 40 + }, [screen]) 41 41 + 42 42 + const [isProcessing, setIsProcessing] = useState<boolean>(false) 43 43 + const [resetCode, setResetCode] = useState<string>('') 44 44 + const [password, setPassword] = useState<string>('') 45 45 + 46 46 + const onPressNext = async () => { 47 47 + onPasswordSet() 48 48 + if (Math.random() > 0) return 49 49 + // Check that the code is correct. We do this again just incase the user enters the code after their pw and we 50 50 + // don't get to call onBlur first 51 51 + const formattedCode = checkAndFormatResetCode(resetCode) 52 52 + // TODO Better password strength check 53 53 + if (!formattedCode || !password) { 54 54 + setError( 55 55 + _( 56 56 + msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`, 57 57 + ), 58 58 + ) 59 59 + return 60 60 + } 61 61 + 62 62 + setError('') 63 63 + setIsProcessing(true) 64 64 + 65 65 + try { 66 66 + const agent = new BskyAgent({service: serviceUrl}) 67 67 + await agent.com.atproto.server.resetPassword({ 68 68 + token: formattedCode, 69 69 + password, 70 70 + }) 71 71 + onPasswordSet() 72 72 + } catch (e: any) { 73 73 + const errMsg = e.toString() 74 74 + logger.warn('Failed to set new password', {error: e}) 75 75 + setIsProcessing(false) 76 76 + if (isNetworkError(e)) { 77 77 + setError( 78 78 + 'Unable to contact your service. Please check your Internet connection.', 79 79 + ) 80 80 + } else { 81 81 + setError(cleanError(errMsg)) 82 82 + } 83 83 + } 84 84 + } 85 85 + 86 86 + const onBlur = () => { 87 87 + const formattedCode = checkAndFormatResetCode(resetCode) 88 88 + if (!formattedCode) { 89 89 + setError( 90 90 + _( 91 91 + msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`, 92 92 + ), 93 93 + ) 94 94 + return 95 95 + } 96 96 + setResetCode(formattedCode) 97 97 + } 98 98 + 99 99 + return ( 100 100 + <FormContainer 101 101 + testID="setNewPasswordForm" 102 102 + title={<Trans>Set new password</Trans>}> 103 103 + <Text> 104 104 + <Trans> 105 105 + You will receive an email with a "reset code." Enter that code here, 106 106 + then enter your new password. 107 107 + </Trans> 108 108 + </Text> 109 109 + 110 110 + <View> 111 111 + <TextField.Label>Reset code</TextField.Label> 112 112 + <TextField.Root> 113 113 + <TextField.Icon icon={Ticket} /> 114 114 + <TextField.Input 115 115 + testID="resetCodeInput" 116 116 + label={_(msg`Looks like XXXXX-XXXXX`)} 117 117 + autoCapitalize="none" 118 118 + autoCorrect={false} 119 119 + autoComplete="off" 120 120 + value={resetCode} 121 121 + onChangeText={setResetCode} 122 122 + onFocus={() => setError('')} 123 123 + onBlur={onBlur} 124 124 + editable={!isProcessing} 125 125 + accessibilityHint={_( 126 126 + msg`Input code sent to your email for password reset`, 127 127 + )} 128 128 + /> 129 129 + </TextField.Root> 130 130 + </View> 131 131 + 132 132 + <View> 133 133 + <TextField.Label>New password</TextField.Label> 134 134 + <TextField.Root> 135 135 + <TextField.Icon icon={Lock} /> 136 136 + <TextField.Input 137 137 + testID="newPasswordInput" 138 138 + label={_(msg`Enter a password`)} 139 139 + autoCapitalize="none" 140 140 + autoCorrect={false} 141 141 + autoComplete="password" 142 142 + returnKeyType="done" 143 143 + secureTextEntry={true} 144 144 + textContentType="password" 145 145 + clearButtonMode="while-editing" 146 146 + value={password} 147 147 + onChangeText={setPassword} 148 148 + onSubmitEditing={onPressNext} 149 149 + editable={!isProcessing} 150 150 + accessibilityHint={_(msg`Input new password`)} 151 151 + /> 152 152 + </TextField.Root> 153 153 + </View> 154 154 + <FormError error={error} /> 155 155 + <View style={[a.flex_row, a.align_center]}> 156 156 + <Button 157 157 + label={_(msg`Back`)} 158 158 + variant="solid" 159 159 + color="secondary" 160 160 + size="small" 161 161 + onPress={onPressBack}> 162 162 + <ButtonText> 163 163 + <Trans>Back</Trans> 164 164 + </ButtonText> 165 165 + </Button> 166 166 + <View style={a.flex_1} /> 167 167 + {isProcessing ? ( 168 168 + <ActivityIndicator /> 169 169 + ) : ( 170 170 + <Button 171 171 + label={_(msg`Next`)} 172 172 + variant="solid" 173 173 + color="primary" 174 174 + size="small" 175 175 + onPress={onPressNext}> 176 176 + <ButtonText> 177 177 + <Trans>Next</Trans> 178 178 + </ButtonText> 179 179 + </Button> 180 180 + )} 181 181 + {isProcessing ? ( 182 182 + <Text style={[t.atoms.text_contrast_high, a.pl_md]}> 183 183 + <Trans>Updating...</Trans> 184 184 + </Text> 185 185 + ) : undefined} 186 186 + </View> 187 187 + </FormContainer> 188 188 + ) 189 189 + }

+3 -3

src/screens/Login/index.tsx

··· 13 13 import {logger} from '#/logger' 14 14 import {atoms as a} from '#/alf' 15 15 import {ChooseAccountForm} from './ChooseAccountForm' 16 16 - import {ForgotPasswordForm} from '#/view/com/auth/login/ForgotPasswordForm' 17 17 - import {SetNewPasswordForm} from '#/view/com/auth/login/SetNewPasswordForm' 18 18 - import {PasswordUpdatedForm} from '#/view/com/auth/login/PasswordUpdatedForm' 16 16 + import {ForgotPasswordForm} from '#/screens/Login/ForgotPasswordForm' 17 17 + import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm' 18 18 + import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm' 19 19 import {LoginForm} from '#/screens/Login/LoginForm' 20 20 21 21 enum Forms {

-228

src/view/com/auth/login/ForgotPasswordForm.tsx

··· 1 1 - import React, {useState, useEffect} from 'react' 2 2 - import { 3 3 - ActivityIndicator, 4 4 - Keyboard, 5 5 - TextInput, 6 6 - TouchableOpacity, 7 7 - View, 8 8 - } from 'react-native' 9 9 - import { 10 10 - FontAwesomeIcon, 11 11 - FontAwesomeIconStyle, 12 12 - } from '@fortawesome/react-native-fontawesome' 13 13 - import {ComAtprotoServerDescribeServer} from '@atproto/api' 14 14 - import * as EmailValidator from 'email-validator' 15 15 - import {BskyAgent} from '@atproto/api' 16 16 - import {useAnalytics} from 'lib/analytics/analytics' 17 17 - import {Text} from '../../util/text/Text' 18 18 - import {s} from 'lib/styles' 19 19 - import {toNiceDomain} from 'lib/strings/url-helpers' 20 20 - import {isNetworkError} from 'lib/strings/errors' 21 21 - import {usePalette} from 'lib/hooks/usePalette' 22 22 - import {useTheme} from 'lib/ThemeContext' 23 23 - import {cleanError} from 'lib/strings/errors' 24 24 - import {logger} from '#/logger' 25 25 - import {Trans, msg} from '@lingui/macro' 26 26 - import {useLingui} from '@lingui/react' 27 27 - import {styles} from './styles' 28 28 - import {useDialogControl} from '#/components/Dialog' 29 29 - 30 30 - import {ServerInputDialog} from '../server-input' 31 31 - 32 32 - type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema 33 33 - 34 34 - export const ForgotPasswordForm = ({ 35 35 - error, 36 36 - serviceUrl, 37 37 - serviceDescription, 38 38 - setError, 39 39 - setServiceUrl, 40 40 - onPressBack, 41 41 - onEmailSent, 42 42 - }: { 43 43 - error: string 44 44 - serviceUrl: string 45 45 - serviceDescription: ServiceDescription | undefined 46 46 - setError: (v: string) => void 47 47 - setServiceUrl: (v: string) => void 48 48 - onPressBack: () => void 49 49 - onEmailSent: () => void 50 50 - }) => { 51 51 - const pal = usePalette('default') 52 52 - const theme = useTheme() 53 53 - const [isProcessing, setIsProcessing] = useState<boolean>(false) 54 54 - const [email, setEmail] = useState<string>('') 55 55 - const {screen} = useAnalytics() 56 56 - const {_} = useLingui() 57 57 - const serverInputControl = useDialogControl() 58 58 - 59 59 - useEffect(() => { 60 60 - screen('Signin:ForgotPassword') 61 61 - }, [screen]) 62 62 - 63 63 - const onPressSelectService = React.useCallback(() => { 64 64 - serverInputControl.open() 65 65 - Keyboard.dismiss() 66 66 - }, [serverInputControl]) 67 67 - 68 68 - const onPressNext = async () => { 69 69 - if (!EmailValidator.validate(email)) { 70 70 - return setError(_(msg`Your email appears to be invalid.`)) 71 71 - } 72 72 - 73 73 - setError('') 74 74 - setIsProcessing(true) 75 75 - 76 76 - try { 77 77 - const agent = new BskyAgent({service: serviceUrl}) 78 78 - await agent.com.atproto.server.requestPasswordReset({email}) 79 79 - onEmailSent() 80 80 - } catch (e: any) { 81 81 - const errMsg = e.toString() 82 82 - logger.warn('Failed to request password reset', {error: e}) 83 83 - setIsProcessing(false) 84 84 - if (isNetworkError(e)) { 85 85 - setError( 86 86 - _( 87 87 - msg`Unable to contact your service. Please check your Internet connection.`, 88 88 - ), 89 89 - ) 90 90 - } else { 91 91 - setError(cleanError(errMsg)) 92 92 - } 93 93 - } 94 94 - } 95 95 - 96 96 - return ( 97 97 - <> 98 98 - <View> 99 99 - <ServerInputDialog 100 100 - control={serverInputControl} 101 101 - onSelect={setServiceUrl} 102 102 - /> 103 103 - <Text type="title-lg" style={[pal.text, styles.screenTitle]}> 104 104 - <Trans>Reset password</Trans> 105 105 - </Text> 106 106 - <Text type="md" style={[pal.text, styles.instructions]}> 107 107 - <Trans> 108 108 - Enter the email you used to create your account. We'll send you a 109 109 - "reset code" so you can set a new password. 110 110 - </Trans> 111 111 - </Text> 112 112 - <View 113 113 - testID="forgotPasswordView" 114 114 - style={[pal.borderDark, pal.view, styles.group]}> 115 115 - <TouchableOpacity 116 116 - testID="forgotPasswordSelectServiceButton" 117 117 - style={[pal.borderDark, styles.groupContent, styles.noTopBorder]} 118 118 - onPress={onPressSelectService} 119 119 - accessibilityRole="button" 120 120 - accessibilityLabel={_(msg`Hosting provider`)} 121 121 - accessibilityHint={_( 122 122 - msg`Sets hosting provider for password reset`, 123 123 - )}> 124 124 - <FontAwesomeIcon 125 125 - icon="globe" 126 126 - style={[pal.textLight, styles.groupContentIcon]} 127 127 - /> 128 128 - <Text style={[pal.text, styles.textInput]} numberOfLines={1}> 129 129 - {toNiceDomain(serviceUrl)} 130 130 - </Text> 131 131 - <View style={[pal.btn, styles.textBtnFakeInnerBtn]}> 132 132 - <FontAwesomeIcon 133 133 - icon="pen" 134 134 - size={12} 135 135 - style={pal.text as FontAwesomeIconStyle} 136 136 - /> 137 137 - </View> 138 138 - </TouchableOpacity> 139 139 - <View style={[pal.borderDark, styles.groupContent]}> 140 140 - <FontAwesomeIcon 141 141 - icon="envelope" 142 142 - style={[pal.textLight, styles.groupContentIcon]} 143 143 - /> 144 144 - <TextInput 145 145 - testID="forgotPasswordEmail" 146 146 - style={[pal.text, styles.textInput]} 147 147 - placeholder={_(msg`Email address`)} 148 148 - placeholderTextColor={pal.colors.textLight} 149 149 - autoCapitalize="none" 150 150 - autoFocus 151 151 - autoCorrect={false} 152 152 - keyboardAppearance={theme.colorScheme} 153 153 - value={email} 154 154 - onChangeText={setEmail} 155 155 - editable={!isProcessing} 156 156 - accessibilityLabel={_(msg`Email`)} 157 157 - accessibilityHint={_(msg`Sets email for password reset`)} 158 158 - /> 159 159 - </View> 160 160 - </View> 161 161 - {error ? ( 162 162 - <View style={styles.error}> 163 163 - <View style={styles.errorIcon}> 164 164 - <FontAwesomeIcon icon="exclamation" style={s.white} size={10} /> 165 165 - </View> 166 166 - <View style={s.flex1}> 167 167 - <Text style={[s.white, s.bold]}>{error}</Text> 168 168 - </View> 169 169 - </View> 170 170 - ) : undefined} 171 171 - <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}> 172 172 - <TouchableOpacity onPress={onPressBack} accessibilityRole="button"> 173 173 - <Text type="xl" style={[pal.link, s.pl5]}> 174 174 - <Trans>Back</Trans> 175 175 - </Text> 176 176 - </TouchableOpacity> 177 177 - <View style={s.flex1} /> 178 178 - {!serviceDescription || isProcessing ? ( 179 179 - <ActivityIndicator /> 180 180 - ) : !email ? ( 181 181 - <Text type="xl-bold" style={[pal.link, s.pr5, styles.dimmed]}> 182 182 - <Trans>Next</Trans> 183 183 - </Text> 184 184 - ) : ( 185 185 - <TouchableOpacity 186 186 - testID="newPasswordButton" 187 187 - onPress={onPressNext} 188 188 - accessibilityRole="button" 189 189 - accessibilityLabel={_(msg`Go to next`)} 190 190 - accessibilityHint={_(msg`Navigates to the next screen`)}> 191 191 - <Text type="xl-bold" style={[pal.link, s.pr5]}> 192 192 - <Trans>Next</Trans> 193 193 - </Text> 194 194 - </TouchableOpacity> 195 195 - )} 196 196 - {!serviceDescription || isProcessing ? ( 197 197 - <Text type="xl" style={[pal.textLight, s.pl10]}> 198 198 - <Trans>Processing...</Trans> 199 199 - </Text> 200 200 - ) : undefined} 201 201 - </View> 202 202 - <View 203 203 - style={[ 204 204 - s.flexRow, 205 205 - s.alignCenter, 206 206 - s.mt20, 207 207 - s.mb20, 208 208 - pal.border, 209 209 - s.borderBottom1, 210 210 - {alignSelf: 'center', width: '90%'}, 211 211 - ]} 212 212 - /> 213 213 - <View style={[s.flexRow, s.justifyCenter]}> 214 214 - <TouchableOpacity 215 215 - testID="skipSendEmailButton" 216 216 - onPress={onEmailSent} 217 217 - accessibilityRole="button" 218 218 - accessibilityLabel={_(msg`Go to next`)} 219 219 - accessibilityHint={_(msg`Navigates to the next screen`)}> 220 220 - <Text type="xl" style={[pal.link, s.pr5]}> 221 221 - <Trans>Already have a code?</Trans> 222 222 - </Text> 223 223 - </TouchableOpacity> 224 224 - </View> 225 225 - </View> 226 226 - </> 227 227 - ) 228 228 - }

-48

src/view/com/auth/login/PasswordUpdatedForm.tsx

··· 1 1 - import React, {useEffect} from 'react' 2 2 - import {TouchableOpacity, View} from 'react-native' 3 3 - import {useAnalytics} from 'lib/analytics/analytics' 4 4 - import {Text} from '../../util/text/Text' 5 5 - import {s} from 'lib/styles' 6 6 - import {usePalette} from 'lib/hooks/usePalette' 7 7 - import {styles} from './styles' 8 8 - import {msg, Trans} from '@lingui/macro' 9 9 - import {useLingui} from '@lingui/react' 10 10 - 11 11 - export const PasswordUpdatedForm = ({ 12 12 - onPressNext, 13 13 - }: { 14 14 - onPressNext: () => void 15 15 - }) => { 16 16 - const {screen} = useAnalytics() 17 17 - const pal = usePalette('default') 18 18 - const {_} = useLingui() 19 19 - 20 20 - useEffect(() => { 21 21 - screen('Signin:PasswordUpdatedForm') 22 22 - }, [screen]) 23 23 - 24 24 - return ( 25 25 - <> 26 26 - <View> 27 27 - <Text type="title-lg" style={[pal.text, styles.screenTitle]}> 28 28 - <Trans>Password updated!</Trans> 29 29 - </Text> 30 30 - <Text type="lg" style={[pal.text, styles.instructions]}> 31 31 - <Trans>You can now sign in with your new password.</Trans> 32 32 - </Text> 33 33 - <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}> 34 34 - <View style={s.flex1} /> 35 35 - <TouchableOpacity 36 36 - onPress={onPressNext} 37 37 - accessibilityRole="button" 38 38 - accessibilityLabel={_(msg`Close alert`)} 39 39 - accessibilityHint={_(msg`Closes password update alert`)}> 40 40 - <Text type="xl-bold" style={[pal.link, s.pr5]}> 41 41 - <Trans>Okay</Trans> 42 42 - </Text> 43 43 - </TouchableOpacity> 44 44 - </View> 45 45 - </View> 46 46 - </> 47 47 - ) 48 48 - }

-211

src/view/com/auth/login/SetNewPasswordForm.tsx

··· 1 1 - import React, {useState, useEffect} from 'react' 2 2 - import { 3 3 - ActivityIndicator, 4 4 - TextInput, 5 5 - TouchableOpacity, 6 6 - View, 7 7 - } from 'react-native' 8 8 - import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 9 9 - import {BskyAgent} from '@atproto/api' 10 10 - import {useAnalytics} from 'lib/analytics/analytics' 11 11 - import {Text} from '../../util/text/Text' 12 12 - import {s} from 'lib/styles' 13 13 - import {isNetworkError} from 'lib/strings/errors' 14 14 - import {usePalette} from 'lib/hooks/usePalette' 15 15 - import {useTheme} from 'lib/ThemeContext' 16 16 - import {cleanError} from 'lib/strings/errors' 17 17 - import {checkAndFormatResetCode} from 'lib/strings/password' 18 18 - import {logger} from '#/logger' 19 19 - import {styles} from './styles' 20 20 - import {Trans, msg} from '@lingui/macro' 21 21 - import {useLingui} from '@lingui/react' 22 22 - 23 23 - export const SetNewPasswordForm = ({ 24 24 - error, 25 25 - serviceUrl, 26 26 - setError, 27 27 - onPressBack, 28 28 - onPasswordSet, 29 29 - }: { 30 30 - error: string 31 31 - serviceUrl: string 32 32 - setError: (v: string) => void 33 33 - onPressBack: () => void 34 34 - onPasswordSet: () => void 35 35 - }) => { 36 36 - const pal = usePalette('default') 37 37 - const theme = useTheme() 38 38 - const {screen} = useAnalytics() 39 39 - const {_} = useLingui() 40 40 - 41 41 - useEffect(() => { 42 42 - screen('Signin:SetNewPasswordForm') 43 43 - }, [screen]) 44 44 - 45 45 - const [isProcessing, setIsProcessing] = useState<boolean>(false) 46 46 - const [resetCode, setResetCode] = useState<string>('') 47 47 - const [password, setPassword] = useState<string>('') 48 48 - 49 49 - const onPressNext = async () => { 50 50 - // Check that the code is correct. We do this again just incase the user enters the code after their pw and we 51 51 - // don't get to call onBlur first 52 52 - const formattedCode = checkAndFormatResetCode(resetCode) 53 53 - // TODO Better password strength check 54 54 - if (!formattedCode || !password) { 55 55 - setError( 56 56 - _( 57 57 - msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`, 58 58 - ), 59 59 - ) 60 60 - return 61 61 - } 62 62 - 63 63 - setError('') 64 64 - setIsProcessing(true) 65 65 - 66 66 - try { 67 67 - const agent = new BskyAgent({service: serviceUrl}) 68 68 - await agent.com.atproto.server.resetPassword({ 69 69 - token: formattedCode, 70 70 - password, 71 71 - }) 72 72 - onPasswordSet() 73 73 - } catch (e: any) { 74 74 - const errMsg = e.toString() 75 75 - logger.warn('Failed to set new password', {error: e}) 76 76 - setIsProcessing(false) 77 77 - if (isNetworkError(e)) { 78 78 - setError( 79 79 - 'Unable to contact your service. Please check your Internet connection.', 80 80 - ) 81 81 - } else { 82 82 - setError(cleanError(errMsg)) 83 83 - } 84 84 - } 85 85 - } 86 86 - 87 87 - const onBlur = () => { 88 88 - const formattedCode = checkAndFormatResetCode(resetCode) 89 89 - if (!formattedCode) { 90 90 - setError( 91 91 - _( 92 92 - msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`, 93 93 - ), 94 94 - ) 95 95 - return 96 96 - } 97 97 - setResetCode(formattedCode) 98 98 - } 99 99 - 100 100 - return ( 101 101 - <> 102 102 - <View> 103 103 - <Text type="title-lg" style={[pal.text, styles.screenTitle]}> 104 104 - <Trans>Set new password</Trans> 105 105 - </Text> 106 106 - <Text type="lg" style={[pal.text, styles.instructions]}> 107 107 - <Trans> 108 108 - You will receive an email with a "reset code." Enter that code here, 109 109 - then enter your new password. 110 110 - </Trans> 111 111 - </Text> 112 112 - <View 113 113 - testID="newPasswordView" 114 114 - style={[pal.view, pal.borderDark, styles.group]}> 115 115 - <View 116 116 - style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}> 117 117 - <FontAwesomeIcon 118 118 - icon="ticket" 119 119 - style={[pal.textLight, styles.groupContentIcon]} 120 120 - /> 121 121 - <TextInput 122 122 - testID="resetCodeInput" 123 123 - style={[pal.text, styles.textInput]} 124 124 - placeholder={_(msg`Reset code`)} 125 125 - placeholderTextColor={pal.colors.textLight} 126 126 - autoCapitalize="none" 127 127 - autoCorrect={false} 128 128 - keyboardAppearance={theme.colorScheme} 129 129 - autoComplete="off" 130 130 - value={resetCode} 131 131 - onChangeText={setResetCode} 132 132 - onFocus={() => setError('')} 133 133 - onBlur={onBlur} 134 134 - editable={!isProcessing} 135 135 - accessible={true} 136 136 - accessibilityLabel={_(msg`Reset code`)} 137 137 - accessibilityHint={_( 138 138 - msg`Input code sent to your email for password reset`, 139 139 - )} 140 140 - /> 141 141 - </View> 142 142 - <View style={[pal.borderDark, styles.groupContent]}> 143 143 - <FontAwesomeIcon 144 144 - icon="lock" 145 145 - style={[pal.textLight, styles.groupContentIcon]} 146 146 - /> 147 147 - <TextInput 148 148 - testID="newPasswordInput" 149 149 - style={[pal.text, styles.textInput]} 150 150 - placeholder={_(msg`New password`)} 151 151 - placeholderTextColor={pal.colors.textLight} 152 152 - autoCapitalize="none" 153 153 - autoCorrect={false} 154 154 - autoComplete="new-password" 155 155 - keyboardAppearance={theme.colorScheme} 156 156 - secureTextEntry 157 157 - value={password} 158 158 - onChangeText={setPassword} 159 159 - editable={!isProcessing} 160 160 - accessible={true} 161 161 - accessibilityLabel={_(msg`Password`)} 162 162 - accessibilityHint={_(msg`Input new password`)} 163 163 - /> 164 164 - </View> 165 165 - </View> 166 166 - {error ? ( 167 167 - <View style={styles.error}> 168 168 - <View style={styles.errorIcon}> 169 169 - <FontAwesomeIcon icon="exclamation" style={s.white} size={10} /> 170 170 - </View> 171 171 - <View style={s.flex1}> 172 172 - <Text style={[s.white, s.bold]}>{error}</Text> 173 173 - </View> 174 174 - </View> 175 175 - ) : undefined} 176 176 - <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}> 177 177 - <TouchableOpacity onPress={onPressBack} accessibilityRole="button"> 178 178 - <Text type="xl" style={[pal.link, s.pl5]}> 179 179 - <Trans>Back</Trans> 180 180 - </Text> 181 181 - </TouchableOpacity> 182 182 - <View style={s.flex1} /> 183 183 - {isProcessing ? ( 184 184 - <ActivityIndicator /> 185 185 - ) : !resetCode || !password ? ( 186 186 - <Text type="xl-bold" style={[pal.link, s.pr5, styles.dimmed]}> 187 187 - <Trans>Next</Trans> 188 188 - </Text> 189 189 - ) : ( 190 190 - <TouchableOpacity 191 191 - testID="setNewPasswordButton" 192 192 - // Check the code before running the callback 193 193 - onPress={onPressNext} 194 194 - accessibilityRole="button" 195 195 - accessibilityLabel={_(msg`Go to next`)} 196 196 - accessibilityHint={_(msg`Navigates to the next screen`)}> 197 197 - <Text type="xl-bold" style={[pal.link, s.pr5]}> 198 198 - <Trans>Next</Trans> 199 199 - </Text> 200 200 - </TouchableOpacity> 201 201 - )} 202 202 - {isProcessing ? ( 203 203 - <Text type="xl" style={[pal.textLight, s.pl10]}> 204 204 - <Trans>Updating...</Trans> 205 205 - </Text> 206 206 - ) : undefined} 207 207 - </View> 208 208 - </View> 209 209 - </> 210 210 - ) 211 211 - }

-118

src/view/com/auth/login/styles.ts

··· 1 1 - import {StyleSheet} from 'react-native' 2 2 - import {colors} from 'lib/styles' 3 3 - import {isWeb} from '#/platform/detection' 4 4 - 5 5 - export const styles = StyleSheet.create({ 6 6 - screenTitle: { 7 7 - marginBottom: 10, 8 8 - marginHorizontal: 20, 9 9 - }, 10 10 - instructions: { 11 11 - marginBottom: 20, 12 12 - marginHorizontal: 20, 13 13 - }, 14 14 - group: { 15 15 - borderWidth: 1, 16 16 - borderRadius: 10, 17 17 - marginBottom: 20, 18 18 - marginHorizontal: 20, 19 19 - }, 20 20 - groupLabel: { 21 21 - paddingHorizontal: 20, 22 22 - paddingBottom: 5, 23 23 - }, 24 24 - groupContent: { 25 25 - borderTopWidth: 1, 26 26 - flexDirection: 'row', 27 27 - alignItems: 'center', 28 28 - }, 29 29 - noTopBorder: { 30 30 - borderTopWidth: 0, 31 31 - }, 32 32 - groupContentIcon: { 33 33 - marginLeft: 10, 34 34 - }, 35 35 - account: { 36 36 - borderTopWidth: 1, 37 37 - paddingHorizontal: 20, 38 38 - paddingVertical: 4, 39 39 - }, 40 40 - accountLast: { 41 41 - borderBottomWidth: 1, 42 42 - marginBottom: 20, 43 43 - paddingVertical: 8, 44 44 - }, 45 45 - textInput: { 46 46 - flex: 1, 47 47 - width: '100%', 48 48 - paddingVertical: 10, 49 49 - paddingHorizontal: 12, 50 50 - fontSize: 17, 51 51 - letterSpacing: 0.25, 52 52 - fontWeight: '400', 53 53 - borderRadius: 10, 54 54 - }, 55 55 - textInputInnerBtn: { 56 56 - flexDirection: 'row', 57 57 - alignItems: 'center', 58 58 - paddingVertical: 6, 59 59 - paddingHorizontal: 8, 60 60 - marginHorizontal: 6, 61 61 - }, 62 62 - textBtn: { 63 63 - flexDirection: 'row', 64 64 - flex: 1, 65 65 - alignItems: 'center', 66 66 - }, 67 67 - textBtnLabel: { 68 68 - flex: 1, 69 69 - paddingVertical: 10, 70 70 - paddingHorizontal: 12, 71 71 - }, 72 72 - textBtnFakeInnerBtn: { 73 73 - flexDirection: 'row', 74 74 - alignItems: 'center', 75 75 - borderRadius: 6, 76 76 - paddingVertical: 6, 77 77 - paddingHorizontal: 8, 78 78 - marginHorizontal: 6, 79 79 - }, 80 80 - accountText: { 81 81 - flex: 1, 82 82 - flexDirection: 'row', 83 83 - alignItems: 'baseline', 84 84 - paddingVertical: 10, 85 85 - }, 86 86 - accountTextOther: { 87 87 - paddingLeft: 12, 88 88 - }, 89 89 - error: { 90 90 - backgroundColor: colors.red4, 91 91 - flexDirection: 'row', 92 92 - alignItems: 'center', 93 93 - marginTop: -5, 94 94 - marginHorizontal: 20, 95 95 - marginBottom: 15, 96 96 - borderRadius: 8, 97 97 - paddingHorizontal: 8, 98 98 - paddingVertical: 8, 99 99 - }, 100 100 - errorIcon: { 101 101 - borderWidth: 1, 102 102 - borderColor: colors.white, 103 103 - color: colors.white, 104 104 - borderRadius: 30, 105 105 - width: 16, 106 106 - height: 16, 107 107 - alignItems: 'center', 108 108 - justifyContent: 'center', 109 109 - marginRight: 5, 110 110 - }, 111 111 - dimmed: {opacity: 0.5}, 112 112 - 113 113 - maxHeight: { 114 114 - // @ts-ignore web only -prf 115 115 - maxHeight: isWeb ? '100vh' : undefined, 116 116 - height: !isWeb ? '100%' : undefined, 117 117 - }, 118 118 - })