@xouteiro/auth_npm 1.0.10 → 1.0.12

package/package.json

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

package/src/components/LoginRegisterFlow.jsx

@@ -2,19 +2,75 @@ import React, { useState } from 'react';
 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="#0070f3"
+          strokeWidth="2"
+          fill="none"
+        />
+        <circle
+          cx="11"
+          cy="11"
+          r="3"
+          stroke="#0070f3"
+          strokeWidth="2"
+          fill="none"
+        />
+      </>
+    ) : (
+      <>
+        <path
+          d="M1 11C3.5 5.5 11 2 21 11C18.5 16.5 11 20 1 11Z"
+          stroke="#0070f3"
+          strokeWidth="2"
+          fill="none"
+        />
+        <circle
+          cx="11"
+          cy="11"
+          r="3"
+          stroke="#0070f3"
+          strokeWidth="2"
+          fill="none"
+        />
+        <line
+          x1="4"
+          y1="18"
+          x2="18"
+          y2="4"
+          stroke="#d32f2f"
+          strokeWidth="2"
+        />
+      </>
+    )}
+  </svg>
+);
+
 const boxStyle = {
-  maxWidth: 380,
-  margin: '40px auto',
-  padding: 32,
-  borderRadius: 14,
-  boxShadow: '0 2px 16px rgba(0,0,0,0.09)',
+  maxWidth: 400,
+  margin: '48px auto',
+  padding: 36,
+  borderRadius: 18,
+  boxShadow: '0 4px 24px rgba(0,0,0,0.10)',
   background: '#fff',
-  fontFamily: 'sans-serif',
+  fontFamily: 'Inter, sans-serif',
 };
 
 const tabStyle = (active) => ({
   flex: 1,
-  padding: 12,
+  padding: 14,
   border: 'none',
   borderBottom: active ? '3px solid #0070f3' : '3px solid #eee',
   background: 'none',
@@ -22,56 +78,89 @@ const tabStyle = (active) => ({
   color: active ? '#0070f3' : '#444',
   cursor: 'pointer',
   outline: 'none',
+  fontSize: 18,
+  transition: 'border-bottom 0.2s',
 });
 
 const inputStyle = {
   width: '100%',
-  padding: 10,
-  margin: '10px 0',
-  borderRadius: 6,
-  border: '1px solid #ddd',
-  fontSize: 16,
+  padding: '12px 44px 12px 12px',
+  margin: '12px 0',
+  borderRadius: 8,
+  border: '1.5px solid #cfd8dc',
+  fontSize: 17,
+  background: '#f8fafc',
+  boxSizing: 'border-box',
+  outline: 'none',
+  transition: 'border 0.2s',
 };
 
 const buttonStyle = {
   width: '100%',
-  padding: 12,
-  borderRadius: 6,
+  padding: 14,
+  borderRadius: 8,
   border: 'none',
-  background: '#0070f3',
+  background: 'linear-gradient(90deg, #0070f3 60%, #0059c1 100%)',
   color: '#fff',
-  fontWeight: 600,
-  fontSize: 16,
-  marginTop: 10,
+  fontWeight: 700,
+  fontSize: 18,
+  marginTop: 16,
+  cursor: 'pointer',
+  letterSpacing: 1,
+  boxShadow: '0 2px 8px rgba(0,112,243,0.08)',
+  transition: 'background 0.2s',
+};
+
+const toggleButtonStyle = {
+  position: 'absolute',
+  right: 12,
+  top: '50%',
+  transform: 'translateY(-50%)',
+  background: 'none',
+  border: 'none',
+  color: '#0070f3',
   cursor: 'pointer',
+  fontSize: 18,
+  padding: 0,
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const inputWrapperStyle = {
+  position: 'relative',
+  width: '100%',
 };
 
 const messageStyle = (success) => ({
-  margin: '12px 0',
+  margin: '16px 0 0 0',
   color: success ? '#0a0' : '#d32f2f',
   background: success ? '#eafbe7' : '#fdeaea',
-  padding: 8,
-  borderRadius: 6,
+  padding: 10,
+  borderRadius: 8,
   textAlign: 'center',
-  fontSize: 15,
+  fontSize: 16,
+  fontWeight: 500,
+  letterSpacing: 0.2,
 });
 
 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 +183,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);
@@ -108,32 +202,45 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
 
   return (
     <div style={boxStyle}>
-      <div style={{ display: 'flex', marginBottom: 24 }}>
+      <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>
       {mode === 'login' ? (
-        <form onSubmit={handleLogin}>
+        <form onSubmit={handleLogin} autoComplete="off">
           <input
             style={inputStyle}
             type="text"
-            placeholder="Email, phone, or username"
+            placeholder="Email"
             value={identifier}
             onChange={e => setIdentifier(e.target.value)}
             required
+            autoComplete="username"
           />
-          <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
+              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>
       ) : (
-        <form onSubmit={handleRegister}>
+        <form onSubmit={handleRegister} autoComplete="off">
           <input
             style={inputStyle}
             type="text"
@@ -141,29 +248,48 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
             value={identifier}
             onChange={e => setIdentifier(e.target.value)}
             required
+            autoComplete="username"
           />
-          <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
+              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>
       )}