1 files changed, 44 insertions, 0 deletions
diff --git a/src/view/com/auth/create/Step3.tsx b/src/view/com/auth/create/Step3.tsx
new file mode 100644
index 000000000..652591171
--- /dev/null
+++ b/src/view/com/auth/create/Step3.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {CreateAccountModel} from 'state/models/ui/create-account'
+import {Text} from 'view/com/util/text/Text'
+import {StepHeader} from './StepHeader'
+import {s} from 'lib/styles'
+import {TextInput} from '../util/TextInput'
+import {createFullHandle} from 'lib/strings/handles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
+
+export const Step3 = observer(({model}: {model: CreateAccountModel}) => {
+  const pal = usePalette('default')
+  return (
+    <View>
+      <StepHeader step="3" title="Your user handle" />
+      <View style={s.pb10}>
+        <TextInput
+          icon="at"
+          placeholder="eg alice"
+          value={model.handle}
+          editable
+          onChange={model.setHandle}
+        />
+        <Text type="lg" style={[pal.text, s.pl5, s.pt10]}>
+          Your full handle will be{' '}
+          <Text type="lg-bold" style={pal.text}>
+            @{createFullHandle(model.handle, model.userDomain)}
+          </Text>
+        </Text>
+      </View>
+      {model.error ? (
+        <ErrorMessage message={model.error} style={styles.error} />
+      ) : undefined}
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  error: {
+    borderRadius: 6,
+  },
+})