create-croissant 0.1.43 → 0.1.45

package/dist/add.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+import i from"path";import{fileURLToPath as E}from"url";import s from"chalk";import{Command as P}from"commander";import{execa as j}from"execa";import e from"fs-extra";import k from"inquirer";import g from"ora";var A=E(import.meta.url),x=i.dirname(A),y=new P;y.name("croissant-add").description("Add a mobile or desktop app to an existing Croissant Stack project").action(async()=>{console.log(s.bold.yellow(`
+\u{1F950} Croissant Stack: Add App
+`));let p=i.join(process.cwd(),"package.json");await e.pathExists(p)||(console.error(s.red(`
+Error: package.json not found. Are you in the root of your project?
+`)),process.exit(1));let t=await e.readJson(p);(!t.scripts||!t.scripts.dev&&!t.scripts.build)&&(console.error(s.red(`
+Error: This doesn't look like a Croissant Stack project.
+`)),process.exit(1));let u=i.join(process.cwd(),"apps/mobile"),h=i.join(process.cwd(),"apps/desktop"),f=await e.pathExists(u),b=await e.pathExists(h);if(f&&b){console.log(s.blue(`Both mobile and desktop apps are already present. Nothing to add!
+`));return}let l=[];f||l.push({name:"Mobile App (Expo)",value:"mobile"}),b||l.push({name:"Desktop App (Electron)",value:"desktop"});let{type:a}=await k.prompt([{type:"list",name:"type",message:"Which app would you like to add?",choices:l}]),c=process.cwd(),w=g(`Adding ${a} app...`).start();try{let n=i.join(x,"..","template");if(await e.pathExists(n)||(n=i.resolve(x,"../../..")),a==="mobile"){let r=i.join(n,"apps/mobile");await e.copy(r,u),t.scripts=t.scripts||{},t.scripts["dev:mobile"]="turbo run dev --filter=mobile",t.scripts["build:mobile"]="turbo run build --filter=mobile",await e.writeJson(p,t,{spaces:2});let d=i.join(c,"packages/auth/src/lib/auth.ts");if(await e.pathExists(d)){let o=await e.readFile(d,"utf8");o.includes("@better-auth/expo")||(o=`import { expo } from "@better-auth/expo";
+${o}`),o.includes("plugins: [expo()]")||(o=o.replace("emailAndPassword: { enabled: true },",`emailAndPassword: { enabled: true },
+  plugins: [expo()],
+  trustedOrigins: [
+    "mobile://",
+    ...(process.env.NODE_ENV === "development"
+      ? [
+          "exp://",
+          "exp://**",
+          "exp://192.168.*.*:*/**",
+          "http://localhost:8081",
+        ]
+      : []),
+  ],`)),await e.writeFile(d,o)}let m=i.join(c,"packages/auth/package.json");if(await e.pathExists(m)){let o=await e.readJson(m);o.dependencies=o.dependencies||{},o.dependencies["@better-auth/expo"]||(o.dependencies["@better-auth/expo"]="latest",await e.writeJson(m,o,{spaces:2}))}}else if(a==="desktop"){let r=i.join(n,"apps/desktop");await e.copy(r,h),t.scripts=t.scripts||{},t.scripts["dev:desktop"]="turbo run dev --filter=desktop",t.scripts["build:desktop"]="turbo run build --filter=desktop",await e.writeJson(p,t,{spaces:2})}w.succeed(s.green(`${a==="mobile"?"Mobile":"Desktop"} app added successfully!`));let{install:v}=await k.prompt([{type:"confirm",name:"install",message:"Would you like to install dependencies now?",default:!0}]);if(v){let r=g("Installing dependencies...").start();try{await j("npm",["install"],{cwd:c}),r.succeed(s.green("Dependencies installed!"))}catch{r.fail(s.red("Failed to install dependencies. Run npm install manually."))}}console.log(s.bold.cyan(`
+Next steps:`)),console.log(a==="mobile"?"  npm run dev:mobile    # Start Expo development server":"  npm run dev:desktop   # Start Electron development server"),console.log(s.yellow(`
+Happy hacking! \u{1F950}
+`))}catch(n){w.fail(s.red(`An error occurred while adding the ${a} app.`)),console.error(n),process.exit(1)}});y.parse(process.argv);

package/dist/index.js

@@ -1,9 +1,22 @@
 #!/usr/bin/env node
-import s from"path";import{fileURLToPath as k}from"url";import i from"chalk";import{Command as y}from"commander";import{execa as j}from"execa";import e from"fs-extra";import P from"inquirer";import u from"ora";var b=k(import.meta.url),g=s.dirname(b),h=new y;h.name("create-croissant").description("Scaffold a new project using the Croissant Stack").argument("[project-name]","Name of the project").action(async m=>{console.log(i.bold.yellow(`
+import i from"path";import{fileURLToPath as x}from"url";import c from"chalk";import{Command as b}from"commander";import{execa as P}from"execa";import e from"fs-extra";import y from"inquirer";import g from"ora";var j=x(import.meta.url),w=i.dirname(j),k=new b;k.name("create-croissant").description("Scaffold a new project using the Croissant Stack").argument("[project-name]","Name of the project").action(async m=>{console.log(c.bold.yellow(`
 \u{1F950} Welcome to the Croissant Stack!
-`));let l=await P.prompt([{type:"input",name:"name",message:"What is your project named?",default:m||"my-croissant-app",when:!m},{type:"confirm",name:"install",message:"Would you like to install dependencies?",default:!0},{type:"confirm",name:"mobile",message:"Would you like to include the mobile app (Expo)?",default:!0},{type:"confirm",name:"desktop",message:"Would you like to include the desktop app (Electron)?",default:!0}]),c=m||l.name,o=s.resolve(process.cwd(),c);e.existsSync(o)&&(console.error(i.red(`
-Error: Directory ${c} already exists.
-`)),process.exit(1));let f=u("Scaffolding your project...").start();try{await e.ensureDir(o);let p=s.join(g,"..","template");if(await e.pathExists(p))await e.copy(p,o);else{let t=s.resolve(g,"../../.."),n=["node_modules","dist",".git","packages/create-croissant",".turbo","package-lock.json"];await e.copy(t,o,{filter:a=>{let r=s.relative(t,a);return!n.some(w=>r.startsWith(w))}})}if(!l.mobile){let t=s.join(o,"apps/mobile");if(await e.pathExists(t)){await e.remove(t);let n=s.join(o,"package.json");if(await e.pathExists(n)){let a=await e.readJson(n);a.scripts&&Object.keys(a.scripts).forEach(r=>{r.includes("mobile")&&delete a.scripts[r]}),await e.writeJson(n,a,{spaces:2})}}}if(!l.desktop){let t=s.join(o,"apps/desktop");if(await e.pathExists(t)){await e.remove(t);let n=s.join(o,"package.json");if(await e.pathExists(n)){let a=await e.readJson(n);a.scripts&&Object.keys(a.scripts).forEach(r=>{r.includes("desktop")&&delete a.scripts[r]}),await e.writeJson(n,a,{spaces:2})}}}let d=s.join(o,"package.json");if(await e.pathExists(d)){let t=await e.readJson(d);t.name=c,t.version="0.1.0",delete t.private,await e.writeJson(d,t,{spaces:2})}if(f.succeed(i.green(`Project ${c} created at ${o}`)),l.install){let t=u("Installing dependencies...").start();try{await j("npm",["install"],{cwd:o}),t.succeed(i.green("Dependencies installed!"))}catch{t.fail(i.red("Failed to install dependencies. You may need to run npm install manually."))}}console.log(i.bold.cyan(`
-Next steps:`)),console.log(`  cd ${c}`),console.log("  npm run db:up    # Start your PostgreSQL database"),console.log(`  npm run dev      # Start development server
-`),console.log(i.yellow(`Happy hacking! \u{1F950}
-`))}catch(p){f.fail(i.red("An error occurred during scaffolding.")),console.error(p),process.exit(1)}});h.parse(process.argv);
+`));let l=await y.prompt([{type:"input",name:"name",message:"What is your project named?",default:m||"my-croissant-app",when:!m},{type:"confirm",name:"install",message:"Would you like to install dependencies?",default:!0},{type:"confirm",name:"mobile",message:"Would you like to include the mobile app (Expo)?",default:!0},{type:"confirm",name:"desktop",message:"Would you like to include the desktop app (Electron)?",default:!0}]),p=m||l.name,s=i.resolve(process.cwd(),p);e.existsSync(s)&&(console.error(c.red(`
+Error: Directory ${p} already exists.
+`)),process.exit(1));let h=g("Scaffolding your project...").start();try{await e.ensureDir(s);let d=i.join(w,"..","template");if(await e.pathExists(d))await e.copy(d,s);else{let a=i.resolve(w,"../../.."),n=["node_modules","dist",".git","packages/create-croissant",".turbo","package-lock.json"];await e.copy(a,s,{filter:t=>{let r=i.relative(a,t);return!n.some(o=>r.startsWith(o))}})}if(l.mobile){let a=i.join(s,"packages/auth/src/lib/auth.ts");if(await e.pathExists(a)){let t=await e.readFile(a,"utf8");t.includes("@better-auth/expo")||(t=`import { expo } from "@better-auth/expo";
+${t}`),t.includes("plugins: [expo()]")||(t=t.replace("emailAndPassword: { enabled: true },",`emailAndPassword: { enabled: true },
+  plugins: [expo()],
+  trustedOrigins: [
+    "mobile://",
+    ...(process.env.NODE_ENV === "development"
+      ? [
+          "exp://",
+          "exp://**",
+          "exp://192.168.*.*:*/**",
+          "http://localhost:8081",
+        ]
+      : []),
+  ],`)),await e.writeFile(a,t)}let n=i.join(s,"packages/auth/package.json");if(await e.pathExists(n)){let t=await e.readJson(n);t.dependencies=t.dependencies||{},t.dependencies["@better-auth/expo"]||(t.dependencies["@better-auth/expo"]="latest",await e.writeJson(n,t,{spaces:2}))}}else{let a=i.join(s,"apps/mobile");if(await e.pathExists(a)){await e.remove(a);let n=i.join(s,"package.json");if(await e.pathExists(n)){let o=await e.readJson(n);o.scripts&&Object.keys(o.scripts).forEach(f=>{f.includes("mobile")&&delete o.scripts[f]}),await e.writeJson(n,o,{spaces:2})}let t=i.join(s,"packages/auth/src/lib/auth.ts");if(await e.pathExists(t)){let o=await e.readFile(t,"utf8");o=o.replace(/import \{ expo \} from "@better-auth\/expo";\n/,""),o=o.replace(/\s+plugins: \[expo\(\)\],/,""),o=o.replace(/\s+trustedOrigins: \[[\s\S]*?\],/,""),await e.writeFile(t,o)}let r=i.join(s,"packages/auth/package.json");if(await e.pathExists(r)){let o=await e.readJson(r);o.dependencies&&o.dependencies["@better-auth/expo"]&&(delete o.dependencies["@better-auth/expo"],await e.writeJson(r,o,{spaces:2}))}}}if(!l.desktop){let a=i.join(s,"apps/desktop");if(await e.pathExists(a)){await e.remove(a);let n=i.join(s,"package.json");if(await e.pathExists(n)){let t=await e.readJson(n);t.scripts&&Object.keys(t.scripts).forEach(r=>{r.includes("desktop")&&delete t.scripts[r]}),await e.writeJson(n,t,{spaces:2})}}}let u=i.join(s,"package.json");if(await e.pathExists(u)){let a=await e.readJson(u);a.name=p,a.version="0.1.0",delete a.private,await e.writeJson(u,a,{spaces:2})}if(h.succeed(c.green(`Project ${p} created at ${s}`)),l.install){let a=g("Installing dependencies...").start();try{await P("npm",["install"],{cwd:s}),a.succeed(c.green("Dependencies installed!"))}catch{a.fail(c.red("Failed to install dependencies. You may need to run npm install manually."))}}console.log(c.bold.cyan(`
+Next steps:`)),console.log(`  cd ${p}`),console.log("  npm run db:up    # Start your PostgreSQL database"),console.log(`  npm run dev      # Start development server
+`),console.log(c.yellow(`Happy hacking! \u{1F950}
+`))}catch(d){h.fail(c.red("An error occurred during scaffolding.")),console.error(d),process.exit(1)}});k.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-croissant",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "description": "Scaffold a new project using the Croissant Stack",
   "repository": {
     "type": "git",
@@ -8,7 +8,8 @@
     "directory": "packages/create-croissant"
   },
   "bin": {
-    "create-croissant": "./dist/index.js"
+    "create-croissant": "./dist/index.js",
+    "croissant-add": "./dist/add.js"
   },
   "files": [
     "dist",
@@ -20,8 +21,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "npm run prepare-template && tsup src/index.ts --format esm --clean --minify",
-    "dev": "tsup src/index.ts --format esm --watch",
+    "build": "npm run prepare-template && tsup src/index.ts src/add.ts --format esm --clean --minify",
+    "dev": "tsup src/index.ts src/add.ts --format esm --watch",
     "typecheck": "tsc --noEmit",
     "prepare-template": "node scripts/prepare-template.js"
   },

package/template/.expo/README.md

@@ -0,0 +1,13 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/template/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

package/template/apps/desktop/.eslintcache

@@ -0,0 +1 @@
+[{"/Users/sam/Dev/croissant-stack/apps/desktop/electron.vite.config.ts":"1","/Users/sam/Dev/croissant-stack/apps/desktop/src/main/index.ts":"2","/Users/sam/Dev/croissant-stack/apps/desktop/src/preload/index.d.ts":"3","/Users/sam/Dev/croissant-stack/apps/desktop/src/preload/index.ts":"4","/Users/sam/Dev/croissant-stack/apps/desktop/src/renderer/src/App.tsx":"5","/Users/sam/Dev/croissant-stack/apps/desktop/src/renderer/src/components/Versions.tsx":"6","/Users/sam/Dev/croissant-stack/apps/desktop/src/renderer/src/env.d.ts":"7","/Users/sam/Dev/croissant-stack/apps/desktop/src/renderer/src/main.tsx":"8","/Users/sam/Dev/croissant-stack/apps/desktop/out/main/index.js":"9","/Users/sam/Dev/croissant-stack/apps/desktop/out/preload/index.js":"10","/Users/sam/Dev/croissant-stack/apps/desktop/eslint.config.ts":"11","/Users/sam/Dev/croissant-stack/apps/desktop/prettier.config.ts":"12"},{"size":318,"mtime":1777164701886,"results":"13","hashOfConfig":"14"},{"size":2424,"mtime":1777164701886,"results":"15","hashOfConfig":"14"},{"size":149,"mtime":1777164701886,"results":"16","hashOfConfig":"14"},{"size":611,"mtime":1777163425865,"results":"17","hashOfConfig":"14"},{"size":1047,"mtime":1777163425865,"results":"18","hashOfConfig":"14"},{"size":428,"mtime":1777163425866,"results":"19","hashOfConfig":"14"},{"size":38,"mtime":1777163425866,"results":"20","hashOfConfig":"14"},{"size":232,"mtime":1777163425866,"results":"21","hashOfConfig":"14"},{"size":1579,"mtime":1777164321368,"results":"22","hashOfConfig":"23"},{"size":477,"mtime":1777164321388,"results":"24","hashOfConfig":"23"},{"size":239,"mtime":1777245470570,"results":"25","hashOfConfig":"14"},{"size":71,"mtime":1777165267271,"results":"26","hashOfConfig":"14"},{"filePath":"27","messages":"28","suppressedMessages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"19x1ah4",{"filePath":"30","messages":"31","suppressedMessages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","suppressedMessages":"35","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","suppressedMessages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","suppressedMessages":"41","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","suppressedMessages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","suppressedMessages":"47","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","suppressedMessages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","suppressedMessages":"53","errorCount":1,"fatalErrorCount":1,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"7zths6",{"filePath":"54","messages":"55","suppressedMessages":"56","errorCount":1,"fatalErrorCount":1,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"57","messages":"58","suppressedMessages":"59","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","suppressedMessages":"62","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/sam/Dev/croissant-stack/apps/desktop/electron.vite.config.ts",[],[],"/Users/sam/Dev/croissant-stack/apps/desktop/src/main/index.ts",[],[],"/Users/sam/Dev/croissant-stack/apps/desktop/src/preload/index.d.ts",[],[],"/Users/sam/Dev/croissant-stack/apps/desktop/src/preload/index.ts",[],[],"/Users/sam/Dev/croissant-stack/apps/desktop/src/renderer/src/App.tsx",[],[],"/Users/sam/Dev/croissant-stack/apps/desktop/src/renderer/src/components/Versions.tsx",[],[],"/Users/sam/Dev/croissant-stack/apps/desktop/src/renderer/src/env.d.ts",[],[],"/Users/sam/Dev/croissant-stack/apps/desktop/src/renderer/src/main.tsx",[],[],"/Users/sam/Dev/croissant-stack/apps/desktop/out/main/index.js",["63"],[],"/Users/sam/Dev/croissant-stack/apps/desktop/out/preload/index.js",["64"],[],"/Users/sam/Dev/croissant-stack/apps/desktop/eslint.config.ts",[],[],"/Users/sam/Dev/croissant-stack/apps/desktop/prettier.config.ts",[],[],{"ruleId":null,"nodeType":null,"fatal":true,"severity":2,"message":"65"},{"ruleId":null,"nodeType":null,"fatal":true,"severity":2,"message":"66"},"Parsing error: /Users/sam/Dev/croissant-stack/apps/desktop/out/main/index.js was not found by the project service. Consider either including it in the tsconfig.json or including it in allowDefaultProject.\nallowDefaultProject is set to [\"*.js\",\"*.mjs\"], which does not match 'out/main/index.js'.","Parsing error: /Users/sam/Dev/croissant-stack/apps/desktop/out/preload/index.js was not found by the project service. Consider either including it in the tsconfig.json or including it in allowDefaultProject.\nallowDefaultProject is set to [\"*.js\",\"*.mjs\"], which does not match 'out/preload/index.js'."]

package/template/apps/mobile/app/(tabs)/_layout.tsx

@@ -1,34 +1,41 @@
-import { Tabs } from "expo-router";
 import React from "react";
-
-import { HapticTab } from "@/components/haptic-tab";
-import { IconSymbol } from "@/components/ui/icon-symbol";
-import { Colors } from "@/constants/theme";
-import { useColorScheme } from "@/hooks/use-color-scheme";
+import { Tabs } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
-
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
+        tabBarActiveTintColor: "#000",
+        tabBarInactiveTintColor: "#888",
+        headerShown: true,
       }}
     >
       <Tabs.Screen
         name="index"
         options={{
-          title: "Home",
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          title: "Dashboard",
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="home" size={size} color={color} />
+          ),
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
           title: "Explore",
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="planet" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="account"
+        options={{
+          title: "Account",
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="person" size={size} color={color} />
+          ),
         }}
       />
     </Tabs>

package/template/apps/mobile/app/(tabs)/account.tsx

@@ -0,0 +1,147 @@
+import { useState, useEffect } from "react";
+import { View, Text, StyleSheet, ScrollView, Alert, ActivityIndicator } from "react-native";
+import { useRouter } from "expo-router";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export default function AccountScreen() {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+  const [updating, setUpdating] = useState(false);
+
+  // Form states
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    if (!isPending && !session) {
+      router.replace("/login");
+      return;
+    }
+
+    if (session) {
+      setName(session.user.name);
+      setEmail(session.user.email);
+    }
+  }, [session, isPending, router]);
+
+  const handleUpdateProfile = async () => {
+    if (!name) {
+      Alert.alert("Error", "Name is required");
+      return;
+    }
+
+    setUpdating(true);
+    try {
+      const { error } = await authClient.updateUser({
+        name,
+      });
+
+      if (error) {
+        Alert.alert("Error", error.message || "Failed to update profile");
+      } else {
+        Alert.alert("Success", "Profile updated successfully");
+      }
+    } catch (err) {
+      Alert.alert("Error", "An unexpected error occurred");
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  if (isPending) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" color="#000" />
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <Text style={styles.title}>Account Settings</Text>
+      
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Profile Information</Text>
+        <View style={styles.form}>
+          <Input
+            label="Name"
+            value={name}
+            onChangeText={setName}
+            placeholder="Your name"
+          />
+          <Input
+            label="Email"
+            value={email}
+            editable={false}
+            style={styles.disabledInput}
+          />
+          <Button 
+            onPress={handleUpdateProfile} 
+            loading={updating}
+            style={styles.button}
+          >
+            Update Profile
+          </Button>
+        </View>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Security</Text>
+        <Text style={styles.infoText}>
+          Password management and other security settings are currently available on the web platform.
+        </Text>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  content: {
+    padding: 24,
+  },
+  center: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    marginBottom: 24,
+  },
+  section: {
+    marginBottom: 32,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 16,
+    color: "#333",
+  },
+  form: {
+    gap: 16,
+  },
+  disabledInput: {
+    backgroundColor: "#f5f5f5",
+    color: "#888",
+  },
+  button: {
+    marginTop: 8,
+  },
+  infoText: {
+    fontSize: 14,
+    color: "#666",
+    lineHeight: 20,
+    backgroundColor: "#f9f9f9",
+    padding: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#eee",
+  },
+});