First Draft

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSameLine": true,
+  "trailingComma": "es5"
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.formatOnSave": true,
+  "prettier.configPath": ".prettierrc",
+  "[javascript]": {
+    "editor.formatOnSave": true
+  }
+}

App.js

@@ -1,20 +1,39 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { View } from 'react-native';
+
+import SignInForm from './components/SignInForm';
 
 export default function App() {
+  const baseUrl = 'https://incandescent-regret.flywheelsites.com/';
+  const apiUrl = `${baseUrl}wp-json/jwt-auth/v1/`;
+
+  const remoteAuthentication = async (username, password) => {
+    const body = JSON.stringify({ username, password });
+    console.log(body);
+    const response = await fetch(`${apiUrl}token`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body,
+    });
+
+    const data = await response.json();
+    console.log(data);
+
+    if (response.status !== 200) {
+      console.log(data);
+      console.log(`Error: ${data.message}`);
+      return;
+    }
+
+    console.log(data);
+  };
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
+    <View className="flex-1 items-center justify-center bg-gray-50">
+      <SignInForm remoteAuthentication={remoteAuthentication} />
       <StatusBar style="auto" />
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

babel.config.js

@@ -1,6 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['nativewind/babel'],
   };
 };

components/SignInForm.js

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { View, TextInput, Text, TouchableOpacity } from 'react-native';
+
+export default function SignInForm(props) {
+  const [username, setUsername] = useState('[email protected]');
+  const [password, setPassword] = useState('');
+  const onPress = () => {
+    props.remoteAuthentication(username, password);
+  };
+
+  return (
+    <View className="flex min-h-full flex-col justify-center py-12">
+      <View className="">
+        <Text className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+          Sign in to your account
+        </Text>
+      </View>
+
+      <View className="mt-8">
+        <View className="bg-white py-8 px-4 shadow rounded-lg">
+          <View>
+            <Text className="block text-sm font-bold text-gray-500">Email Address or Username</Text>
+            <View className="mt-2">
+              <TextInput
+                keyboardType="email-address"
+                value={username}
+                onChangeText={(value) => setUsername(value)}
+                className="block w-full appearance-none rounded-md border border-gray-300 px-4 py-3 placeholder-gray-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500"
+              />
+            </View>
+          </View>
+
+          <View className="mt-5">
+            <Text className="block text-sm font-bold text-gray-500">Password</Text>
+            <View className="mt-2">
+              <TextInput
+                secureTextEntry
+                value={password}
+                onChangeText={(value) => setPassword(value)}
+                className="block w-full appearance-none rounded-md border border-gray-300 px-4 py-3 placeholder-gray-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500"
+              />
+            </View>
+          </View>
+
+          <View className="mt-5">
+            <TouchableOpacity
+              onPress={onPress}
+              className="flex w-full justify-center rounded-md border border-transparent bg-blue-600 p-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+              <Text className="text-center text-white">Sign in</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}