Skip to content

Commit a6295a6

Browse files
prafull-opensignlabsprafull-opensignlabs
committed
add password validation
1 parent f2f0b55 commit a6295a6

File tree

2 files changed

+221
-89
lines changed

2 files changed

+221
-89
lines changed

‎apps/OpenSign/src/routes/Pgsignup.js‎

Lines changed: 54 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ const PgSignUp = (props) => {
2121
});
2222
const [validationMessage, setValidationMessage] = useState("");
2323
const [isLoader, setIsLoader] = useState(true);
24+
const [lengthValid, setLengthValid] = useState(false);
25+
const [caseDigitValid, setCaseDigitValid] = useState(false);
26+
const [specialCharValid, setSpecialCharValid] = useState(false);
2427

2528
// below useEffect is used to fetch App data and save to redux state
2629
useEffect(() => {
@@ -104,21 +107,23 @@ const PgSignUp = (props) => {
104107
// "handleSubmit" is used to save user details signup him/her who come from plan-pricing page
105108
const handleSubmit = (e) => {
106109
e.preventDefault();
107-
setIsLoader(true);
108-
if (formData.password === formData.confirmPassword) {
109-
const url = window.location.href;
110-
let paramString = url.split("?")[1];
111-
let queryString = new URLSearchParams(paramString);
112-
// console.log("url ", queryString);
110+
if (lengthValid && caseDigitValid && specialCharValid) {
111+
setIsLoader(true);
112+
if (formData.password === formData.confirmPassword) {
113+
const url = window.location.href;
114+
let paramString = url.split("?")[1];
115+
let queryString = new URLSearchParams(paramString);
116+
// console.log("url ", queryString);
113117

114-
let obj = { ...formData };
115-
for (let pair of queryString.entries()) {
116-
// console.log("Key is: " + pair[0]);
117-
// console.log("Value is: " + pair[1]);
118-
obj = { ...obj, [pair[0]]: pair[1] };
118+
let obj = { ...formData };
119+
for (let pair of queryString.entries()) {
120+
// console.log("Key is: " + pair[0]);
121+
// console.log("Value is: " + pair[1]);
122+
obj = { ...obj, [pair[0]]: pair[1] };
123+
}
124+
saveUser(obj);
125+
// console.log("obj ", obj);}
119126
}
120-
saveUser(obj);
121-
// console.log("obj ", obj);}
122127
}
123128
};
124129
const saveUser = async (obj) => {
@@ -194,6 +199,15 @@ const PgSignUp = (props) => {
194199
const newPassword = e.target.value;
195200
setFormData({ ...formData, [e.target.name]: e.target.value });
196201
validatePasswords(newPassword, formData.confirmPassword);
202+
203+
// Check conditions separately
204+
setLengthValid(newPassword.length >= 8);
205+
setCaseDigitValid(
206+
/[a-z]/.test(newPassword) &&
207+
/[A-Z]/.test(newPassword) &&
208+
/\d/.test(newPassword)
209+
);
210+
setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
197211
};
198212
const handleConFirmPassowordChange = (e) => {
199213
const newConfirmPassword = e.target.value;
@@ -485,6 +499,33 @@ const PgSignUp = (props) => {
485499
>
486500
{validationMessage}
487501
</div>
502+
{formData.password.length > 0 && (
503+
<div className="mt-1 text-[11px]">
504+
<p
505+
className={`${
506+
lengthValid ? "text-green-600" : "text-red-600"
507+
}`}
508+
>
509+
{lengthValid ? "✓" : "✗"} Password should be 8 characters long
510+
</p>
511+
<p
512+
className={`${
513+
caseDigitValid ? "text-green-600" : "text-red-600"
514+
}`}
515+
>
516+
{caseDigitValid ? "✓" : "✗"} Password should contain uppercase
517+
letter, lowercase letter, digit
518+
</p>
519+
<p
520+
className={`${
521+
specialCharValid ? "text-green-600" : "text-red-600"
522+
}`}
523+
>
524+
{specialCharValid ? "✓" : "✗"} Password should contain special
525+
character
526+
</p>
527+
</div>
528+
)}
488529
<div className="clearfix">
489530
<button type="submit" className="signupbtn">
490531
Submit

‎apps/OpenSign/src/routes/Signup.js‎

Lines changed: 167 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -25,92 +25,138 @@ const Signup = (props) => {
2525
toastDescription: ""
2626
});
2727
const [showPassword, setShowPassword] = useState(false);
28+
const [lengthValid, setLengthValid] = useState(false);
29+
const [caseDigitValid, setCaseDigitValid] = useState(false);
30+
const [specialCharValid, setSpecialCharValid] = useState(false);
31+
2832
const togglePasswordVisibility = () => setShowPassword(!showPassword);
2933
const image = props.appInfo.applogo;
3034

35+
const clearStorage = async () => {
36+
if (Parse.User.current()) {
37+
await Parse.User.logOut();
38+
}
39+
let baseUrl = localStorage.getItem("BaseUrl12");
40+
let appid = localStorage.getItem("AppID12");
41+
let applogo = localStorage.getItem("appLogo");
42+
let domain = localStorage.getItem("domain");
43+
let appversion = localStorage.getItem("appVersion");
44+
let appTitle = localStorage.getItem("appTitle");
45+
let defaultmenuid = localStorage.getItem("defaultmenuid");
46+
let PageLanding = localStorage.getItem("PageLanding");
47+
let _appName = localStorage.getItem("_appName");
48+
let _app_objectId = localStorage.getItem("_app_objectId");
49+
let appName = localStorage.getItem("appName");
50+
let userSettings = localStorage.getItem("userSettings");
51+
52+
localStorage.clear();
53+
54+
localStorage.setItem("BaseUrl12", baseUrl);
55+
localStorage.setItem("AppID12", appid);
56+
localStorage.setItem("appLogo", applogo);
57+
localStorage.setItem("domain", domain);
58+
localStorage.setItem("appversion", appversion);
59+
localStorage.setItem("appTitle", appTitle);
60+
localStorage.setItem("defaultmenuid", defaultmenuid);
61+
localStorage.setItem("PageLanding", PageLanding);
62+
localStorage.setItem("_appName", _appName);
63+
localStorage.setItem("_app_objectId", _app_objectId);
64+
localStorage.setItem("appName", appName);
65+
localStorage.setItem("userSettings", userSettings);
66+
localStorage.setItem("baseUrl", baseUrl);
67+
localStorage.setItem("parseAppId", appid);
68+
};
3169
const handleSubmit = (event) => {
32-
setState({ loading: true });
33-
const userDetails = {
34-
name: name,
35-
email: email,
36-
phone: phone,
37-
company: company,
38-
jobTitle: jobTitle
39-
};
40-
localStorage.setItem("userDetails", JSON.stringify(userDetails));
41-
try {
42-
event.preventDefault();
43-
Parse.serverURL = parseBaseUrl;
44-
Parse.initialize(parseAppId);
45-
event.preventDefault();
46-
var user = new Parse.User();
47-
user.set("name", name);
48-
user.set("email", email);
49-
user.set("password", password);
50-
user.set("phone", phone);
51-
user.set("username", email);
52-
let res = user.save();
53-
res
54-
.then(async (r) => {
55-
if (r) {
56-
let roleData = props.appInfo.settings;
57-
if (roleData && roleData.length > 0) {
58-
const params = {
59-
userDetails: {
60-
jobTitle: jobTitle,
61-
company: company,
62-
name: name,
63-
email: email,
64-
phone: phone,
65-
role: props.appInfo.defaultRole
66-
}
67-
};
68-
try {
69-
const usersignup = await Parse.Cloud.run("usersignup", params);
70-
if (usersignup) {
71-
handleNavigation(r.getSessionToken());
70+
event.preventDefault();
71+
if (lengthValid && caseDigitValid && specialCharValid) {
72+
clearStorage();
73+
setState({ loading: true });
74+
const userDetails = {
75+
name: name,
76+
email: email,
77+
phone: phone,
78+
company: company,
79+
jobTitle: jobTitle
80+
};
81+
localStorage.setItem("userDetails", JSON.stringify(userDetails));
82+
try {
83+
Parse.serverURL = parseBaseUrl;
84+
Parse.initialize(parseAppId);
85+
event.preventDefault();
86+
var user = new Parse.User();
87+
user.set("name", name);
88+
user.set("email", email);
89+
user.set("password", password);
90+
user.set("phone", phone);
91+
user.set("username", email);
92+
let res = user.save();
93+
res
94+
.then(async (r) => {
95+
if (r) {
96+
let roleData = props.appInfo.settings;
97+
if (roleData && roleData.length > 0) {
98+
const params = {
99+
userDetails: {
100+
jobTitle: jobTitle,
101+
company: company,
102+
name: name,
103+
email: email,
104+
phone: phone,
105+
role: props.appInfo.defaultRole
106+
}
107+
};
108+
try {
109+
const usersignup = await Parse.Cloud.run(
110+
"usersignup",
111+
params
112+
);
113+
if (usersignup) {
114+
handleNavigation(r.getSessionToken());
115+
}
116+
} catch (err) {
117+
alert(err.message);
118+
setState({ loading: false });
72119
}
73-
} catch (err) {
74-
alert(err.message);
75-
setState({ loading: false });
76120
}
77121
}
78-
}
79-
})
80-
.catch(async (err) => {
81-
if (err.code === 202) {
82-
const params = { email: email };
83-
const res = await Parse.Cloud.run("getUserDetails", params);
84-
// console.log("Res ", res);
85-
if (res) {
86-
alert("User already exists with this username!");
87-
setState({ loading: false });
88-
} else {
89-
let baseUrl = localStorage.getItem("BaseUrl12");
90-
let parseAppId = localStorage.getItem("AppID12");
91-
// console.log("state.email ", email);
92-
try {
93-
Parse.serverURL = baseUrl;
94-
Parse.initialize(parseAppId);
95-
await Parse.User.requestPasswordReset(email).then(
96-
async function (res1) {
97-
if (res1.data === undefined) {
98-
alert("Verification mail has been sent to your E-mail!");
122+
})
123+
.catch(async (err) => {
124+
if (err.code === 202) {
125+
const params = { email: email };
126+
const res = await Parse.Cloud.run("getUserDetails", params);
127+
// console.log("Res ", res);
128+
if (res) {
129+
alert("User already exists with this username!");
130+
setState({ loading: false });
131+
} else {
132+
let baseUrl = localStorage.getItem("BaseUrl12");
133+
let parseAppId = localStorage.getItem("AppID12");
134+
// console.log("state.email ", email);
135+
try {
136+
Parse.serverURL = baseUrl;
137+
Parse.initialize(parseAppId);
138+
await Parse.User.requestPasswordReset(email).then(
139+
async function (res1) {
140+
if (res1.data === undefined) {
141+
alert(
142+
"Verification mail has been sent to your E-mail!"
143+
);
144+
}
99145
}
100-
}
101-
);
102-
} catch (err) {
103-
console.log(err);
146+
);
147+
} catch (err) {
148+
console.log(err);
149+
}
150+
setState({ loading: false });
104151
}
152+
} else {
153+
alert(err.message);
105154
setState({ loading: false });
106155
}
107-
} else {
108-
alert(err.message);
109-
setState({ loading: false });
110-
}
111-
});
112-
} catch (error) {
113-
console.log("err ", error);
156+
});
157+
} catch (error) {
158+
console.log("err ", error);
159+
}
114160
}
115161
};
116162

@@ -396,6 +442,19 @@ const Signup = (props) => {
396442
// eslint-disable-next-line
397443
}, []);
398444

445+
const handlePasswordChange = (e) => {
446+
const newPassword = e.target.value;
447+
setPassword(newPassword);
448+
449+
// Check conditions separately
450+
setLengthValid(newPassword.length >= 8);
451+
setCaseDigitValid(
452+
/[a-z]/.test(newPassword) &&
453+
/[A-Z]/.test(newPassword) &&
454+
/\d/.test(newPassword)
455+
);
456+
setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
457+
};
399458
return (
400459
<div className="bg-white">
401460
{state.loading && (
@@ -508,7 +567,7 @@ const Signup = (props) => {
508567
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
509568
name="password"
510569
value={password}
511-
onChange={(e) => setPassword(e.target.value)}
570+
onChange={(e) => handlePasswordChange(e)}
512571
required
513572
/>
514573
<span
@@ -524,6 +583,38 @@ const Signup = (props) => {
524583
)}
525584
</span>
526585
</div>
586+
{password.length > 0 && (
587+
<div className="mt-1 text-[11px]">
588+
<p
589+
className={`${
590+
lengthValid ? "text-green-600" : "text-red-600"
591+
}`}
592+
>
593+
{lengthValid ? "✓" : "✗"} Password should be 8
594+
characters long
595+
</p>
596+
<p
597+
className={`${
598+
caseDigitValid ? "text-green-600" : "text-red-600"
599+
}`}
600+
>
601+
{caseDigitValid ? "✓" : "✗"} Password should contain
602+
uppercase letter, lowercase letter, digit
603+
</p>
604+
<p
605+
className={`${
606+
specialCharValid
607+
? "text-green-600"
608+
: "text-red-600"
609+
}`}
610+
>
611+
{specialCharValid ? "✓" : "✗"} Password should
612+
contain special character
613+
</p>
614+
{/* </>
615+
)} */}
616+
</div>
617+
)}
527618
</div>
528619
</div>
529620
<div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">

0 commit comments

Comments
 (0)