From dd73fc218366a2ad66188e19079fe2f0afeab1d7 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 27 Sep 2022 08:59:15 -0500
Subject: [PATCH] Add logout and tweak signin screen
---
src/view/index.ts | 2 +
src/view/screens/Login.tsx | 70 +++++++++++++++++++++++--
src/view/shell/mobile/accounts-menu.tsx | 14 +++++
src/view/shell/mobile/index.tsx | 1 +
4 files changed, 83 insertions(+), 4 deletions(-)
diff --git a/src/view/index.ts b/src/view/index.ts
index d15fc6c2..fb26844c 100644
--- a/src/view/index.ts
+++ b/src/view/index.ts
@@ -3,6 +3,7 @@ import {library} from '@fortawesome/fontawesome-svg-core'
import {faAngleLeft} from '@fortawesome/free-solid-svg-icons/faAngleLeft'
import {faAngleRight} from '@fortawesome/free-solid-svg-icons/faAngleRight'
import {faArrowLeft} from '@fortawesome/free-solid-svg-icons/faArrowLeft'
+import {faArrowRightFromBracket} from '@fortawesome/free-solid-svg-icons'
import {faArrowUpFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowUpFromBracket'
import {faArrowUpRightFromSquare} from '@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare'
import {faArrowsRotate} from '@fortawesome/free-solid-svg-icons/faArrowsRotate'
@@ -38,6 +39,7 @@ export function setup() {
faAngleLeft,
faAngleRight,
faArrowLeft,
+ faArrowRightFromBracket,
faArrowUpFromBracket,
faArrowUpRightFromSquare,
faArrowsRotate,
diff --git a/src/view/screens/Login.tsx b/src/view/screens/Login.tsx
index 110e23ff..73a49fb8 100644
--- a/src/view/screens/Login.tsx
+++ b/src/view/screens/Login.tsx
@@ -9,7 +9,7 @@ import {
View,
useWindowDimensions,
} from 'react-native'
-import Svg, {Line} from 'react-native-svg'
+import Svg, {Circle, Line, Text as SvgText} from 'react-native-svg'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {observer} from 'mobx-react-lite'
import {s, colors} from '../lib/styles'
@@ -30,6 +30,61 @@ const SigninOrCreateAccount = ({
return (
<>
<View style={styles.hero}>
+ <View style={styles.logo}>
+ <Svg width="100" height="100">
+ <Circle
+ cx="50"
+ cy="50"
+ r="46"
+ fill="none"
+ stroke="white"
+ strokeWidth={2}
+ />
+ <Line
+ stroke="white"
+ strokeWidth={1}
+ x1="30"
+ x2="30"
+ y1="0"
+ y2="100"
+ />
+ <Line
+ stroke="white"
+ strokeWidth={1}
+ x1="74"
+ x2="74"
+ y1="0"
+ y2="100"
+ />
+ <Line
+ stroke="white"
+ strokeWidth={1}
+ x1="0"
+ x2="100"
+ y1="22"
+ y2="22"
+ />
+ <Line
+ stroke="white"
+ strokeWidth={1}
+ x1="0"
+ x2="100"
+ y1="74"
+ y2="74"
+ />
+ <SvgText
+ fill="none"
+ stroke="white"
+ strokeWidth={2}
+ fontSize="60"
+ fontWeight="bold"
+ x="52"
+ y="70"
+ textAnchor="middle">
+ B
+ </SvgText>
+ </Svg>
+ </View>
<Text style={styles.title}>Bluesky</Text>
<Text style={styles.subtitle}>[ private beta ]</Text>
</View>
@@ -85,6 +140,7 @@ const Signin = ({onPressBack}: {onPressBack: () => void}) => {
} catch (e: any) {
const errMsg = e.toString()
console.log(e)
+ setIsProcessing(false)
if (errMsg.includes('Authentication Required')) {
setError('Invalid username or password')
} else if (errMsg.includes('Network request failed')) {
@@ -94,14 +150,12 @@ const Signin = ({onPressBack}: {onPressBack: () => void}) => {
} else {
setError(errMsg.replace(/^Error:/, ''))
}
- } finally {
- setIsProcessing(false)
}
}
return (
<KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
- <View style={styles.hero}>
+ <View style={styles.smallHero}>
<Text style={styles.title}>Bluesky</Text>
<Text style={styles.subtitle}>[ private beta ]</Text>
</View>
@@ -199,9 +253,17 @@ const styles = StyleSheet.create({
flex: 1,
},
hero: {
+ flex: 2,
+ justifyContent: 'center',
+ },
+ smallHero: {
flex: 1,
justifyContent: 'center',
},
+ logo: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ },
title: {
textAlign: 'center',
color: colors.white,
diff --git a/src/view/shell/mobile/accounts-menu.tsx b/src/view/shell/mobile/accounts-menu.tsx
index fb8b9682..b4b53860 100644
--- a/src/view/shell/mobile/accounts-menu.tsx
+++ b/src/view/shell/mobile/accounts-menu.tsx
@@ -14,8 +14,10 @@ import {s, colors} from '../../lib/styles'
export function createAccountsMenu({
debug_onPressItem,
+ onPressLogout,
}: {
debug_onPressItem: () => void
+ onPressLogout: () => void
}): RootSiblings {
const onPressItem = (_index: number) => {
sibling.destroy()
@@ -41,6 +43,18 @@ export function createAccountsMenu({
<FontAwesomeIcon style={styles.icon} icon="plus" />
<Text style={styles.label}>New Account</Text>
</TouchableOpacity>
+ <TouchableOpacity
+ style={[styles.menuItem, styles.menuItemBorder]}
+ onPress={() => {
+ sibling.destroy()
+ onPressLogout()
+ }}>
+ <FontAwesomeIcon
+ style={styles.icon}
+ icon="arrow-right-from-bracket"
+ />
+ <Text style={styles.label}>Log out</Text>
+ </TouchableOpacity>
</View>
</>
),
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index 2a0a96a2..2e0e1b36 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -117,6 +117,7 @@ export const MobileShell: React.FC = observer(() => {
const onPressAvi = () =>
createAccountsMenu({
debug_onPressItem: () => store.nav.navigate('/profile/alice.test'),
+ onPressLogout: () => store.session.logout(),
})
const onPressLocation = () => setLocationMenuActive(true)
const onPressEllipsis = () => createLocationMenu()