mHEADmaster

1 files changed, 136 insertions, 0 deletions

diff --git a/app/(tabs)/login.tsx b/app/(tabs)/login.tsx
new file mode 100644
index 0000000..d09e613
--- /dev/null
+++ b/app/(tabs)/login.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  Alert,
+} from "react-native";
+import PrimaryButton from "../../components/PrimaryButton";
+import ScreenWrapper from "../../components/ScreenWrapper";
+import { useThemeColors, ColorScheme } from "../../constants";
+import { ROUTES } from "../../constants/routes";
+import { Passkee } from "@/components/auth/Auth";
+
+// import { useSettingsStore } from "../store/useSettingsStore";
+// import useAuthStore from "../store/useAuthStore";
+// import { createPasskey, isPasskeySupported } from "../lib/passkey";
+// import { navigationRef } from "../lib/navigationRef";
+
+const PasskeySetupScreen = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  // const isDarkMode = useSettingsStore((s) => s.isDarkMode);
+  const isDarkMode = false;
+  const colors = useThemeColors();
+  const styles = getStyles(colors);
+  // const { setHasPasskey, setHasSeenPasskeyPrompt } = useAuthStore();
+
+  const logoSource = isDarkMode
+    ? require("../../assets/urbit-logo-dark.png")
+    : require("../../assets/urbit-logo-light.png");
+
+  const handleCreatePasskey = async () => {
+    console.log("creaing psskey");
+    setIsLoading(true);
+
+    try {
+      // const res = await startRegistration({})
+    } catch (error) {
+      console.error("Passkey creation error:", error);
+      Alert.alert("Error", "An error occurred while creating the passkey.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSkip = () => {
+    // setHasSeenPasskeyPrompt(true);
+    // navigationRef.current?.navigate(ROUTES.LOGIN as never);
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <ScreenWrapper>
+        <View style={styles.topSection}>
+          <Image
+            source={logoSource}
+            style={styles.walletIcon}
+            resizeMode="contain"
+          />
+          <Text style={styles.title}>Secure Your Wallet</Text>
+          <Text style={styles.subtitle}>
+            Create a passkey for easy and secure access to your Urbit wallet
+          </Text>
+        </View>
+
+        <View style={styles.bottomSection}>
+          <Passkee />
+          <PrimaryButton
+            label="Skip for Now"
+            onPress={handleSkip}
+            style={{
+              backgroundColor: colors.card,
+              borderWidth: 1,
+              borderColor: colors.border,
+            }}
+            textStyle={{ color: colors.text }}
+          />
+
+          <Text style={styles.infoText}>
+            You can always set up a passkey later in settings
+          </Text>
+        </View>
+      </ScreenWrapper>
+    </KeyboardAvoidingView>
+  );
+};
+
+export const getStyles = (colors: ColorScheme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+      justifyContent: "space-between",
+      padding: 20,
+    },
+    topSection: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    walletIcon: {
+      width: 64,
+      height: 64,
+      marginBottom: 24,
+    },
+    title: {
+      fontSize: 24,
+      color: colors.text,
+      fontWeight: "600",
+      marginBottom: 12,
+      textAlign: "center",
+    },
+    subtitle: {
+      fontSize: 16,
+      color: colors.secondary,
+      textAlign: "center",
+      paddingHorizontal: 20,
+      lineHeight: 24,
+    },
+    bottomSection: {
+      marginBottom: 40,
+    },
+    infoText: {
+      color: colors.secondary,
+      fontSize: 14,
+      textAlign: "center",
+      marginTop: 16,
+    },
+  });
+
+export default PasskeySetupScreen;