stream.place
Live video on the AT Protocol
Merge pull request #546 from streamplace/natb/login-tweak
login: few small tweaks
+15
-176
+15
-8
js/app/components/login/login.tsx
+15
-8
js/app/components/login/login.tsx
···
40
40
if (handle.startsWith("@")) clean = handle.slice(1);
41
41
dispatch(login(clean));
42
42
};
43
+
const onSignup = () => {
44
+
dispatch(login("https://bsky.social"));
45
+
};
43
46
const onEnterPress = (e: any) => {
44
47
if (e.nativeEvent.key === "Enter") {
45
48
submit();
···
141
144
</Text>
142
145
<Input
143
146
id="pdsUrl"
147
+
placeholder="example.bsky.social"
144
148
value={handle}
145
149
onChangeText={(text) =>
146
150
setHandle(
···
158
162
keyboardType="url"
159
163
/>
160
164
</YStack>
161
-
<XStack justifyContent="space-between">
162
-
<Button
163
-
onPress={() => navigation.navigate("Signup")}
164
-
backgroundColor="$gray3"
165
-
color="$color"
166
-
>
167
-
Sign Up
168
-
</Button>
165
+
<XStack justifyContent="flex-end" gap="$4">
166
+
{!loginState.loading && (
167
+
<Button
168
+
onPress={() => onSignup()}
169
+
variant="outlined"
170
+
hoverStyle={{ backgroundColor: "$color4" }}
171
+
borderWidth={0}
172
+
>
173
+
Sign Up on Bluesky
174
+
</Button>
175
+
)}
169
176
<Form.Trigger asChild>
170
177
<Button
171
178
px="$6"
-154
js/app/components/login/signup.tsx
-154
js/app/components/login/signup.tsx
···
1
-
import { useNavigation } from "@react-navigation/native";
2
-
import { CircleHelp } from "@tamagui/lucide-icons";
3
-
import { useToastController } from "@tamagui/toast";
4
-
import Loading from "components/loading/loading";
5
-
import {
6
-
login,
7
-
selectIsReady,
8
-
selectLogin,
9
-
selectUserProfile,
10
-
} from "features/bluesky/blueskySlice";
11
-
import { useEffect, useState } from "react";
12
-
import { KeyboardAvoidingView, Linking, Pressable } from "react-native";
13
-
import { useAppDispatch, useAppSelector } from "store/hooks";
14
-
import {
15
-
Button,
16
-
Form,
17
-
Input,
18
-
Spinner,
19
-
Text,
20
-
View,
21
-
XStack,
22
-
YStack,
23
-
} from "tamagui";
24
-
25
-
export default function SignUp() {
26
-
const dispatch = useAppDispatch();
27
-
const userProfile = useAppSelector(selectUserProfile);
28
-
const loginState = useAppSelector(selectLogin);
29
-
const [pds, setPDS] = useState<string>("https://bsky.social");
30
-
const isReady = useAppSelector(selectIsReady);
31
-
const toast = useToastController();
32
-
const navigation = useNavigation();
33
-
34
-
const onSubmit = () => {
35
-
let thisPds = pds;
36
-
if (thisPds === undefined) {
37
-
thisPds = "https://bsky.social";
38
-
}
39
-
dispatch(login(thisPds));
40
-
};
41
-
42
-
const onEnterPress = (e: any) => {
43
-
if (e.nativeEvent.key === "Enter") {
44
-
onSubmit();
45
-
}
46
-
};
47
-
48
-
useEffect(() => {
49
-
if (loginState?.error) {
50
-
toast.show("Login error", {
51
-
message: loginState.error,
52
-
});
53
-
}
54
-
}, [loginState?.error]);
55
-
56
-
if (!isReady) {
57
-
return (
58
-
<View f={1} jc="center" ai="stretch" gap="$3">
59
-
<Loading />
60
-
</View>
61
-
);
62
-
}
63
-
64
-
if (userProfile) {
65
-
// navigate to /login
66
-
navigation.navigate("Login");
67
-
return (
68
-
<View f={1} jc="center" ai="stretch" gap="$3">
69
-
<Loading />
70
-
</View>
71
-
);
72
-
}
73
-
74
-
return (
75
-
<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
76
-
<Form flex={1} onSubmit={onSubmit}>
77
-
<View
78
-
f={1}
79
-
jc="center"
80
-
ai="center"
81
-
padding="$4"
82
-
width="100%"
83
-
marginHorizontal="auto"
84
-
>
85
-
<YStack
86
-
px="$6"
87
-
py="$6"
88
-
br="$4"
89
-
backgroundColor="$color2"
90
-
width="100%"
91
-
maxWidth={600}
92
-
gap="$2"
93
-
>
94
-
<Text fontSize="$9" fontWeight="200">
95
-
Sign up
96
-
</Text>
97
-
<View flexWrap="wrap" flexDirection="row" gap="$1.5">
98
-
<Text color="$color11">
99
-
We'll redirect you to your chosen PDS
100
-
</Text>
101
-
<Pressable
102
-
onPress={() => {
103
-
const u = new URL(
104
-
"https://atproto.academy/docs/glossary#pds-personal-data-server",
105
-
);
106
-
Linking.openURL(u.toString());
107
-
}}
108
-
>
109
-
<CircleHelp size={18} color="lightskyblue" />
110
-
</Pressable>{" "}
111
-
<Text color="$color11">to sign up.</Text>
112
-
<Text color="$color11">
113
-
Then, log in with the account you just created.
114
-
</Text>
115
-
</View>
116
-
<YStack gap="$2" py="$4">
117
-
<Text htmlFor="pdsUrl" color="$color11">
118
-
PDS URL
119
-
</Text>
120
-
<Input
121
-
id="pdsUrl"
122
-
value={pds}
123
-
onChangeText={setPDS}
124
-
backgroundColor="$color2"
125
-
onSubmitEditing={onEnterPress}
126
-
/>
127
-
</YStack>
128
-
129
-
<XStack justifyContent="space-between">
130
-
<Button
131
-
onPress={() => navigation.navigate("Login")}
132
-
backgroundColor="$gray3"
133
-
color="$color"
134
-
>
135
-
Log In
136
-
</Button>
137
-
<Form.Trigger asChild>
138
-
<Button
139
-
px="$6"
140
-
// @ts-expect-error Not in the type definition but required for web.
141
-
type="submit"
142
-
backgroundColor="$accentColor"
143
-
disabled={loginState.loading}
144
-
>
145
-
<Text>{loginState.loading ? <Spinner /> : `Sign up`}</Text>
146
-
</Button>
147
-
</Form.Trigger>
148
-
</XStack>
149
-
</YStack>
150
-
</View>
151
-
</Form>
152
-
</KeyboardAvoidingView>
153
-
);
154
-
}
-14
js/app/src/router.tsx
-14
js/app/src/router.tsx
···
23
23
Home,
24
24
LogIn,
25
25
Menu,
26
-
Notebook,
27
26
PanelLeftClose,
28
27
PanelLeftOpen,
29
28
Settings as SettingsIcon,
···
72
71
import MultiScreen from "./screens/multi";
73
72
import SupportScreen from "./screens/support";
74
73
75
-
// probabl should move this
76
-
import SignUp from "components/login/signup";
77
74
import KeyManager from "components/settings/key-manager";
78
75
import { loadStateFromStorage } from "features/base/sidebarSlice";
79
76
import { store } from "store/store";
···
113
110
GoLive: undefined;
114
111
LiveDashboard: undefined;
115
112
Login: undefined;
116
-
Signup: undefined;
117
113
AVSync: undefined;
118
114
AppReturn: { scheme: string };
119
115
About: undefined;
···
150
146
GoLive: "golive",
151
147
LiveDashboard: "live",
152
148
Login: "login",
153
-
Signup: "signup",
154
149
AVSync: "sync-test",
155
150
AppReturn: "app-return/:scheme",
156
151
About: "about",
···
517
512
options={{
518
513
drawerIcon: () => <LogIn />,
519
514
drawerLabel: () => <Text>Login</Text>,
520
-
}}
521
-
/>
522
-
<Drawer.Screen
523
-
name="Signup"
524
-
component={SignUp}
525
-
options={{
526
-
drawerIcon: () => <Notebook />,
527
-
drawerItemStyle: { display: "none" },
528
-
drawerLabel: () => <Text>Sign up</Text>,
529
515
}}
530
516
/>
531
517
<Drawer.Screen