@xouteiro/auth_npm 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xouteiro/auth_npm",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Authentication package for Supabase",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/components/LoginRegisterFlow.jsx

@@ -46,6 +46,24 @@ const buttonStyle = {
   cursor: 'pointer',
 };
 
+const toggleButtonStyle = {
+  position: 'absolute',
+  right: 16,
+  top: '50%',
+  transform: 'translateY(-50%)',
+  background: 'none',
+  border: 'none',
+  color: '#0070f3',
+  cursor: 'pointer',
+  fontSize: 14,
+  padding: 0,
+};
+
+const inputWrapperStyle = {
+  position: 'relative',
+  width: '100%',
+};
+
 const messageStyle = (success) => ({
   margin: '12px 0',
   color: success ? '#0a0' : '#d32f2f',
@@ -60,18 +78,20 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
   const [mode, setMode] = useState('login');
   const [identifier, setIdentifier] = useState('');
   const [password, setPassword] = useState('');
-  const [username, setUsername] = useState('');
-  const [phone, setPhone] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
   const [message, setMessage] = useState(null);
   const [success, setSuccess] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const resetFields = () => {
     setIdentifier('');
     setPassword('');
-    setUsername('');
-    setPhone('');
+    setConfirmPassword('');
     setMessage(null);
     setSuccess(false);
+    setShowPassword(false);
+    setShowConfirmPassword(false);
   };
 
   const handleLogin = async (e) => {
@@ -94,7 +114,12 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
     e.preventDefault();
     setMessage(null);
     setSuccess(false);
-    const { user, error } = await registerWithEmail(identifier, password, username, phone);
+    if (password !== confirmPassword) {
+      setMessage("Passwords do not match");
+      setSuccess(false);
+      return;
+    }
+    const { user, error } = await registerWithEmail(identifier, password);
     if (error) {
       setMessage(error.message || 'Registration failed');
       setSuccess(false);
@@ -117,19 +142,29 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
           <input
             style={inputStyle}
             type="text"
-            placeholder="Email, phone, or username"
+            placeholder="Email"
             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
-          />
+          <div style={inputWrapperStyle}>
+            <input
+              style={inputStyle}
+              type={showPassword ? "text" : "password"}
+              placeholder="Password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              required
+            />
+            <button
+              type="button"
+              style={toggleButtonStyle}
+              tabIndex={-1}
+              onClick={() => setShowPassword(v => !v)}
+            >
+              {showPassword ? "Hide" : "Show"}
+            </button>
+          </div>
           <button style={buttonStyle} type="submit">Login</button>
         </form>
       ) : (
@@ -142,28 +177,42 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
             onChange={e => setIdentifier(e.target.value)}
             required
           />
-          <input
-            style={inputStyle}
-            type="password"
-            placeholder="Password"
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-            required
-          />
-          <input
-            style={inputStyle}
-            type="text"
-            placeholder="Username (optional)"
-            value={username}
-            onChange={e => setUsername(e.target.value)}
-          />
-          <input
-            style={inputStyle}
-            type="text"
-            placeholder="Phone (optional)"
-            value={phone}
-            onChange={e => setPhone(e.target.value)}
-          />
+          <div style={inputWrapperStyle}>
+            <input
+              style={inputStyle}
+              type={showPassword ? "text" : "password"}
+              placeholder="Password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              required
+            />
+            <button
+              type="button"
+              style={toggleButtonStyle}
+              tabIndex={-1}
+              onClick={() => setShowPassword(v => !v)}
+            >
+              {showPassword ? "Hide" : "Show"}
+            </button>
+          </div>
+          <div style={inputWrapperStyle}>
+            <input
+              style={inputStyle}
+              type={showConfirmPassword ? "text" : "password"}
+              placeholder="Confirm Password"
+              value={confirmPassword}
+              onChange={e => setConfirmPassword(e.target.value)}
+              required
+            />
+            <button
+              type="button"
+              style={toggleButtonStyle}
+              tabIndex={-1}
+              onClick={() => setShowConfirmPassword(v => !v)}
+            >
+              {showConfirmPassword ? "Hide" : "Show"}
+            </button>
+          </div>
           <button style={buttonStyle} type="submit">Register</button>
         </form>
       )}

package/src/components/LogoutButton.jsx

@@ -33,31 +33,32 @@ const messageStyle = (success) => ({
   fontSize: 15,
 });
 
-export default function LogoutButton() {
-  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');
+export default function LogoutButton({ onLogout }) {
+    const [message, setMessage] = useState(null);
+    const [success, setSuccess] = useState(false);
+  
+    const handleLogout = async () => {
+      setMessage(null);
       setSuccess(false);
-    } else {
-      setMessage('Logout successful!');
-      setSuccess(true);
-      setTimeout(() => {
-        setMessage(null);
+      const { error } = await logout();
+      if (error) {
+        setMessage(error.message || 'Logout failed');
         setSuccess(false);
-      }, 1500);
-    }
-  };
-
-  return (
-    <div style={boxStyle}>
-      <button style={buttonStyle} onClick={handleLogout}>Logout</button>
-      {message && <div style={messageStyle(success)}>{message}</div>}
-    </div>
-  );
-}
+      } 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>
+    );
+  }