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 };