forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Tweak verify email dialog (#5555)
* Add intent/verify-email to go server
* Tweak verify intent dialog
authored by
Eric Bailey
and committed by
GitHub
35698731
f251a43d
+43
-43
+43
-43
src/components/intents/VerifyEmailIntentDialog.tsx
+43
-43
src/components/intents/VerifyEmailIntentDialog.tsx
···
3
3
import {msg, Trans} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
6
-
import {useAgent, useSession} from 'state/session'
7
-
import {atoms as a} from '#/alf'
8
-
import {Button, ButtonText} from '#/components/Button'
6
+
import {isNative} from '#/platform/detection'
7
+
import {useAgent, useSession} from '#/state/session'
8
+
import {atoms as a, useBreakpoints,useTheme} from '#/alf'
9
+
import {Button, ButtonIcon,ButtonText} from '#/components/Button'
9
10
import * as Dialog from '#/components/Dialog'
10
11
import {DialogControlProps} from '#/components/Dialog'
12
+
import {Divider} from '#/components/Divider'
13
+
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Resend} from '#/components/icons/ArrowRotateCounterClockwise'
11
14
import {useIntentDialogs} from '#/components/intents/IntentDialogs'
12
15
import {Loader} from '#/components/Loader'
13
16
import {Text} from '#/components/Typography'
···
23
26
)
24
27
}
25
28
26
-
function Inner({control}: {control: DialogControlProps}) {
29
+
function Inner({}: {control: DialogControlProps}) {
30
+
const t = useTheme()
31
+
const {gtMobile} = useBreakpoints()
27
32
const {_} = useLingui()
28
33
const {verifyEmailState: state} = useIntentDialogs()
29
34
const [status, setStatus] = React.useState<
···
58
63
}
59
64
60
65
return (
61
-
<Dialog.ScrollableInner label={_(msg`Verify email dialog`)}>
62
-
<Dialog.Close />
66
+
<Dialog.ScrollableInner
67
+
label={_(msg`Verify email dialog`)}
68
+
style={[
69
+
gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
70
+
]}>
63
71
<View style={[a.gap_xl]}>
64
72
{status === 'loading' ? (
65
73
<View style={[a.py_2xl, a.align_center, a.justify_center]}>
66
-
<Loader size="xl" />
74
+
<Loader size="xl" fill={t.atoms.text_contrast_low.color} />
67
75
</View>
68
76
) : status === 'success' ? (
69
-
<>
70
-
<Text style={[a.font_bold, a.text_2xl]}>
77
+
<View style={[a.gap_sm, isNative && a.pb_xl]}>
78
+
<Text style={[a.font_heavy, a.text_2xl]}>
71
79
<Trans>Email Verified</Trans>
72
80
</Text>
73
-
<Text style={[a.text_md, a.leading_tight]}>
81
+
<Text style={[a.text_md, a.leading_snug]}>
74
82
<Trans>
75
-
Thanks, you have successfully verified your email address.
83
+
Thanks, you have successfully verified your email address. You
84
+
can close this dialog.
76
85
</Trans>
77
86
</Text>
78
-
</>
87
+
</View>
79
88
) : status === 'failure' ? (
80
-
<>
81
-
<Text style={[a.font_bold, a.text_2xl]}>
89
+
<View style={[a.gap_sm]}>
90
+
<Text style={[a.font_heavy, a.text_2xl]}>
82
91
<Trans>Invalid Verification Code</Trans>
83
92
</Text>
84
-
<Text style={[a.text_md, a.leading_tight]}>
93
+
<Text style={[a.text_md, a.leading_snug]}>
85
94
<Trans>
86
95
The verification code you have provided is invalid. Please make
87
96
sure that you have used the correct verification link or request
88
97
a new one.
89
98
</Trans>
90
99
</Text>
91
-
</>
100
+
</View>
92
101
) : (
93
-
<>
94
-
<Text style={[a.font_bold, a.text_2xl]}>
102
+
<View style={[a.gap_sm, isNative && a.pb_xl]}>
103
+
<Text style={[a.font_heavy, a.text_2xl]}>
95
104
<Trans>Email Resent</Trans>
96
105
</Text>
97
-
<Text style={[a.text_md, a.leading_tight]}>
106
+
<Text style={[a.text_md, a.leading_snug]}>
98
107
<Trans>
99
108
We have sent another verification email to{' '}
100
109
<Text style={[a.text_md, a.font_bold]}>
···
103
112
.
104
113
</Trans>
105
114
</Text>
106
-
</>
115
+
</View>
107
116
)}
108
-
{status !== 'loading' ? (
109
-
<View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
117
+
118
+
{status === 'failure' && (
119
+
<>
120
+
<Divider />
110
121
<Button
111
-
label={_(msg`Close`)}
112
-
onPress={() => control.close()}
122
+
label={_(msg`Resend Verification Email`)}
123
+
onPress={onPressResendEmail}
113
124
variant="solid"
114
-
color={status === 'failure' ? 'secondary' : 'primary'}
125
+
color="secondary_inverted"
115
126
size="large"
116
-
style={{marginLeft: 'auto'}}>
127
+
disabled={sending}>
128
+
<ButtonIcon icon={sending ? Loader : Resend} position="left" />
117
129
<ButtonText>
118
-
<Trans>Close</Trans>
130
+
<Trans>Resend Email</Trans>
119
131
</ButtonText>
120
132
</Button>
121
-
{status === 'failure' ? (
122
-
<Button
123
-
label={_(msg`Resend Verification Email`)}
124
-
onPress={onPressResendEmail}
125
-
variant="solid"
126
-
color="primary"
127
-
size="large"
128
-
disabled={sending}>
129
-
<ButtonText>
130
-
<Trans>Resend Email</Trans>
131
-
</ButtonText>
132
-
{sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
133
-
</Button>
134
-
) : null}
135
-
</View>
136
-
) : null}
133
+
</>
134
+
)}
137
135
</View>
136
+
137
+
<Dialog.Close />
138
138
</Dialog.ScrollableInner>
139
139
)
140
140
}