@xouteiro/auth_npm 1.0.13 → 1.0.17

package/package.json

@@ -1,29 +1,34 @@
 {
-  "name": "@xouteiro/auth_npm",
-  "version": "1.0.13",
-  "description": "Authentication package for Supabase",
-  "main": "src/index.js",
-  "types": "src/index.d.ts",
-  "scripts": {
-    "build": "tsup"
-  },
-  "keywords": [
-    "supabase",
-    "auth",
-    "authentication"
-  ],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@supabase/auth-ui-react": "^0.4.7",
-    "@supabase/auth-ui-shared": "^0.1.8",
-    "@supabase/supabase-js": "^2.52.1"
-  },
-  "devDependencies": {
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "esbuild": "^0.25.8",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.2"
-  }
+    "name": "@xouteiro/auth_npm",
+    "version": "1.0.17",
+    "description": "Authentication package for Supabase",
+    "main": "src/index.js",
+    "types": "src/index.d.ts",
+    "scripts": {
+        "build": "tsup"
+    },
+    "keywords": [
+        "supabase",
+        "auth",
+        "authentication"
+    ],
+    "author": "",
+    "license": "ISC",
+    "peerDependencies": {
+        "react-native": ">=0.72.0",
+        "react": ">=18.0.0"
+    },
+    "dependencies": {
+        "@supabase/auth-ui-react": "^0.4.7",
+        "@supabase/auth-ui-shared": "^0.1.8",
+        "@supabase/supabase-js": "^2.52.1"
+    },
+    "devDependencies": {
+        "@types/react": "^19.1.9",
+        "@types/react-dom": "^19.1.7",
+        "react-native": "^0.81.4",
+        "esbuild": "^0.25.8",
+        "tsup": "^8.5.0",
+        "typescript": "^5.9.2"
+    }
 }

package/src/components/LoginOnly.jsx

@@ -1,96 +1,150 @@
 import React, { useState } from 'react';
-import { signInWithEmail } from '../login';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from 'react-native';
+import { registerWithEmail } from '../register';
 
-const boxStyle = {
-  maxWidth: 350,
-  margin: '40px auto',
-  padding: 28,
-  borderRadius: 12,
-  boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
-  background: '#fff',
-  fontFamily: 'sans-serif',
-};
-
-const inputStyle = {
-  width: '100%',
-  padding: 10,
-  margin: '10px 0',
-  borderRadius: 6,
-  border: '1px solid #ddd',
-  fontSize: 16,
-};
-
-const buttonStyle = {
-  width: '100%',
-  padding: 12,
-  borderRadius: 6,
-  border: 'none',
-  background: '#0070f3',
-  color: '#fff',
-  fontWeight: 600,
-  fontSize: 16,
-  marginTop: 10,
-  cursor: 'pointer',
-};
-
-const messageStyle = (success) => ({
-  margin: '12px 0',
-  color: success ? '#0a0' : '#d32f2f',
-  background: success ? '#eafbe7' : '#fdeaea',
-  padding: 8,
-  borderRadius: 6,
-  textAlign: 'center',
-  fontSize: 15,
-});
-
-export default function LoginOnly() {
-  const [identifier, setIdentifier] = useState('');
+export default function RegisterOnly() {
+  const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
+  const [phone, setPhone] = useState('');
   const [message, setMessage] = useState(null);
   const [success, setSuccess] = useState(false);
 
-  const handleLogin = async (e) => {
-    e.preventDefault();
+  const handleRegister = async () => {
     setMessage(null);
     setSuccess(false);
-    const { error } = await signInWithEmail(identifier, password);
+    const { error } = await registerWithEmail(email, password, username, phone);
     if (error) {
-      setMessage(error.message || 'Login failed');
+      setMessage(error.message || 'Registration failed');
       setSuccess(false);
     } else {
-      setMessage('Login successful!');
+      setMessage('Registration successful! Please check your email to confirm.');
       setSuccess(true);
       setTimeout(() => {
-        setIdentifier('');
+        setEmail('');
         setPassword('');
+        setUsername('');
+        setPhone('');
         setMessage(null);
         setSuccess(false);
-      }, 1500);
+      }, 2000);
     }
   };
 
   return (
-    <div style={boxStyle}>
-      <form onSubmit={handleLogin}>
-        <input
-          style={inputStyle}
-          type="text"
-          placeholder="Email, phone, or username"
-          value={identifier}
-          onChange={e => setIdentifier(e.target.value)}
-          required
-        />
-        <input
-          style={inputStyle}
-          type="password"
-          placeholder="Password"
-          value={password}
-          onChange={e => setPassword(e.target.value)}
-          required
-        />
-        <button style={buttonStyle} type="submit">Login</button>
-      </form>
-      {message && <div style={messageStyle(success)}>{message}</div>}
-    </div>
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      style={styles.container}
+    >
+      <ScrollView contentContainerStyle={styles.scroll}>
+        <View style={styles.box}>
+          <TextInput
+            style={styles.input}
+            placeholder="Email"
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            keyboardType="email-address"
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Password"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Username (optional)"
+            value={username}
+            onChangeText={setUsername}
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Phone (optional)"
+            value={phone}
+            onChangeText={setPhone}
+            keyboardType="phone-pad"
+          />
+          <TouchableOpacity style={styles.button} onPress={handleRegister}>
+            <Text style={styles.buttonText}>Register</Text>
+          </TouchableOpacity>
+          {message && (
+            <View style={[styles.message, success ? styles.success : styles.error]}>
+              <Text style={styles.messageText}>{message}</Text>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
   );
-}
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  scroll: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  box: {
+    padding: 28,
+    borderRadius: 12,
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+    elevation: 4,
+  },
+  input: {
+    width: '100%',
+    padding: 10,
+    marginVertical: 10,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    fontSize: 16,
+  },
+  button: {
+    width: '100%',
+    padding: 12,
+    borderRadius: 6,
+    backgroundColor: '#0070f3',
+    marginTop: 10,
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  message: {
+    marginTop: 12,
+    padding: 8,
+    borderRadius: 6,
+    alignItems: 'center',
+  },
+  success: {
+    backgroundColor: '#eafbe7',
+  },
+  error: {
+    backgroundColor: '#fdeaea',
+  },
+  messageText: {
+    fontSize: 15,
+    color: '#333',
+    textAlign: 'center',
+  },
+});