@xouteiro/auth_npm 1.0.7 → 1.0.8

package/dist/index.mjs

@@ -2270,58 +2270,149 @@ async function logout() {
 
 // src/components/LoginRegisterFlow.jsx
 var import_react2 = __toESM(require_react());
+var boxStyle = {
+  maxWidth: 380,
+  margin: "40px auto",
+  padding: 32,
+  borderRadius: 14,
+  boxShadow: "0 2px 16px rgba(0,0,0,0.09)",
+  background: "#fff",
+  fontFamily: "sans-serif"
+};
+var tabStyle = (active) => ({
+  flex: 1,
+  padding: 12,
+  border: "none",
+  borderBottom: active ? "3px solid #0070f3" : "3px solid #eee",
+  background: "none",
+  fontWeight: active ? 700 : 400,
+  color: active ? "#0070f3" : "#444",
+  cursor: "pointer",
+  outline: "none"
+});
+var inputStyle = {
+  width: "100%",
+  padding: 10,
+  margin: "10px 0",
+  borderRadius: 6,
+  border: "1px solid #ddd",
+  fontSize: 16
+};
+var buttonStyle = {
+  width: "100%",
+  padding: 12,
+  borderRadius: 6,
+  border: "none",
+  background: "#0070f3",
+  color: "#fff",
+  fontWeight: 600,
+  fontSize: 16,
+  marginTop: 10,
+  cursor: "pointer"
+};
+var messageStyle = (success) => ({
+  margin: "12px 0",
+  color: success ? "#0a0" : "#d32f2f",
+  background: success ? "#eafbe7" : "#fdeaea",
+  padding: 8,
+  borderRadius: 6,
+  textAlign: "center",
+  fontSize: 15
+});
 function LoginRegisterFlow() {
   const [mode, setMode] = (0, import_react2.useState)("login");
   const [identifier, setIdentifier] = (0, import_react2.useState)("");
   const [password, setPassword] = (0, import_react2.useState)("");
   const [username, setUsername] = (0, import_react2.useState)("");
   const [phone, setPhone] = (0, import_react2.useState)("");
-  const [error, setError] = (0, import_react2.useState)(null);
+  const [message, setMessage] = (0, import_react2.useState)(null);
+  const [success, setSuccess] = (0, import_react2.useState)(false);
+  const resetFields = () => {
+    setIdentifier("");
+    setPassword("");
+    setUsername("");
+    setPhone("");
+    setMessage(null);
+    setSuccess(false);
+  };
   const handleLogin = async (e) => {
     e.preventDefault();
-    const { error: error2 } = await signInWithEmail(identifier, password);
-    setError(error2 ? error2.message : null);
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await signInWithEmail(identifier, password);
+    if (error) {
+      setMessage(error.message || "Login failed");
+      setSuccess(false);
+    } else {
+      setMessage("Login successful!");
+      setSuccess(true);
+      setTimeout(resetFields, 1200);
+    }
   };
   const handleRegister = async (e) => {
     e.preventDefault();
-    const { error: error2 } = await registerWithEmail(identifier, password, username, phone);
-    setError(error2 ? error2.message : null);
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await registerWithEmail(identifier, password, username, phone);
+    if (error) {
+      setMessage(error.message || "Registration failed");
+      setSuccess(false);
+    } else {
+      setMessage("Registration successful! Please check your email to confirm.");
+      setSuccess(true);
+      setTimeout(resetFields, 2e3);
+    }
   };
-  return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("button", { onClick: () => setMode("login") }, "Login"), /* @__PURE__ */ import_react2.default.createElement("button", { onClick: () => setMode("register") }, "Register"), mode === "login" ? /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleLogin }, /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: boxStyle }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", marginBottom: 24 } }, /* @__PURE__ */ import_react2.default.createElement("button", { style: tabStyle(mode === "login"), onClick: () => {
+    setMode("login");
+    setMessage(null);
+  } }, "Login"), /* @__PURE__ */ import_react2.default.createElement("button", { style: tabStyle(mode === "register"), onClick: () => {
+    setMode("register");
+    setMessage(null);
+  } }, "Register")), mode === "login" ? /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleLogin }, /* @__PURE__ */ import_react2.default.createElement(
     "input",
     {
+      style: inputStyle,
       type: "text",
       placeholder: "Email, phone, or username",
       value: identifier,
-      onChange: (e) => setIdentifier(e.target.value)
+      onChange: (e) => setIdentifier(e.target.value),
+      required: true
     }
   ), /* @__PURE__ */ import_react2.default.createElement(
     "input",
     {
+      style: inputStyle,
       type: "password",
       placeholder: "Password",
       value: password,
-      onChange: (e) => setPassword(e.target.value)
+      onChange: (e) => setPassword(e.target.value),
+      required: true
     }
-  ), /* @__PURE__ */ import_react2.default.createElement("button", { type: "submit" }, "Login")) : /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleRegister }, /* @__PURE__ */ import_react2.default.createElement(
+  ), /* @__PURE__ */ import_react2.default.createElement("button", { style: buttonStyle, type: "submit" }, "Login")) : /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleRegister }, /* @__PURE__ */ import_react2.default.createElement(
     "input",
     {
+      style: inputStyle,
       type: "text",
       placeholder: "Email",
       value: identifier,
-      onChange: (e) => setIdentifier(e.target.value)
+      onChange: (e) => setIdentifier(e.target.value),
+      required: true
     }
   ), /* @__PURE__ */ import_react2.default.createElement(
     "input",
     {
+      style: inputStyle,
       type: "password",
       placeholder: "Password",
       value: password,
-      onChange: (e) => setPassword(e.target.value)
+      onChange: (e) => setPassword(e.target.value),
+      required: true
     }
   ), /* @__PURE__ */ import_react2.default.createElement(
     "input",
     {
+      style: inputStyle,
       type: "text",
       placeholder: "Username (optional)",
       value: username,
@@ -2330,76 +2421,194 @@ function LoginRegisterFlow() {
   ), /* @__PURE__ */ import_react2.default.createElement(
     "input",
     {
+      style: inputStyle,
       type: "text",
       placeholder: "Phone (optional)",
       value: phone,
       onChange: (e) => setPhone(e.target.value)
     }
-  ), /* @__PURE__ */ import_react2.default.createElement("button", { type: "submit" }, "Register")), error && /* @__PURE__ */ import_react2.default.createElement("div", { style: { color: "red" } }, error));
+  ), /* @__PURE__ */ import_react2.default.createElement("button", { style: buttonStyle, type: "submit" }, "Register")), message && /* @__PURE__ */ import_react2.default.createElement("div", { style: messageStyle(success) }, message));
 }
 
 // src/components/LoginOnly.jsx
 var import_react3 = __toESM(require_react());
+var boxStyle2 = {
+  maxWidth: 350,
+  margin: "40px auto",
+  padding: 28,
+  borderRadius: 12,
+  boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
+  background: "#fff",
+  fontFamily: "sans-serif"
+};
+var inputStyle2 = {
+  width: "100%",
+  padding: 10,
+  margin: "10px 0",
+  borderRadius: 6,
+  border: "1px solid #ddd",
+  fontSize: 16
+};
+var buttonStyle2 = {
+  width: "100%",
+  padding: 12,
+  borderRadius: 6,
+  border: "none",
+  background: "#0070f3",
+  color: "#fff",
+  fontWeight: 600,
+  fontSize: 16,
+  marginTop: 10,
+  cursor: "pointer"
+};
+var messageStyle2 = (success) => ({
+  margin: "12px 0",
+  color: success ? "#0a0" : "#d32f2f",
+  background: success ? "#eafbe7" : "#fdeaea",
+  padding: 8,
+  borderRadius: 6,
+  textAlign: "center",
+  fontSize: 15
+});
 function LoginOnly() {
   const [identifier, setIdentifier] = (0, import_react3.useState)("");
   const [password, setPassword] = (0, import_react3.useState)("");
-  const [error, setError] = (0, import_react3.useState)(null);
+  const [message, setMessage] = (0, import_react3.useState)(null);
+  const [success, setSuccess] = (0, import_react3.useState)(false);
   const handleLogin = async (e) => {
     e.preventDefault();
-    const { error: error2 } = await signInWithEmail(identifier, password);
-    setError(error2 ? error2.message : null);
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await signInWithEmail(identifier, password);
+    if (error) {
+      setMessage(error.message || "Login failed");
+      setSuccess(false);
+    } else {
+      setMessage("Login successful!");
+      setSuccess(true);
+      setTimeout(() => {
+        setIdentifier("");
+        setPassword("");
+        setMessage(null);
+        setSuccess(false);
+      }, 1500);
+    }
   };
-  return /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleLogin }, /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement("div", { style: boxStyle2 }, /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleLogin }, /* @__PURE__ */ import_react3.default.createElement(
     "input",
     {
+      style: inputStyle2,
       type: "text",
       placeholder: "Email, phone, or username",
       value: identifier,
-      onChange: (e) => setIdentifier(e.target.value)
+      onChange: (e) => setIdentifier(e.target.value),
+      required: true
     }
   ), /* @__PURE__ */ import_react3.default.createElement(
     "input",
     {
+      style: inputStyle2,
       type: "password",
       placeholder: "Password",
       value: password,
-      onChange: (e) => setPassword(e.target.value)
+      onChange: (e) => setPassword(e.target.value),
+      required: true
     }
-  ), /* @__PURE__ */ import_react3.default.createElement("button", { type: "submit" }, "Login"), error && /* @__PURE__ */ import_react3.default.createElement("div", { style: { color: "red" } }, error));
+  ), /* @__PURE__ */ import_react3.default.createElement("button", { style: buttonStyle2, type: "submit" }, "Login")), message && /* @__PURE__ */ import_react3.default.createElement("div", { style: messageStyle2(success) }, message));
 }
 
 // src/components/RegisterOnly.jsx
 var import_react4 = __toESM(require_react());
+var boxStyle3 = {
+  maxWidth: 350,
+  margin: "40px auto",
+  padding: 28,
+  borderRadius: 12,
+  boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
+  background: "#fff",
+  fontFamily: "sans-serif"
+};
+var inputStyle3 = {
+  width: "100%",
+  padding: 10,
+  margin: "10px 0",
+  borderRadius: 6,
+  border: "1px solid #ddd",
+  fontSize: 16
+};
+var buttonStyle3 = {
+  width: "100%",
+  padding: 12,
+  borderRadius: 6,
+  border: "none",
+  background: "#0070f3",
+  color: "#fff",
+  fontWeight: 600,
+  fontSize: 16,
+  marginTop: 10,
+  cursor: "pointer"
+};
+var messageStyle3 = (success) => ({
+  margin: "12px 0",
+  color: success ? "#0a0" : "#d32f2f",
+  background: success ? "#eafbe7" : "#fdeaea",
+  padding: 8,
+  borderRadius: 6,
+  textAlign: "center",
+  fontSize: 15
+});
 function RegisterOnly() {
   const [email, setEmail] = (0, import_react4.useState)("");
   const [password, setPassword] = (0, import_react4.useState)("");
   const [username, setUsername] = (0, import_react4.useState)("");
   const [phone, setPhone] = (0, import_react4.useState)("");
-  const [error, setError] = (0, import_react4.useState)(null);
+  const [message, setMessage] = (0, import_react4.useState)(null);
+  const [success, setSuccess] = (0, import_react4.useState)(false);
   const handleRegister = async (e) => {
     e.preventDefault();
-    const { error: error2 } = await registerWithEmail(email, password, username, phone);
-    setError(error2 ? error2.message : null);
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await registerWithEmail(email, password, username, phone);
+    if (error) {
+      setMessage(error.message || "Registration failed");
+      setSuccess(false);
+    } else {
+      setMessage("Registration successful! Please check your email to confirm.");
+      setSuccess(true);
+      setTimeout(() => {
+        setEmail("");
+        setPassword("");
+        setUsername("");
+        setPhone("");
+        setMessage(null);
+        setSuccess(false);
+      }, 2e3);
+    }
   };
-  return /* @__PURE__ */ import_react4.default.createElement("form", { onSubmit: handleRegister }, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement("div", { style: boxStyle3 }, /* @__PURE__ */ import_react4.default.createElement("form", { onSubmit: handleRegister }, /* @__PURE__ */ import_react4.default.createElement(
     "input",
     {
+      style: inputStyle3,
       type: "text",
       placeholder: "Email",
       value: email,
-      onChange: (e) => setEmail(e.target.value)
+      onChange: (e) => setEmail(e.target.value),
+      required: true
     }
   ), /* @__PURE__ */ import_react4.default.createElement(
     "input",
     {
+      style: inputStyle3,
       type: "password",
       placeholder: "Password",
       value: password,
-      onChange: (e) => setPassword(e.target.value)
+      onChange: (e) => setPassword(e.target.value),
+      required: true
     }
   ), /* @__PURE__ */ import_react4.default.createElement(
     "input",
     {
+      style: inputStyle3,
       type: "text",
       placeholder: "Username (optional)",
       value: username,
@@ -2408,23 +2617,66 @@ function RegisterOnly() {
   ), /* @__PURE__ */ import_react4.default.createElement(
     "input",
     {
+      style: inputStyle3,
       type: "text",
       placeholder: "Phone (optional)",
       value: phone,
       onChange: (e) => setPhone(e.target.value)
     }
-  ), /* @__PURE__ */ import_react4.default.createElement("button", { type: "submit" }, "Register"), error && /* @__PURE__ */ import_react4.default.createElement("div", { style: { color: "red" } }, error));
+  ), /* @__PURE__ */ import_react4.default.createElement("button", { style: buttonStyle3, type: "submit" }, "Register")), message && /* @__PURE__ */ import_react4.default.createElement("div", { style: messageStyle3(success) }, message));
 }
 
 // src/components/LogoutButton.jsx
 var import_react5 = __toESM(require_react());
+var boxStyle4 = {
+  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"
+};
+var buttonStyle4 = {
+  padding: "10px 28px",
+  borderRadius: 6,
+  border: "none",
+  background: "#0070f3",
+  color: "#fff",
+  fontWeight: 600,
+  fontSize: 16,
+  cursor: "pointer"
+};
+var messageStyle4 = (success) => ({
+  margin: "12px 0",
+  color: success ? "#0a0" : "#d32f2f",
+  background: success ? "#eafbe7" : "#fdeaea",
+  padding: 8,
+  borderRadius: 6,
+  textAlign: "center",
+  fontSize: 15
+});
 function LogoutButton() {
-  const [error, setError] = (0, import_react5.useState)(null);
+  const [message, setMessage] = (0, import_react5.useState)(null);
+  const [success, setSuccess] = (0, import_react5.useState)(false);
   const handleLogout = async () => {
-    const { error: error2 } = await logout();
-    setError(error2 ? error2.message : null);
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await logout();
+    if (error) {
+      setMessage(error.message || "Logout failed");
+      setSuccess(false);
+    } else {
+      setMessage("Logout successful!");
+      setSuccess(true);
+      setTimeout(() => {
+        setMessage(null);
+        setSuccess(false);
+      }, 1500);
+    }
   };
-  return /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("button", { onClick: handleLogout }, "Logout"), error && /* @__PURE__ */ import_react5.default.createElement("div", { style: { color: "red" } }, error));
+  return /* @__PURE__ */ import_react5.default.createElement("div", { style: boxStyle4 }, /* @__PURE__ */ import_react5.default.createElement("button", { style: buttonStyle4, onClick: handleLogout }, "Logout"), message && /* @__PURE__ */ import_react5.default.createElement("div", { style: messageStyle4(success) }, message));
 }
 export {
   LoginOnly,

package/package.json

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

package/src/components/LoginOnly.jsx

@@ -1,33 +1,96 @@
 import React, { useState } from 'react';
 import { signInWithEmail } from '../login';
 
+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('');
   const [password, setPassword] = useState('');
-  const [error, setError] = useState(null);
+  const [message, setMessage] = useState(null);
+  const [success, setSuccess] = useState(false);
 
   const handleLogin = async (e) => {
     e.preventDefault();
+    setMessage(null);
+    setSuccess(false);
     const { error } = await signInWithEmail(identifier, password);
-    setError(error ? error.message : null);
+    if (error) {
+      setMessage(error.message || 'Login failed');
+      setSuccess(false);
+    } else {
+      setMessage('Login successful!');
+      setSuccess(true);
+      setTimeout(() => {
+        setIdentifier('');
+        setPassword('');
+        setMessage(null);
+        setSuccess(false);
+      }, 1500);
+    }
   };
 
   return (
-    <form onSubmit={handleLogin}>
-      <input
-        type="text"
-        placeholder="Email, phone, or username"
-        value={identifier}
-        onChange={e => setIdentifier(e.target.value)}
-      />
-      <input
-        type="password"
-        placeholder="Password"
-        value={password}
-        onChange={e => setPassword(e.target.value)}
-      />
-      <button type="submit">Login</button>
-      {error && <div style={{ color: 'red' }}>{error}</div>}
-    </form>
+    <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>
   );
 }