login-signup-google 1.0.0 → 1.0.2

package/dist/GoogleLogin.js

@@ -0,0 +1,42 @@
+import React, { useEffect } from "react";
+export default function GoogleLogin({
+  clientId,
+  onSuccess
+}) {
+  useEffect(() => {
+    if (!clientId) {
+      console.error("Google Client ID missing");
+      return;
+    }
+
+    // Avoid loading script multiple times
+    if (document.getElementById("google-gsi-script")) {
+      initGoogle();
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = "google-gsi-script";
+    script.src = "https://accounts.google.com/gsi/client";
+    script.async = true;
+    script.defer = true;
+    document.body.appendChild(script);
+    script.onload = initGoogle;
+    function initGoogle() {
+      if (!window.google) return;
+      window.google.accounts.id.initialize({
+        client_id: clientId,
+        callback: response => {
+          onSuccess && onSuccess(response);
+        }
+      });
+      window.google.accounts.id.renderButton(document.getElementById("googleBtn"), {
+        theme: "outline",
+        size: "large",
+        width: 300
+      });
+    }
+  }, [clientId, onSuccess]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "googleBtn"
+  });
+}

package/dist/Login.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+export default function Login({
+  onLogin
+}) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const submit = e => {
+    e.preventDefault();
+    if (!email || !password) {
+      alert("All fields required");
+      return;
+    }
+    onLogin && onLogin({
+      email,
+      password
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles.card
+  }, /*#__PURE__*/React.createElement("h2", {
+    style: styles.title
+  }, "Login"), /*#__PURE__*/React.createElement("form", {
+    onSubmit: submit
+  }, /*#__PURE__*/React.createElement("input", {
+    style: styles.input,
+    placeholder: "Email",
+    value: email,
+    onChange: e => setEmail(e.target.value)
+  }), /*#__PURE__*/React.createElement("input", {
+    style: styles.input,
+    type: "password",
+    placeholder: "Password",
+    value: password,
+    onChange: e => setPassword(e.target.value)
+  }), /*#__PURE__*/React.createElement("button", {
+    style: styles.btn
+  }, "Login")));
+}
+const styles = {
+  card: {
+    width: 320,
+    padding: 20,
+    background: "#fff",
+    borderRadius: 10,
+    border: "2px solid #2ecc71"
+  },
+  title: {
+    textAlign: "center",
+    color: "#2ecc71"
+  },
+  input: {
+    width: "100%",
+    padding: 10,
+    marginBottom: 10,
+    border: "1px solid #2ecc71",
+    borderRadius: 5
+  },
+  btn: {
+    width: "100%",
+    padding: 10,
+    background: "#2ecc71",
+    color: "#fff",
+    border: "none",
+    borderRadius: 5,
+    cursor: "pointer"
+  }
+};

package/dist/Signup.js

@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+export default function Signup({
+  onSuccess
+}) {
+  const [form, setForm] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    otp: ""
+  });
+  const [otpSent, setOtpSent] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const handleChange = e => {
+    setForm({
+      ...form,
+      [e.target.name]: e.target.value
+    });
+  };
+  const sendOtp = () => {
+    if (!form.phone) {
+      alert("Enter phone number");
+      return;
+    }
+    setOtpSent(true);
+    alert("OTP sent (demo)");
+  };
+  const submit = e => {
+    e.preventDefault();
+    if (!form.otp) {
+      alert("Enter OTP");
+      return;
+    }
+    setSuccess(true);
+    onSuccess && onSuccess(form);
+  };
+  if (success) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: styles.card
+    }, /*#__PURE__*/React.createElement("h2", {
+      style: {
+        color: "#2ecc71"
+      }
+    }, "Signup Successful \u2705"), /*#__PURE__*/React.createElement("p", null, "Welcome ", form.firstName));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles.card
+  }, /*#__PURE__*/React.createElement("h2", {
+    style: styles.title
+  }, "Signup"), /*#__PURE__*/React.createElement("input", {
+    name: "firstName",
+    style: styles.input,
+    placeholder: "First Name",
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement("input", {
+    name: "lastName",
+    style: styles.input,
+    placeholder: "Last Name",
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement("input", {
+    name: "email",
+    style: styles.input,
+    placeholder: "Email",
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement("input", {
+    name: "phone",
+    style: styles.input,
+    placeholder: "Phone Number",
+    onChange: handleChange
+  }), !otpSent ? /*#__PURE__*/React.createElement("button", {
+    style: styles.btn,
+    onClick: sendOtp
+  }, "Send OTP") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    name: "otp",
+    style: styles.input,
+    placeholder: "Enter OTP",
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement("button", {
+    style: styles.btn,
+    onClick: submit
+  }, "Verify & Signup")));
+}
+const styles = {
+  card: {
+    width: 350,
+    padding: 20,
+    background: "#fff",
+    borderRadius: 10,
+    border: "2px solid #2ecc71"
+  },
+  title: {
+    textAlign: "center",
+    color: "#2ecc71"
+  },
+  input: {
+    width: "100%",
+    padding: 10,
+    marginBottom: 10,
+    border: "1px solid #2ecc71",
+    borderRadius: 5
+  },
+  btn: {
+    width: "100%",
+    padding: 10,
+    background: "#2ecc71",
+    color: "#fff",
+    border: "none",
+    borderRadius: 5,
+    cursor: "pointer"
+  }
+};

package/{src → dist}/index.js

@@ -1,4 +1,3 @@
-// src/index.js
-export { default as Login } from "./Login";
-export { default as Signup } from "./Signup";
-export { default as GoogleLogin } from "./GoogleLogin";
+export { default as Login } from "./Login";
+export { default as Signup } from "./Signup";
+export { default as GoogleLogin } from "./GoogleLogin";

package/package.json

@@ -1,13 +1,28 @@
 {
   "name": "login-signup-google",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Reusable React Login, Signup and Google Login components",
-  "main": "src/index.js",
-  "keywords": ["react", "login", "signup", "google-auth"],
-  "author": "Your Name",
+  "main": "dist/index.js",
+  "keywords": [
+    "react",
+    "login",
+    "signup",
+    "google-auth"
+  ],
+  "author": "sowjanya",
   "license": "MIT",
-
   "peerDependencies": {
     "react": ">=18"
+  },
+  "scripts": {
+    "build": "babel src --out-dir dist --extensions .js,.jsx"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.28.6",
+    "@babel/preset-react": "^7.28.5"
   }
 }

package/src/GoogleLogin.jsx

@@ -1,26 +0,0 @@
-// src/GoogleLogin.jsx
-import { useEffect } from "react";
-
-export default function GoogleLogin({ clientId, onSuccess }) {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = "https://accounts.google.com/gsi/client";
-    script.async = true;
-    script.defer = true;
-    document.body.appendChild(script);
-
-    script.onload = () => {
-      window.google.accounts.id.initialize({
-        client_id: clientId,
-        callback: onSuccess,
-      });
-
-      window.google.accounts.id.renderButton(
-        document.getElementById("googleBtn"),
-        { theme: "outline", size: "large" }
-      );
-    };
-  }, [clientId, onSuccess]);
-
-  return <div id="googleBtn"></div>;
-}

package/src/Login.jsx

@@ -1,12 +0,0 @@
-// src/Login.jsx
-export default function Login({ onLogin }) {
-    return (
-      <div>
-        <h3>Login</h3>
-        <input placeholder="Email" />
-        <input type="password" placeholder="Password" />
-        <button onClick={onLogin}>Login</button>
-      </div>
-    );
-  }
-  

package/src/Signup.jsx

@@ -1,12 +0,0 @@
-// src/Signup.jsx
-export default function Signup({ onSignup }) {
-    return (
-      <div>
-        <h3>Signup</h3>
-        <input placeholder="Email" />
-        <input type="password" placeholder="Password" />
-        <button onClick={onSignup}>Signup</button>
-      </div>
-    );
-  }
-