diff --git a/package-lock.json b/package-lock.json index 3739d97..a0d6e83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index bb34cfb..e0fe5c7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.js b/src/App.js index 173b96a..035e89e 100644 --- a/src/App.js +++ b/src/App.js @@ -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 diff --git a/src/components/pages/authenticate.js b/src/components/pages/authenticate.js new file mode 100644 index 0000000..1d51162 --- /dev/null +++ b/src/components/pages/authenticate.js @@ -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: "https://njms.ca", + verified_at: "some time" + }, + { + name: "Github", + value: "https://github.com/natjms", + 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 ( + + { + state.authChecked + ? + + + + Account name + setState({ ...state, acct: value }) + }/> + + Password + setState({ ...state, password: value }) + }/> + + Login + + + : <> + } + + ); +}; + +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 };