From 3e9bff89cd4677ee7d6fbc0ec959e6e81b9f95cf Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Mon, 30 Oct 2023 20:18:03 +0530 Subject: [PATCH] resolve file upload not working properly and convert forgotpassword in function component --- .../src/components/fields/FileUpload.js | 6 +- .../src/primitives/sanitizeFileName.js | 5 + apps/OpenSign/src/routes/ForgetPassword.js | 176 +++++++++--------- apps/OpenSign/src/routes/UserProfile.js | 5 +- 4 files changed, 98 insertions(+), 94 deletions(-) create mode 100644 apps/OpenSign/src/primitives/sanitizeFileName.js diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js index bd9c72eec..bfb47baa4 100644 --- a/apps/OpenSign/src/components/fields/FileUpload.js +++ b/apps/OpenSign/src/components/fields/FileUpload.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import { SaveFileSize } from "../../constant/saveFileSize"; import Parse from "parse"; +import sanitizeFileName from "../../primitives/sanitizeFileName"; const FileUpload = (props) => { const [parseBaseUrl] = useState(localStorage.getItem("baseUrl")); @@ -70,10 +71,11 @@ const FileUpload = (props) => { Parse.serverURL = parseBaseUrl; Parse.initialize(parseAppId); const size = file.size; - // console.log("file ", file) + const fileName = file.name; + const name = sanitizeFileName(fileName); setfileload(true); const pdfFile = file; - const parseFile = new Parse.File(pdfFile.name, pdfFile); + const parseFile = new Parse.File(name, pdfFile); try { const response = await parseFile.save(); diff --git a/apps/OpenSign/src/primitives/sanitizeFileName.js b/apps/OpenSign/src/primitives/sanitizeFileName.js new file mode 100644 index 000000000..0d0be1abc --- /dev/null +++ b/apps/OpenSign/src/primitives/sanitizeFileName.js @@ -0,0 +1,5 @@ +function sanitizeFileName(fileName) { + // Remove spaces and invalid characters + return fileName.replace(/[^a-zA-Z0-9._-]/g, ""); +} +export default sanitizeFileName; diff --git a/apps/OpenSign/src/routes/ForgetPassword.js b/apps/OpenSign/src/routes/ForgetPassword.js index 356a35952..86cb9a6a8 100644 --- a/apps/OpenSign/src/routes/ForgetPassword.js +++ b/apps/OpenSign/src/routes/ForgetPassword.js @@ -1,120 +1,114 @@ -import React, { Component } from "react"; +import React, { useEffect, useState } from "react"; import { connect } from "react-redux"; import { fetchAppInfo, forgetPassword } from "../redux/actions"; import Title from "../components/Title"; import { NavLink } from "react-router-dom"; import login_img from "../assets/images/login_img.svg"; -class forgotPassword extends Component { - constructor(props) { - super(props); - this.state = { - email: "", - password: "", - hideNav: "" - }; - } - - handleChange = (event) => { +function ForgotPassword(props) { + const [state, setState] = useState({ + email: "", + password: "", + hideNav: "" + }); + const handleChange = (event) => { const { name, value } = event.target; - this.setState({ [name]: value }); + setState({ ...state, [name]: value }); }; - resize = () => { + const resize = () => { let currentHideNav = window.innerWidth <= 760; - if (currentHideNav !== this.state.hideNav) { - this.setState({ hideNav: currentHideNav }); + if (currentHideNav !== state.hideNav) { + setState({ ...state, hideNav: currentHideNav }); } }; - handleSubmit = (event) => { + const handleSubmit = (event) => { event.preventDefault(); - - localStorage.setItem("appLogo", this.props.appInfo.applogo); - localStorage.setItem("appName", this.props.appInfo.appname); - localStorage.setItem("defaultmenuid", this.props.appInfo.defaultmenuid); - localStorage.setItem("PageLanding", this.props.appInfo.LandingPageId); + localStorage.setItem("appLogo", props.appInfo.applogo); + localStorage.setItem("appName", props.appInfo.appname); + localStorage.setItem("defaultmenuid", props.appInfo.defaultmenuid); + localStorage.setItem("PageLanding", props.appInfo.LandingPageId); localStorage.setItem( "userSettings", - JSON.stringify(this.props.appInfo.settings) + JSON.stringify(props.appInfo.settings) ); - const { email } = this.state; - if (email) { - this.props.forgetPassword(email); + + if (state.email) { + props.forgetPassword(state.email); } }; - componentDidMount() { - this.props.fetchAppInfo(localStorage.getItem("domain")); - window.addEventListener("resize", this.resize.bind(this)); - this.resize(); - } + useEffect(() => { + props.fetchAppInfo(localStorage.getItem("domain")); + resize(); + window.addEventListener("resize", resize); + return () => window.removeEventListener("resize", resize); + // eslint-disable-next-line + }, []); - render() { - const { email } = this.state; - let image = this.props.appInfo.applogo; - return ( -
- - <div> - <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 "> - <div className="w-[250px] h-[66px] inline-block"> - {this.state.hideNav ? ( - <img src={image} width="100%" alt="" /> - ) : ( - <img src={image} width="100%" alt="" /> - )} - </div> - <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2"> - <div className=""> - <form onSubmit={this.handleSubmit}> - <h2 className="text-[30px] mt-6">Welcome Back !</h2> - <span className="text-[12px] text-[#878787]"> - Reset Your Password - </span> - <div className="shadow-md rounded my-4"> - <div className="px-6 py-4"> - <label className="block text-xs">Email</label> - <input - type="text" - className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" - name="email" - value={email} - onChange={this.handleChange} - required - /> - <hr className="my-2 border-none" /> - </div> - </div> - <div className="flex justify-between items-center px-4"> - <button - type="submit" - className="rounded-sm bg-[#3ac9d6] text-white px-4 py-3 text-xs font-semibold shadow uppercase" - > - Submit - </button> - <NavLink - to="/" - className="rounded-sm bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] px-4 py-3 text-xs font-semibold shadow uppercase" - > - Login - </NavLink> - </div> - </form> - </div> - {!this.state.hideNav && ( - <div className="self-center"> - <div className="mx-auto md:w-[300px] lg:w-[500px]"> - <img src={login_img} alt="bisec" width="100%" /> + let image = props.appInfo.applogo; + return ( + <div className="bg-white"> + <Title title="Forgot password page" /> + <div> + <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 "> + <div className="w-[250px] h-[66px] inline-block"> + {state.hideNav ? ( + <img src={image} width="100%" alt="" /> + ) : ( + <img src={image} width="100%" alt="" /> + )} + </div> + <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2"> + <div className=""> + <form onSubmit={handleSubmit}> + <h2 className="text-[30px] mt-6">Welcome Back !</h2> + <span className="text-[12px] text-[#878787]"> + Reset Your Password + </span> + <div className="shadow-md rounded my-4"> + <div className="px-6 py-4"> + <label className="block text-xs">Email</label> + <input + type="text" + className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + name="email" + value={state.email} + onChange={handleChange} + required + /> + <hr className="my-2 border-none" /> </div> </div> - )} + <div className="flex justify-between items-center px-4"> + <button + type="submit" + className="rounded-sm bg-[#3ac9d6] text-white px-4 py-3 text-xs font-semibold shadow uppercase" + > + Submit + </button> + <NavLink + to="/" + className="rounded-sm bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] px-4 py-3 text-xs font-semibold shadow uppercase" + > + Login + </NavLink> + </div> + </form> </div> + {!state.hideNav && ( + <div className="self-center"> + <div className="mx-auto md:w-[300px] lg:w-[500px]"> + <img src={login_img} alt="bisec" width="100%" /> + </div> + </div> + )} </div> </div> </div> - ); - } + </div> + ); } const mapStateToProps = (state) => { @@ -122,5 +116,5 @@ const mapStateToProps = (state) => { }; export default connect(mapStateToProps, { fetchAppInfo, forgetPassword })( - forgotPassword + ForgotPassword ); diff --git a/apps/OpenSign/src/routes/UserProfile.js b/apps/OpenSign/src/routes/UserProfile.js index ac64efe39..ae86ca1ba 100644 --- a/apps/OpenSign/src/routes/UserProfile.js +++ b/apps/OpenSign/src/routes/UserProfile.js @@ -4,6 +4,7 @@ import Parse from "parse"; import { SaveFileSize } from "../constant/saveFileSize"; import dp from "../assets/images/dp.png"; import Title from "../components/Title"; +import sanitizeFileName from "../primitives/sanitizeFileName"; function UserProfile() { const navigate = useNavigate(); @@ -90,7 +91,9 @@ function UserProfile() { const handleFileUpload = async (file) => { const size = file.size; const pdfFile = file; - const parseFile = new Parse.File(pdfFile.name, pdfFile); + const fileName = file.name; + const name = sanitizeFileName(fileName); + const parseFile = new Parse.File(name, pdfFile); try { const response = await parseFile.save();