Add page to authenticate user

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",

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",

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

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