@xouteiro/auth_npm 1.0.13 → 1.0.17

package/src/components/LoginRegisterFlow.jsx

@@ -1,156 +1,14 @@
 import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
 import { signInWithEmail } from '../login';
 import { registerWithEmail } from '../register';
 
-// SVG Eye Icon
-const EyeIcon = ({ open }) => (
-  <svg
-    width="22"
-    height="22"
-    viewBox="0 0 22 22"
-    fill="none"
-    style={{ verticalAlign: 'middle' }}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    {open ? (
-      <>
-        <path
-          d="M1 11C3.5 5.5 11 2 21 11C18.5 16.5 11 20 1 11Z"
-          stroke="#667eea"
-          strokeWidth="2"
-          fill="none"
-        />
-        <circle
-          cx="11"
-          cy="11"
-          r="3"
-          stroke="#667eea"
-          strokeWidth="2"
-          fill="none"
-        />
-      </>
-    ) : (
-      <>
-        <path
-          d="M1 11C3.5 5.5 11 2 21 11C18.5 16.5 11 20 1 11Z"
-          stroke="#667eea"
-          strokeWidth="2"
-          fill="none"
-        />
-        <circle
-          cx="11"
-          cy="11"
-          r="3"
-          stroke="#667eea"
-          strokeWidth="2"
-          fill="none"
-        />
-        <line
-          x1="4"
-          y1="18"
-          x2="18"
-          y2="4"
-          stroke="#d32f2f"
-          strokeWidth="2"
-        />
-      </>
-    )}
-  </svg>
-);
-
-const boxStyle = {
-  maxWidth: 400,
-  margin: '0 auto',
-  padding: 32,
-  borderRadius: 20,
-  boxShadow: '0 8px 32px rgba(102, 126, 234, 0.15)',
-  background: 'rgba(255, 255, 255, 0.98)',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  backdropFilter: 'blur(10px)',
-  border: '1px solid rgba(255, 255, 255, 0.2)',
-};
-
-const tabStyle = (active) => ({
-  flex: 1,
-  padding: 16,
-  border: 'none',
-  borderBottom: active ? '3px solid #667eea' : '3px solid rgba(255, 255, 255, 0.3)',
-  background: 'none',
-  fontWeight: active ? 700 : 500,
-  color: active ? '#667eea' : 'rgba(0, 0, 0, 0.6)',
-  cursor: 'pointer',
-  outline: 'none',
-  fontSize: 16,
-  transition: 'all 0.3s ease',
-  letterSpacing: '0.5px',
-});
-
-const inputStyle = {
-  width: '100%',
-  padding: '16px 44px 16px 16px',
-  margin: '12px 0',
-  borderRadius: 12,
-  border: '2px solid rgba(102, 126, 234, 0.2)',
-  fontSize: 16,
-  background: 'rgba(248, 250, 252, 0.8)',
-  boxSizing: 'border-box',
-  outline: 'none',
-  transition: 'all 0.3s ease',
-  fontWeight: '500',
-};
-
-const buttonStyle = {
-  width: '100%',
-  padding: 16,
-  borderRadius: 12,
-  border: 'none',
-  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-  color: '#fff',
-  fontWeight: 700,
-  fontSize: 16,
-  marginTop: 20,
-  cursor: 'pointer',
-  letterSpacing: '0.5px',
-  boxShadow: '0 8px 24px rgba(102, 126, 234, 0.3)',
-  transition: 'all 0.3s ease',
-  transform: 'translateY(0)',
-};
-
-const toggleButtonStyle = {
-  position: 'absolute',
-  right: 12,
-  top: '50%',
-  transform: 'translateY(-50%)',
-  background: 'none',
-  border: 'none',
-  color: '#667eea',
-  cursor: 'pointer',
-  fontSize: 18,
-  padding: 4,
-  display: 'flex',
-  alignItems: 'center',
-  borderRadius: 6,
-  transition: 'all 0.2s ease',
-};
-
-const inputWrapperStyle = {
-  position: 'relative',
-  width: '100%',
-};
-
-const messageStyle = (success) => ({
-  margin: '16px 0 0 0',
-  color: success ? '#22c55e' : '#ef4444',
-  background: success ? 'rgba(34, 197, 94, 0.1)' : 'rgba(239, 68, 68, 0.1)',
-  padding: 12,
-  borderRadius: 12,
-  textAlign: 'center',
-  fontSize: 14,
-  fontWeight: 600,
-  letterSpacing: '0.5px',
-  border: success ? '1px solid rgba(34, 197, 94, 0.2)' : '1px solid rgba(239, 68, 68, 0.2)',
-});
-
 export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess }) {
   const [mode, setMode] = useState('login');
   const [identifier, setIdentifier] = useState('');
@@ -159,8 +17,6 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
   const [displayName, setDisplayName] = useState('');
   const [message, setMessage] = useState(null);
   const [success, setSuccess] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const resetFields = () => {
     setIdentifier('');
@@ -169,14 +25,9 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
     setDisplayName('');
     setMessage(null);
     setSuccess(false);
-    setShowPassword(false);
-    setShowConfirmPassword(false);
   };
 
-  const handleLogin = async (e) => {
-    e.preventDefault();
-    setMessage(null);
-    setSuccess(false);
+  const handleLogin = async () => {
     const { session, error } = await signInWithEmail(identifier, password);
     if (error) {
       setMessage(error.message || 'Login failed');
@@ -184,15 +35,12 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
     } else {
       setMessage('Login successful!');
       setSuccess(true);
-      if (onLoginSuccess) onLoginSuccess(session);
+      onLoginSuccess?.(session);
       setTimeout(resetFields, 1200);
     }
   };
 
-  const handleRegister = async (e) => {
-    e.preventDefault();
-    setMessage(null);
-    setSuccess(false);
+  const handleRegister = async () => {
     if (password !== confirmPassword) {
       setMessage("Passwords do not match");
       setSuccess(false);
@@ -203,116 +51,142 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
       setMessage(error.message || 'Registration failed');
       setSuccess(false);
     } else {
-      setMessage('Registration successful! Please check your email to confirm.');
+      setMessage('Registration successful! Please check your email.');
       setSuccess(true);
-      if (onRegisterSuccess) onRegisterSuccess(user);
+      onRegisterSuccess?.(user);
       setTimeout(resetFields, 2000);
     }
   };
 
   return (
-    <div style={boxStyle}>
-      <div style={{ display: 'flex', marginBottom: 28 }}>
-        <button style={tabStyle(mode === 'login')} onClick={() => { setMode('login'); setMessage(null); }}>Login</button>
-        <button style={tabStyle(mode === 'register')} onClick={() => { setMode('register'); setMessage(null); }}>Register</button>
-      </div>
+    <View style={styles.container}>
+      <View style={styles.tabContainer}>
+        <TouchableOpacity onPress={() => setMode('login')} style={[styles.tab, mode === 'login' && styles.activeTab]}>
+          <Text style={styles.tabText}>Login</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => setMode('register')} style={[styles.tab, mode === 'register' && styles.activeTab]}>
+          <Text style={styles.tabText}>Register</Text>
+        </TouchableOpacity>
+      </View>
+
       {mode === 'login' ? (
-        <form onSubmit={handleLogin} autoComplete="off">
-          <input
-            style={inputStyle}
-            type="text"
+        <View>
+          <TextInput
+            style={styles.input}
             placeholder="Email"
             value={identifier}
-            onChange={e => setIdentifier(e.target.value)}
-            required
-            autoComplete="username"
+            onChangeText={setIdentifier}
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Password"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
           />
-          <div style={inputWrapperStyle}>
-            <input
-              style={inputStyle}
-              type={showPassword ? "text" : "password"}
-              placeholder="Password"
-              value={password}
-              onChange={e => setPassword(e.target.value)}
-              required
-              autoComplete="current-password"
-            />
-            <button
-              type="button"
-              style={toggleButtonStyle}
-              tabIndex={-1}
-              aria-label={showPassword ? "Hide password" : "Show password"}
-              onClick={() => setShowPassword(v => !v)}
-            >
-              <EyeIcon open={showPassword} />
-            </button>
-          </div>
-          <button style={buttonStyle} type="submit">Login</button>
-        </form>
+          <TouchableOpacity style={styles.button} onPress={handleLogin}>
+            <Text style={styles.buttonText}>Login</Text>
+          </TouchableOpacity>
+        </View>
       ) : (
-        <form onSubmit={handleRegister} autoComplete="off">
-          <input
-            style={inputStyle}
-            type="text"
+        <View>
+          <TextInput
+            style={styles.input}
             placeholder="Display Name"
             value={displayName}
-            onChange={e => setDisplayName(e.target.value)}
-            required
-            autoComplete="name"
+            onChangeText={setDisplayName}
           />
-          <input
-            style={inputStyle}
-            type="text"
+          <TextInput
+            style={styles.input}
             placeholder="Email"
             value={identifier}
-            onChange={e => setIdentifier(e.target.value)}
-            required
-            autoComplete="username"
+            onChangeText={setIdentifier}
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Password"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
           />
-          <div style={inputWrapperStyle}>
-            <input
-              style={inputStyle}
-              type={showPassword ? "text" : "password"}
-              placeholder="Password"
-              value={password}
-              onChange={e => setPassword(e.target.value)}
-              required
-              autoComplete="new-password"
-            />
-            <button
-              type="button"
-              style={toggleButtonStyle}
-              tabIndex={-1}
-              aria-label={showPassword ? "Hide password" : "Show password"}
-              onClick={() => setShowPassword(v => !v)}
-            >
-              <EyeIcon open={showPassword} />
-            </button>
-          </div>
-          <div style={inputWrapperStyle}>
-            <input
-              style={inputStyle}
-              type={showConfirmPassword ? "text" : "password"}
-              placeholder="Confirm Password"
-              value={confirmPassword}
-              onChange={e => setConfirmPassword(e.target.value)}
-              required
-              autoComplete="new-password"
-            />
-            <button
-              type="button"
-              style={toggleButtonStyle}
-              tabIndex={-1}
-              aria-label={showConfirmPassword ? "Hide confirm password" : "Show confirm password"}
-              onClick={() => setShowConfirmPassword(v => !v)}
-            >
-              <EyeIcon open={showConfirmPassword} />
-            </button>
-          </div>
-          <button style={buttonStyle} type="submit">Register</button>
-        </form>
+          <TextInput
+            style={styles.input}
+            placeholder="Confirm Password"
+            value={confirmPassword}
+            onChangeText={setConfirmPassword}
+            secureTextEntry
+          />
+          <TouchableOpacity style={styles.button} onPress={handleRegister}>
+            <Text style={styles.buttonText}>Register</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {message && (
+        <View style={[styles.message, success ? styles.success : styles.error]}>
+          <Text style={styles.messageText}>{message}</Text>
+        </View>
       )}
-      {message && <div style={messageStyle(success)}>{message}</div>}
-    </div>
+    </View>
   );
-}
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+    borderRadius: 12,
+    backgroundColor: '#fff',
+    margin: 16,
+  },
+  tabContainer: {
+    flexDirection: 'row',
+    marginBottom: 16,
+  },
+  tab: {
+    flex: 1,
+    padding: 12,
+    borderBottomWidth: 2,
+    borderColor: '#ccc',
+    alignItems: 'center',
+  },
+  activeTab: {
+    borderColor: '#667eea',
+  },
+  tabText: {
+    fontWeight: 'bold',
+    color: '#667eea',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 12,
+  },
+  button: {
+    backgroundColor: '#667eea',
+    padding: 14,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  message: {
+    padding: 12,
+    borderRadius: 8,
+    marginTop: 16,
+  },
+  success: {
+    backgroundColor: '#eafbe7',
+  },
+  error: {
+    backgroundColor: '#fdeaea',
+  },
+  messageText: {
+    textAlign: 'center',
+    color: '#333',
+  },
+});

package/src/components/LogoutButton.jsx

@@ -1,64 +1,78 @@
 import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { logout } from '../logout';
 
-const boxStyle = {
-  maxWidth: 350,
-  margin: '24px auto',
-  padding: 20,
-  borderRadius: 10,
-  boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
-  background: '#fff',
-  fontFamily: 'sans-serif',
-  textAlign: 'center',
-};
-
-const buttonStyle = {
-  padding: '10px 28px',
-  borderRadius: 6,
-  border: 'none',
-  background: '#0070f3',
-  color: '#fff',
-  fontWeight: 600,
-  fontSize: 16,
-  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 LogoutButton({ onLogout }) {
-    const [message, setMessage] = useState(null);
-    const [success, setSuccess] = useState(false);
-  
-    const handleLogout = async () => {
-      setMessage(null);
+  const [message, setMessage] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleLogout = async () => {
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await logout();
+    if (error) {
+      setMessage(error.message || 'Logout failed');
       setSuccess(false);
-      const { error } = await logout();
-      if (error) {
-        setMessage(error.message || 'Logout failed');
+    } else {
+      setMessage('Logout successful!');
+      setSuccess(true);
+      setTimeout(() => {
+        setMessage(null);
         setSuccess(false);
-      } else {
-        setMessage('Logout successful!');
-        setSuccess(true);
-        setTimeout(() => {
-          setMessage(null);
-          setSuccess(false);
-          if (onLogout) onLogout(); // Call the callback after logout
-        }, 1500);
-      }
-    };
-  
-    return (
-      <div style={boxStyle}>
-        <button style={buttonStyle} onClick={handleLogout}>Logout</button>
-        {message && <div style={messageStyle(success)}>{message}</div>}
-      </div>
-    );
-  }
+        if (onLogout) onLogout();
+      }, 1500);
+    }
+  };
+
+  return (
+    <View style={styles.box}>
+      <TouchableOpacity style={styles.button} onPress={handleLogout}>
+        <Text style={styles.buttonText}>Logout</Text>
+      </TouchableOpacity>
+      {message && (
+        <View style={[styles.message, success ? styles.success : styles.error]}>
+          <Text style={styles.messageText}>{message}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    maxWidth: 350,
+    marginVertical: 24,
+    padding: 20,
+    borderRadius: 10,
+    backgroundColor: '#fff',
+    alignSelf: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    paddingVertical: 10,
+    paddingHorizontal: 28,
+    borderRadius: 6,
+    backgroundColor: '#0070f3',
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  message: {
+    marginTop: 12,
+    padding: 8,
+    borderRadius: 6,
+  },
+  success: {
+    backgroundColor: '#eafbe7',
+  },
+  error: {
+    backgroundColor: '#fdeaea',
+  },
+  messageText: {
+    fontSize: 15,
+    textAlign: 'center',
+    color: '#333',
+  },
+});