@xouteiro/auth_npm 1.0.11 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xouteiro/auth_npm",
-  "version": "1.0.11",
+  "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,41 +78,52 @@ 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: 16,
+  right: 12,
   top: '50%',
   transform: 'translateY(-50%)',
   background: 'none',
   border: 'none',
   color: '#0070f3',
   cursor: 'pointer',
-  fontSize: 14,
+  fontSize: 18,
   padding: 0,
+  display: 'flex',
+  alignItems: 'center',
 };
 
 const inputWrapperStyle = {
@@ -65,13 +132,15 @@ const inputWrapperStyle = {
 };
 
 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 }) {
@@ -133,12 +202,12 @@ 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"
@@ -146,6 +215,7 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
             value={identifier}
             onChange={e => setIdentifier(e.target.value)}
             required
+            autoComplete="username"
           />
           <div style={inputWrapperStyle}>
             <input
@@ -155,20 +225,22 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
               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)}
             >
-              {showPassword ? "Hide" : "Show"}
+              <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"
@@ -176,6 +248,7 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
             value={identifier}
             onChange={e => setIdentifier(e.target.value)}
             required
+            autoComplete="username"
           />
           <div style={inputWrapperStyle}>
             <input
@@ -185,14 +258,16 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
               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)}
             >
-              {showPassword ? "Hide" : "Show"}
+              <EyeIcon open={showPassword} />
             </button>
           </div>
           <div style={inputWrapperStyle}>
@@ -203,14 +278,16 @@ export default function LoginRegisterFlow({ onLoginSuccess, onRegisterSuccess })
               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)}
             >
-              {showConfirmPassword ? "Hide" : "Show"}
+              <EyeIcon open={showConfirmPassword} />
             </button>
           </div>
           <button style={buttonStyle} type="submit">Register</button>