mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-24 16:42:33 +02:00
handled placeholder from all devices, remove underline from certificate,login page style,solved reactour issue for document owner from login flow, need your sign reports finish button issue,remove commented code, delete button(cross) on email documents popup issue and solve some minor design issue
This commit is contained in:
RaktimaNXG
@@ -6,41 +6,34 @@ import { useParams } from "react-router-dom";
|
||||
import { themeColor } from "../utils/ThemeColor/backColor";
|
||||
import { useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
// import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
|
||||
function Login() {
|
||||
const { id, userMail,contactBookId, serverUrl } = useParams();
|
||||
let navigate = useNavigate();
|
||||
// const history = useHistory();
|
||||
|
||||
function Login() {
|
||||
const { id, userMail, contactBookId, serverUrl } = useParams();
|
||||
let navigate = useNavigate();
|
||||
const [email, setEmail] = useState(userMail);
|
||||
const [OTP, setOTP] = useState("");
|
||||
const [EnterOTP, setEnterOtp] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
handleServerUrl();
|
||||
}, []);
|
||||
//https://qik-ai-org.github.io/Sign-MicroappV2/#/login/LqgGeZHd17/raktima.c@qik.ai/https:%2F%2Fserver3.qik.ai%2Fdefaultssty%2F&defaultssty&contracts
|
||||
// login/LqgGeZHd17/raktima.c@qik.ai/https:%2F%2Fserver3.qik.ai%2Fdefaultssty&defaultssty&contracts
|
||||
|
||||
//function generate serverUrl and parseAppId from url and save it in local storage
|
||||
const handleServerUrl = () => {
|
||||
// console.log("params", serverUrl);
|
||||
//split url in array from '&'
|
||||
localStorage.clear();
|
||||
const checkSplit = serverUrl.split("&");
|
||||
const server = checkSplit[0];
|
||||
const parseId = checkSplit[1];
|
||||
const appName = checkSplit[2];
|
||||
// console.log("appName", appName);
|
||||
|
||||
const newServer = server.replaceAll("%2F", "/");
|
||||
localStorage.setItem("baseUrl", newServer);
|
||||
localStorage.setItem("parseAppId", parseId);
|
||||
localStorage.setItem("_appName", appName);
|
||||
setIsLoading(false);
|
||||
// console.log("checkSPlit", newServer, parseId, appName);
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
@@ -57,26 +50,20 @@ function Login() {
|
||||
|
||||
const parseId =
|
||||
localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
|
||||
// console.log("server",serverUrl)
|
||||
|
||||
if (serverUrl && localStorage) {
|
||||
setLoading(true);
|
||||
e.preventDefault();
|
||||
setEmail(email);
|
||||
|
||||
try {
|
||||
// const { baseUrl, parseAppId, mobile } = this.state;
|
||||
let url = `${serverUrl}functions/SendOTPMailV1/`;
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": parseId,
|
||||
"X-Parse-Application-Id": parseId
|
||||
};
|
||||
let body = {
|
||||
email: email.toString(),
|
||||
// appId: {
|
||||
// __type: "Pointer",
|
||||
// className: "w_appinfo",
|
||||
// objectId: localStorage.getItem("_app_objectId"),
|
||||
// },
|
||||
email: email.toString()
|
||||
};
|
||||
let Otp = await axios.post(url, body, { headers: headers });
|
||||
|
||||
@@ -85,7 +72,7 @@ function Login() {
|
||||
setEnterOtp(true);
|
||||
}
|
||||
} catch (error) {
|
||||
// this.setState({ loading: false });
|
||||
alert("something went wrong!");
|
||||
}
|
||||
} else {
|
||||
alert("something went wrong!");
|
||||
@@ -105,38 +92,30 @@ function Login() {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
// AuthLoginAs
|
||||
let url = `${serverUrl}functions/AuthLoginAsMail/`;
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": parseId,
|
||||
"X-Parse-Application-Id": parseId
|
||||
};
|
||||
let body = {
|
||||
email: email,
|
||||
// email,
|
||||
otp: OTP,
|
||||
otp: OTP
|
||||
};
|
||||
let user = await axios.post(url, body, { headers: headers });
|
||||
// console.log("user", user.data.result);
|
||||
|
||||
if (user.data.result === "Invalid Otp") {
|
||||
alert("Invalid Otp");
|
||||
setLoading(false);
|
||||
}else if(user.data.result === "user not found!"){
|
||||
} else if (user.data.result === "user not found!") {
|
||||
alert("User not found!");
|
||||
setLoading(false);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
let _user = user.data.result;
|
||||
|
||||
localStorage.setItem("UserInformation", JSON.stringify(_user));
|
||||
// localStorage.setItem("userEmail", email);
|
||||
localStorage.setItem("username", _user.name);
|
||||
// console.log("session token", _user.sessionToken);
|
||||
localStorage.setItem("accesstoken", _user.sessionToken);
|
||||
|
||||
setLoading(false);
|
||||
//navigate user to on signature page
|
||||
// history.push(`/recipientSignPdf/${id}/${_user.phone}`);
|
||||
navigate(`/recipientSignPdf/${id}/${contactBookId}`);
|
||||
}
|
||||
} catch (error) {}
|
||||
@@ -146,7 +125,7 @@ function Login() {
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div style={{ padding: "2rem" }}>
|
||||
{isLoading ? (
|
||||
<div
|
||||
style={{
|
||||
@@ -154,7 +133,7 @@ function Login() {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100vh",
|
||||
flexDirection: "column",
|
||||
flexDirection: "column"
|
||||
}}
|
||||
>
|
||||
<img
|
||||
@@ -172,137 +151,142 @@ function Login() {
|
||||
margin: "10px",
|
||||
border: "0.5px solid #c5c7c9",
|
||||
padding: "30px",
|
||||
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
|
||||
// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
|
||||
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
|
||||
}}
|
||||
>
|
||||
<div className="main_head">
|
||||
<div className="main-logo">
|
||||
<img alt="sign img" src="https://qikinnovation.ams3.digitaloceanspaces.com/logo.png" width="100%" />
|
||||
<img
|
||||
alt="sign img"
|
||||
src="https://qikinnovation.ams3.digitaloceanspaces.com/logo.png"
|
||||
width="100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!EnterOTP ? (
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-sm-6 KLO">
|
||||
<h2>Welcome Back !</h2>
|
||||
<span className="KNLO">
|
||||
Verification code is sent to your email
|
||||
</span>
|
||||
<div className="card card-box">
|
||||
<div className="card-body">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
name="mobile"
|
||||
value={email}
|
||||
disabled
|
||||
height={30}
|
||||
style={{ fontSize: "20px", fontWeight: "600" }}
|
||||
/>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="col-md-4 col-sm-4"
|
||||
style={{
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<button
|
||||
className="btn btn-info loadinBtn "
|
||||
type="button"
|
||||
style={{ marginBottom: "4px", width: "210px" }}
|
||||
disabled
|
||||
>
|
||||
<span
|
||||
className="spinner-border spinner-border-sm "
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
Loading...
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="btn btn-sm otpButton"
|
||||
onClick={(e) => SendOtp(e)}
|
||||
style={{
|
||||
marginBottom: "4px",
|
||||
width: "210px",
|
||||
background: themeColor(),
|
||||
color: "white",
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
Send OTP
|
||||
</button>
|
||||
)}
|
||||
<div className="row">
|
||||
<div className="col-sm-6 KLO">
|
||||
<span className="welcomeText">Welcome Back !</span>
|
||||
<br />
|
||||
<span className="KNLO">
|
||||
Verification code is sent to your email
|
||||
</span>
|
||||
<div className="card card-box"
|
||||
style={{borderRadius:"0px"}}
|
||||
>
|
||||
<div className="card-body">
|
||||
<input
|
||||
type="email"
|
||||
name="mobile"
|
||||
value={email}
|
||||
disabled
|
||||
className="loginInput"
|
||||
/>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div className="btnContainer">
|
||||
{loading ? (
|
||||
<button
|
||||
// className="btn btn-info loadinBtn "
|
||||
type="button"
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white"
|
||||
}}
|
||||
className="verifyBtn"
|
||||
disabled
|
||||
>
|
||||
<span
|
||||
className="spinner-border spinner-border-sm "
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
Loading...
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="verifyBtn"
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white",
|
||||
marginLeft: "0px !important"
|
||||
}}
|
||||
// className="btn btn-sm otpButton"
|
||||
onClick={(e) => SendOtp(e)}
|
||||
// style={{
|
||||
// marginBottom: "4px",
|
||||
// width: "210px",
|
||||
// background: themeColor(),
|
||||
// color: "white",
|
||||
// fontWeight: "600"
|
||||
// }}
|
||||
>
|
||||
Send OTP
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-sm-6 KLO">
|
||||
<h2>Welcome Back !</h2>
|
||||
<span className="KNLO">You will get a OTP via Email</span>
|
||||
<div className="card card-box">
|
||||
<div className="card-body">
|
||||
<label>Enter Verification Code</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
name="OTP"
|
||||
value={OTP}
|
||||
min="4"
|
||||
max="4"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<div className="row">
|
||||
<div className="col-sm-6 KLO">
|
||||
<span className="welcomeText">Welcome Back !</span>
|
||||
<br />
|
||||
<span className="KNLO">You will get a OTP via Email</span>
|
||||
<div className="card card-box">
|
||||
<div className="card-body">
|
||||
<label>Enter Verification Code</label>
|
||||
<input
|
||||
type="number"
|
||||
className="loginInput"
|
||||
name="OTP"
|
||||
value={OTP}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="col-md-4 col-sm-4"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
{loading ? (
|
||||
<button
|
||||
className="btn btn-info "
|
||||
type="button"
|
||||
style={{ marginBottom: "4px", width: "210px" }}
|
||||
disabled
|
||||
>
|
||||
<span
|
||||
className="spinner-border spinner-border-sm "
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
Loading...
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => VerifyOTP(e)}
|
||||
className="btn btn-info login-btn"
|
||||
>
|
||||
Verify
|
||||
</button>
|
||||
)}
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{loading ? (
|
||||
<button
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white"
|
||||
}}
|
||||
className="verifyBtn"
|
||||
type="button"
|
||||
disabled
|
||||
>
|
||||
<span
|
||||
className="spinner-border spinner-border-sm "
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
Loading...
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => VerifyOTP(e)}
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white"
|
||||
}}
|
||||
className="verifyBtn"
|
||||
>
|
||||
Verify
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user