login-signup-google 1.0.1 → 1.0.2

package/dist/GoogleLogin.js

@@ -8,22 +8,33 @@ export default function GoogleLogin({
       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 = () => {
+    script.onload = initGoogle;
+    function initGoogle() {
+      if (!window.google) return;
       window.google.accounts.id.initialize({
         client_id: clientId,
-        callback: onSuccess
+        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

@@ -4,26 +4,25 @@ export default function Login({
 }) {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const handleSubmit = e => {
+  const submit = e => {
     e.preventDefault();
     if (!email || !password) {
-      alert("Please enter email and password");
+      alert("All fields required");
       return;
     }
-
-    // send data to parent app
     onLogin && onLogin({
       email,
       password
     });
   };
   return /*#__PURE__*/React.createElement("div", {
-    style: styles.box
-  }, /*#__PURE__*/React.createElement("h2", null, "Login"), /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit
+    style: styles.card
+  }, /*#__PURE__*/React.createElement("h2", {
+    style: styles.title
+  }, "Login"), /*#__PURE__*/React.createElement("form", {
+    onSubmit: submit
   }, /*#__PURE__*/React.createElement("input", {
     style: styles.input,
-    type: "email",
     placeholder: "Email",
     value: email,
     onChange: e => setEmail(e.target.value)
@@ -34,26 +33,35 @@ export default function Login({
     value: password,
     onChange: e => setPassword(e.target.value)
   }), /*#__PURE__*/React.createElement("button", {
-    style: styles.button,
-    type: "submit"
+    style: styles.btn
   }, "Login")));
 }
 const styles = {
-  box: {
-    width: 300,
+  card: {
+    width: 320,
     padding: 20,
-    border: "1px solid #ddd",
-    borderRadius: 8,
-    marginBottom: 20
+    background: "#fff",
+    borderRadius: 10,
+    border: "2px solid #2ecc71"
+  },
+  title: {
+    textAlign: "center",
+    color: "#2ecc71"
   },
   input: {
     width: "100%",
-    padding: 8,
-    marginBottom: 10
+    padding: 10,
+    marginBottom: 10,
+    border: "1px solid #2ecc71",
+    borderRadius: 5
   },
-  button: {
+  btn: {
     width: "100%",
     padding: 10,
+    background: "#2ecc71",
+    color: "#fff",
+    border: "none",
+    borderRadius: 5,
     cursor: "pointer"
   }
 };

package/dist/Signup.js

@@ -1,57 +1,111 @@
 import React, { useState } from "react";
 export default function Signup({
-  onSignup
+  onSuccess
 }) {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const handleSubmit = e => {
+  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 (!email || !password) {
-      alert("Please enter email and password");
+    if (!form.otp) {
+      alert("Enter OTP");
       return;
     }
-    onSignup && onSignup({
-      email,
-      password
-    });
+    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.box
-  }, /*#__PURE__*/React.createElement("h2", null, "Signup"), /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit
-  }, /*#__PURE__*/React.createElement("input", {
+    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,
-    type: "email",
     placeholder: "Email",
-    value: email,
-    onChange: e => setEmail(e.target.value)
+    onChange: handleChange
   }), /*#__PURE__*/React.createElement("input", {
+    name: "phone",
     style: styles.input,
-    type: "password",
-    placeholder: "Password",
-    value: password,
-    onChange: e => setPassword(e.target.value)
+    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.button,
-    type: "submit"
-  }, "Signup")));
+    style: styles.btn,
+    onClick: submit
+  }, "Verify & Signup")));
 }
 const styles = {
-  box: {
-    width: 300,
+  card: {
+    width: 350,
     padding: 20,
-    border: "1px solid #ddd",
-    borderRadius: 8,
-    marginBottom: 20
+    background: "#fff",
+    borderRadius: 10,
+    border: "2px solid #2ecc71"
+  },
+  title: {
+    textAlign: "center",
+    color: "#2ecc71"
   },
   input: {
     width: "100%",
-    padding: 8,
-    marginBottom: 10
+    padding: 10,
+    marginBottom: 10,
+    border: "1px solid #2ecc71",
+    borderRadius: 5
   },
-  button: {
+  btn: {
     width: "100%",
     padding: 10,
+    background: "#2ecc71",
+    color: "#fff",
+    border: "none",
+    borderRadius: 5,
     cursor: "pointer"
   }
 };

package/package.json

@@ -1,29 +1,25 @@
 {
   "name": "login-signup-google",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Reusable React Login, Signup and Google Login components",
   "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"],
-
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@babel/cli": "^7.28.6",
     "@babel/core": "^7.28.6",