login-signup-google 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/{GoogleLogin.js → GoogleButton.js} +14 -3
  2. package/dist/Login.js +42 -20
  3. package/dist/Signup.js +116 -33
  4. package/dist/index.js +1 -1
  5. package/package.json +67 -10
package/dist/{GoogleLogin.js → GoogleButton.js} RENAMED
@@ -8,22 +8,33 @@ export default function GoogleLogin({
8
8
  console.error("Google Client ID missing");
9
9
  return;
10
10
  }
11
+
12
+ // Avoid loading script multiple times
13
+ if (document.getElementById("google-gsi-script")) {
14
+ initGoogle();
15
+ return;
16
+ }
11
17
  const script = document.createElement("script");
18
+ script.id = "google-gsi-script";
12
19
  script.src = "https://accounts.google.com/gsi/client";
13
20
  script.async = true;
14
21
  script.defer = true;
15
22
  document.body.appendChild(script);
16
- script.onload = () => {
23
+ script.onload = initGoogle;
24
+ function initGoogle() {
25
+ if (!window.google) return;
17
26
  window.google.accounts.id.initialize({
18
27
  client_id: clientId,
19
- callback: onSuccess
28
+ callback: response => {
29
+ onSuccess && onSuccess(response);
30
+ }
20
31
  });
21
32
  window.google.accounts.id.renderButton(document.getElementById("googleBtn"), {
22
33
  theme: "outline",
23
34
  size: "large",
24
35
  width: 300
25
36
  });
26
- };
37
+ }
27
38
  }, [clientId, onSuccess]);
28
39
  return /*#__PURE__*/React.createElement("div", {
29
40
  id: "googleBtn"
package/dist/Login.js CHANGED
@@ -4,27 +4,27 @@ export default function Login({
4
4
  }) {
5
5
  const [email, setEmail] = useState("");
6
6
  const [password, setPassword] = useState("");
7
- const handleSubmit = e => {
7
+ const submit = e => {
8
8
  e.preventDefault();
9
9
  if (!email || !password) {
10
- alert("Please enter email and password");
10
+ alert("All fields required");
11
11
  return;
12
12
  }
13
-
14
- // send data to parent app
15
13
  onLogin && onLogin({
16
14
  email,
17
15
  password
18
16
  });
19
17
  };
20
18
  return /*#__PURE__*/React.createElement("div", {
21
- style: styles.box
22
- }, /*#__PURE__*/React.createElement("h2", null, "Login"), /*#__PURE__*/React.createElement("form", {
23
- onSubmit: handleSubmit
19
+ style: styles.card
20
+ }, /*#__PURE__*/React.createElement("h2", {
21
+ style: styles.title
22
+ }, "Welcome back"), /*#__PURE__*/React.createElement("form", {
23
+ onSubmit: submit
24
24
  }, /*#__PURE__*/React.createElement("input", {
25
25
  style: styles.input,
26
- type: "email",
27
26
  placeholder: "Email",
27
+ type: "email",
28
28
  value: email,
29
29
  onChange: e => setEmail(e.target.value)
30
30
  }), /*#__PURE__*/React.createElement("input", {
@@ -34,26 +34,48 @@ export default function Login({
34
34
  value: password,
35
35
  onChange: e => setPassword(e.target.value)
36
36
  }), /*#__PURE__*/React.createElement("button", {
37
- style: styles.button,
37
+ style: styles.btn,
38
38
  type: "submit"
39
39
  }, "Login")));
40
40
  }
41
41
  const styles = {
42
- box: {
43
- width: 300,
44
- padding: 20,
45
- border: "1px solid #ddd",
46
- borderRadius: 8,
47
- marginBottom: 20
42
+ card: {
43
+ width: "100%",
44
+ maxWidth: 420,
45
+ padding: 24,
46
+ background: "#fff",
47
+ borderRadius: 14,
48
+ border: "1px solid rgba(46, 204, 113, 0.35)",
49
+ boxShadow: "0 10px 30px rgba(0,0,0,0.08)",
50
+ boxSizing: "border-box"
51
+ },
52
+ title: {
53
+ textAlign: "center",
54
+ color: "#16a34a",
55
+ marginTop: 0,
56
+ marginBottom: 16,
57
+ fontSize: 28,
58
+ fontWeight: 700,
59
+ letterSpacing: "0.2px"
48
60
  },
49
61
  input: {
50
62
  width: "100%",
51
- padding: 8,
52
- marginBottom: 10
63
+ padding: "12px 12px",
64
+ marginBottom: 12,
65
+ border: "1px solid rgba(46, 204, 113, 0.6)",
66
+ borderRadius: 10,
67
+ outline: "none",
68
+ boxSizing: "border-box"
53
69
  },
54
- button: {
70
+ btn: {
55
71
  width: "100%",
56
- padding: 10,
57
- cursor: "pointer"
72
+ padding: "12px 12px",
73
+ background: "linear-gradient(90deg, #22c55e, #16a34a)",
74
+ color: "#fff",
75
+ border: "none",
76
+ borderRadius: 10,
77
+ cursor: "pointer",
78
+ fontWeight: 700,
79
+ letterSpacing: "0.2px"
58
80
  }
59
81
  };
package/dist/Signup.js CHANGED
@@ -1,57 +1,140 @@
1
1
  import React, { useState } from "react";
2
2
  export default function Signup({
3
- onSignup
3
+ onSuccess
4
4
  }) {
5
- const [email, setEmail] = useState("");
6
- const [password, setPassword] = useState("");
7
- const handleSubmit = e => {
5
+ const [form, setForm] = useState({
6
+ firstName: "",
7
+ lastName: "",
8
+ email: "",
9
+ phone: "",
10
+ password: ""
11
+ });
12
+ const [loading, setLoading] = useState(false);
13
+ const [message, setMessage] = useState("");
14
+ const handleChange = e => {
15
+ setForm({
16
+ ...form,
17
+ [e.target.name]: e.target.value
18
+ });
19
+ };
20
+ const submit = async e => {
8
21
  e.preventDefault();
9
- if (!email || !password) {
10
- alert("Please enter email and password");
22
+ if (!form.firstName || !form.email || !form.password) {
23
+ alert("First name, email and password are required");
11
24
  return;
12
25
  }
13
- onSignup && onSignup({
14
- email,
15
- password
16
- });
26
+ setLoading(true);
27
+ try {
28
+ setMessage("");
29
+ onSuccess && onSuccess({
30
+ username: `${form.firstName} ${form.lastName}`.trim(),
31
+ email: form.email,
32
+ phone: form.phone,
33
+ password: form.password
34
+ });
35
+ setMessage("Signup submitted ✅");
36
+ } catch (err) {
37
+ setMessage("Signup failed");
38
+ } finally {
39
+ setLoading(false);
40
+ }
17
41
  };
18
42
  return /*#__PURE__*/React.createElement("div", {
19
- style: styles.box
20
- }, /*#__PURE__*/React.createElement("h2", null, "Signup"), /*#__PURE__*/React.createElement("form", {
21
- onSubmit: handleSubmit
43
+ style: styles.card
44
+ }, /*#__PURE__*/React.createElement("h2", {
45
+ style: styles.title
46
+ }, "Create account"), /*#__PURE__*/React.createElement("form", {
47
+ onSubmit: submit,
48
+ style: styles.form
49
+ }, /*#__PURE__*/React.createElement("div", {
50
+ style: styles.row
22
51
  }, /*#__PURE__*/React.createElement("input", {
52
+ name: "firstName",
53
+ style: styles.input,
54
+ placeholder: "First Name",
55
+ onChange: handleChange
56
+ }), /*#__PURE__*/React.createElement("input", {
57
+ name: "lastName",
58
+ style: styles.input,
59
+ placeholder: "Last Name",
60
+ onChange: handleChange
61
+ })), /*#__PURE__*/React.createElement("input", {
62
+ name: "email",
23
63
  style: styles.input,
24
- type: "email",
25
64
  placeholder: "Email",
26
- value: email,
27
- onChange: e => setEmail(e.target.value)
65
+ onChange: handleChange
28
66
  }), /*#__PURE__*/React.createElement("input", {
67
+ name: "phone",
68
+ style: styles.input,
69
+ placeholder: "Phone",
70
+ onChange: handleChange
71
+ }), /*#__PURE__*/React.createElement("input", {
72
+ name: "password",
29
73
  style: styles.input,
30
- type: "password",
31
74
  placeholder: "Password",
32
- value: password,
33
- onChange: e => setPassword(e.target.value)
75
+ type: "password",
76
+ onChange: handleChange
34
77
  }), /*#__PURE__*/React.createElement("button", {
35
- style: styles.button,
36
- type: "submit"
37
- }, "Signup")));
78
+ style: styles.btn,
79
+ type: "submit",
80
+ disabled: loading
81
+ }, loading ? "Creating..." : "Sign up")), message && /*#__PURE__*/React.createElement("p", {
82
+ style: styles.message
83
+ }, message));
38
84
  }
39
85
  const styles = {
40
- box: {
41
- width: 300,
42
- padding: 20,
43
- border: "1px solid #ddd",
44
- borderRadius: 8,
45
- marginBottom: 20
86
+ card: {
87
+ width: "100%",
88
+ maxWidth: 420,
89
+ padding: 24,
90
+ background: "#fff",
91
+ borderRadius: 14,
92
+ border: "1px solid rgba(46, 204, 113, 0.35)",
93
+ boxShadow: "0 10px 30px rgba(0,0,0,0.08)",
94
+ boxSizing: "border-box"
95
+ },
96
+ title: {
97
+ textAlign: "center",
98
+ color: "#16a34a",
99
+ marginTop: 0,
100
+ marginBottom: 16,
101
+ fontSize: 28,
102
+ fontWeight: 700,
103
+ letterSpacing: "0.2px"
104
+ },
105
+ form: {
106
+ display: "flex",
107
+ flexDirection: "column",
108
+ gap: 12
109
+ },
110
+ row: {
111
+ display: "flex",
112
+ gap: 12,
113
+ flexWrap: "wrap"
46
114
  },
47
115
  input: {
116
+ flex: "1 1 180px",
48
117
  width: "100%",
49
- padding: 8,
50
- marginBottom: 10
118
+ padding: "12px 12px",
119
+ border: "1px solid rgba(46, 204, 113, 0.6)",
120
+ borderRadius: 10,
121
+ outline: "none",
122
+ boxSizing: "border-box"
51
123
  },
52
- button: {
124
+ btn: {
53
125
  width: "100%",
54
- padding: 10,
55
- cursor: "pointer"
126
+ padding: "12px 12px",
127
+ background: "linear-gradient(90deg, #22c55e, #16a34a)",
128
+ color: "#fff",
129
+ border: "none",
130
+ borderRadius: 10,
131
+ cursor: "pointer",
132
+ fontWeight: 700,
133
+ letterSpacing: "0.2px"
134
+ },
135
+ message: {
136
+ marginTop: 12,
137
+ textAlign: "center",
138
+ color: "#16a34a"
56
139
  }
57
140
  };
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  export { default as Login } from "./Login";
2
2
  export { default as Signup } from "./Signup";
3
- export { default as GoogleLogin } from "./GoogleLogin";
3
+ export { default as GoogleButton } from "./GoogleButton";
package/package.json CHANGED
@@ -1,32 +1,89 @@
1
1
  {
2
2
  "name": "login-signup-google",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Reusable React Login, Signup and Google Login components",
5
5
  "main": "dist/index.js",
6
-
7
6
  "keywords": [
8
7
  "react",
9
8
  "login",
10
9
  "signup",
11
10
  "google-auth"
12
11
  ],
13
-
14
12
  "author": "sowjanya",
15
13
  "license": "MIT",
16
-
17
14
  "peerDependencies": {
18
15
  "react": ">=18"
19
16
  },
20
-
21
17
  "scripts": {
22
18
  "build": "babel src --out-dir dist --extensions .js,.jsx"
23
19
  },
24
-
25
- "files": ["dist"],
26
-
20
+ "files": [
21
+ "dist"
22
+ ],
27
23
  "devDependencies": {
28
24
  "@babel/cli": "^7.28.6",
29
25
  "@babel/core": "^7.28.6",
30
- "@babel/preset-react": "^7.28.5"
31
- }
26
+ "@babel/preset-react": "^7.28.5",
27
+ "nodemon": "^3.1.11"
28
+ },
29
+ "dependencies": {
30
+ "anymatch": "^3.1.3",
31
+ "balanced-match": "^1.0.2",
32
+ "baseline-browser-mapping": "^2.9.15",
33
+ "bcryptjs": "^3.0.3",
34
+ "binary-extensions": "^2.3.0",
35
+ "brace-expansion": "^1.1.12",
36
+ "braces": "^3.0.3",
37
+ "browserslist": "^4.28.1",
38
+ "caniuse-lite": "^1.0.30001764",
39
+ "chokidar": "^3.6.0",
40
+ "commander": "^6.2.1",
41
+ "concat-map": "^0.0.1",
42
+ "convert-source-map": "^2.0.0",
43
+ "cors": "^2.8.5",
44
+ "debug": "^4.4.3",
45
+ "dotenv": "^17.2.3",
46
+ "electron-to-chromium": "^1.5.267",
47
+ "escalade": "^3.2.0",
48
+ "express": "^5.2.1",
49
+ "fill-range": "^7.1.1",
50
+ "fs-readdir-recursive": "^1.1.0",
51
+ "fs.realpath": "^1.0.0",
52
+ "gensync": "^1.0.0-beta.2",
53
+ "glob": "^7.2.3",
54
+ "glob-parent": "^5.1.2",
55
+ "google-auth-library": "^10.5.0",
56
+ "inflight": "^1.0.6",
57
+ "inherits": "^2.0.4",
58
+ "is-binary-path": "^2.1.0",
59
+ "is-extglob": "^2.1.1",
60
+ "is-glob": "^4.0.3",
61
+ "is-number": "^7.0.0",
62
+ "js-tokens": "^4.0.0",
63
+ "jsesc": "^3.1.0",
64
+ "json5": "^2.2.3",
65
+ "jsonwebtoken": "^9.0.3",
66
+ "lru-cache": "^5.1.1",
67
+ "make-dir": "^2.1.0",
68
+ "minimatch": "^3.1.2",
69
+ "mongoose": "^9.1.4",
70
+ "ms": "^2.1.3",
71
+ "node-releases": "^2.0.27",
72
+ "nodemailer": "^7.0.12",
73
+ "normalize-path": "^3.0.0",
74
+ "once": "^1.4.0",
75
+ "path-is-absolute": "^1.0.1",
76
+ "picocolors": "^1.1.1",
77
+ "picomatch": "^2.3.1",
78
+ "pify": "^4.0.1",
79
+ "react": ">=18",
80
+ "readdirp": "^3.6.0",
81
+ "semver": "^6.3.1",
82
+ "slash": "^2.0.0",
83
+ "to-regex-range": "^5.0.1",
84
+ "update-browserslist-db": "^1.2.3",
85
+ "wrappy": "^1.0.2",
86
+ "yallist": "^3.1.1"
87
+ },
88
+ "type": "commonjs"
32
89
  }