Add page to authenticate user
This commit is contained in:
parent
00d21265cb
commit
42a9036547
|
|
@ -1345,6 +1345,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@react-native-async-storage/async-storage": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.14.1.tgz",
|
||||
"integrity": "sha512-UkLUox2q5DKNYB6IMUzsuwrTJeXGLySvtQlnrqd3fd+96JErCT4X3xD+W1cvQjes0nm0LbaELbwObKc+Tea7wA==",
|
||||
"requires": {
|
||||
"deep-assign": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"@react-native-community/cli-debugger-ui": {
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.9.0.tgz",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"eject": "expo eject"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "^1.14.1",
|
||||
"@react-native-community/masked-view": "0.1.10",
|
||||
"@react-navigation/core": "5.2.3",
|
||||
"@react-navigation/native": "5.1.1",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { registerRootComponent } from 'expo';
|
|||
import ViewPostJsx from "src/components/pages/view-post";
|
||||
import ViewCommentsJsx from "src/components/pages/view-comments.js";
|
||||
|
||||
import AuthenticateJsx from "src/components/pages/authenticate";
|
||||
import FeedJsx from "src/components/pages/feed";
|
||||
import ProfileJsx, { ViewProfileJsx } from "src/components/pages/profile";
|
||||
import DiscoverJsx from 'src/components/pages/discover';
|
||||
|
|
@ -19,6 +20,7 @@ import UserListJsx from "src/components/pages/user-list.js";
|
|||
import SettingsJsx from "src/components/pages/profile/settings.js";
|
||||
|
||||
const Stack = createStackNavigator({
|
||||
Authenticate: { screen: AuthenticateJsx },
|
||||
Feed: { screen: FeedJsx, },
|
||||
Discover: { screen: DiscoverJsx },
|
||||
Notifications: { screen: NotificationsJsx },
|
||||
|
|
@ -31,7 +33,7 @@ const Stack = createStackNavigator({
|
|||
ViewHashtag: { screen: ViewHashtagJsx },
|
||||
UserList: { screen: UserListJsx }
|
||||
}, {
|
||||
initialRouteKey: "Feed",
|
||||
initialRouteKey: "Authenticate",
|
||||
headerMode: "none",
|
||||
navigationOptions: {
|
||||
headerVisible: false
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
SafeAreaView,
|
||||
View,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
Text,
|
||||
Image,
|
||||
Dimensions,
|
||||
} from "react-native";
|
||||
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
|
||||
const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
|
||||
const TEST_PROFILE = {
|
||||
username: "njms",
|
||||
acct: "njms",
|
||||
display_name: "Nat🔆",
|
||||
locked: false,
|
||||
bot: false,
|
||||
note: "Yeah heart emoji.",
|
||||
avatar: TEST_IMAGE,
|
||||
followers_count: "1 jillion",
|
||||
statuses_count: 334,
|
||||
fields: [
|
||||
{
|
||||
name: "Blog",
|
||||
value: "<a href=\"https://njms.ca\">https://njms.ca</a>",
|
||||
verified_at: "some time"
|
||||
},
|
||||
{
|
||||
name: "Github",
|
||||
value: "<a href=\"https://github.com/natjms\">https://github.com/natjms</a>",
|
||||
verified_at: null
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const AuthenticateJsx = ({navigation}) => {
|
||||
const [state, setState] = useState({
|
||||
acct: "",
|
||||
password: "",
|
||||
authChecked: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const profile = AsyncStorage.getItem("@user_profile").then((profile) => {
|
||||
if (profile != null) {
|
||||
navigation.navigate("feed");
|
||||
}
|
||||
|
||||
setState({...state, authChecked: true});
|
||||
});
|
||||
}, []);
|
||||
|
||||
const loginCallback = async () => {
|
||||
const profileJSON = JSON.stringify(TEST_PROFILE);
|
||||
AsyncStorage.setItem("@user_profile", profileJSON).then(() => {
|
||||
navigation.navigate("Feed");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style = { styles.container }>
|
||||
{
|
||||
state.authChecked
|
||||
? <View style = { styles.innerContainer }>
|
||||
<View style = { styles.logo.container }>
|
||||
<Image
|
||||
style = { styles.logo.image }
|
||||
resizeMode = { "contain" }
|
||||
source = { require("assets/logo/logo-standalone.png") }/>
|
||||
</View>
|
||||
<Text style = { styles.label }> Account name </Text>
|
||||
<TextInput
|
||||
style = { styles.input }
|
||||
placeholder = { "name@domain.tld" }
|
||||
onChangeText = {
|
||||
value => setState({ ...state, acct: value })
|
||||
}/>
|
||||
|
||||
<Text style = { styles.label }> Password </Text>
|
||||
<TextInput
|
||||
style = { styles.input }
|
||||
placeholder = { "************" }
|
||||
secureTextEntry = { true }
|
||||
onChangeText = {
|
||||
value => setState({ ...state, password: value })
|
||||
}/>
|
||||
<TouchableOpacity
|
||||
style = { styles.login.button }
|
||||
onPress = { loginCallback }>
|
||||
<Text style = { styles.login.label }> Login </Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
: <></>
|
||||
}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const SCREEN_WIDTH = Dimensions.get("window").width;
|
||||
const SCREEN_HEIGHT = Dimensions.get("window").height;
|
||||
const styles = {
|
||||
container: {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: SCREEN_HEIGHT,
|
||||
},
|
||||
innerContainer: {
|
||||
width: SCREEN_WIDTH / 1.5,
|
||||
},
|
||||
logo: {
|
||||
container: {
|
||||
alignItems: "center",
|
||||
marginBottom: 30,
|
||||
},
|
||||
image: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
}
|
||||
},
|
||||
label: {
|
||||
fontWeight: "bold",
|
||||
color: "#888",
|
||||
},
|
||||
input: {
|
||||
padding: 10,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#888",
|
||||
marginBottom: 10,
|
||||
},
|
||||
login: {
|
||||
button: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#888",
|
||||
borderRadius: 5,
|
||||
padding: 15,
|
||||
},
|
||||
label: {
|
||||
textAlign: "center",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export { AuthenticateJsx as default };
|
||||
Loading…
Reference in New Issue