fix: google sign in mobile & add progress in profile pic upload

This commit is contained in:
prafull-opensignlabs
2023-11-22 00:09:28 +05:30
parent 8ac82b1214
commit d11dff2987
4 changed files with 76 additions and 39 deletions
@@ -42,7 +42,42 @@ const GoogleSignInBtn = ({
width: "187px"
});
});
const clearStorage = async () => {
await Parse.User.logOut();
let baseUrl = localStorage.getItem("BaseUrl12");
let appid = localStorage.getItem("AppID12");
let applogo = localStorage.getItem("appLogo");
let domain = localStorage.getItem("domain");
let appversion = localStorage.getItem("appVersion");
let appTitle = localStorage.getItem("appTitle");
let defaultmenuid = localStorage.getItem("defaultmenuid");
let PageLanding = localStorage.getItem("PageLanding");
let _appName = localStorage.getItem("_appName");
let _app_objectId = localStorage.getItem("_app_objectId");
let appName = localStorage.getItem("appName");
let userSettings = localStorage.getItem("userSettings");
localStorage.clear();
localStorage.setItem("BaseUrl12", baseUrl);
localStorage.setItem("AppID12", appid);
localStorage.setItem("appLogo", applogo);
localStorage.setItem("domain", domain);
localStorage.setItem("appversion", appversion);
localStorage.setItem("appTitle", appTitle);
localStorage.setItem("defaultmenuid", defaultmenuid);
localStorage.setItem("PageLanding", PageLanding);
localStorage.setItem("_appName", _appName);
localStorage.setItem("_app_objectId", _app_objectId);
localStorage.setItem("appName", appName);
localStorage.setItem("userSettings", userSettings);
localStorage.setItem("baseUrl", baseUrl);
localStorage.setItem("parseAppId", appid);
};
const responseGoogle = async (response) => {
clearStorage();
setThirdpartyLoader(true);
// console.log("response ", response);
if (response.credential) {
+12 -18
View File
@@ -10,9 +10,11 @@ import GoogleSignInBtn from "../components/LoginGoogle";
// import LoginFacebook from "../components/LoginFacebook";
import { NavLink, useNavigate } from "react-router-dom";
import login_img from "../assets/images/login_img.svg";
import { useWindowSize } from "../hook/useWindowSize";
function Login(props) {
const navigate = useNavigate();
const { width } = useWindowSize();
const [state, setState] = useState({
email: "",
toastColor: "#5cb85c",
@@ -21,7 +23,6 @@ function Login(props) {
passwordVisible: false,
mobile: "",
phone: "",
hideNav: "",
scanResult: "",
baseUrl: localStorage.getItem("baseUrl"),
parseAppId: localStorage.getItem("parseAppId"),
@@ -47,26 +48,11 @@ function Login(props) {
);
// eslint-disable-next-line
}, []);
useEffect(() => {
resize();
window.addEventListener("resize", resize());
return () => {
window.removeEventListener("resize", resize());
};
// eslint-disable-next-line
}, []);
const handleChange = (event) => {
const { name, value } = event.target;
setState({ ...state, [name]: value });
};
const resize = () => {
let currentHideNav = window.innerWidth <= 760;
if (currentHideNav !== state.hideNav) {
setState({ ...state, hideNav: currentHideNav });
}
};
const handleSubmit = async (event) => {
localStorage.removeItem("accesstoken");
event.preventDefault();
@@ -594,6 +580,10 @@ function Login(props) {
} else {
navigate(`/subscription`, { replace: true });
}
} else {
navigate(
`/${element.pageType}/${element.pageId}`
);
}
}
} else {
@@ -618,6 +608,10 @@ function Login(props) {
} else {
navigate(`/subscription`, { replace: true });
}
} else {
navigate(
`/${element.pageType}/${element.pageId}`
);
}
}
},
@@ -1050,7 +1044,7 @@ function Login(props) {
<NavLink
className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
to="/signup"
style={state.hideNav ? { textAlign: "center" } : {}}
style={width < 768 ? { textAlign: "center" } : {}}
>
Create Account
</NavLink>
@@ -1118,7 +1112,7 @@ function Login(props) {
</div>
</div>
</div>
{!state.hideNav && (
{width >= 768 && (
<div className="self-center">
<div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
<img
+5 -18
View File
@@ -6,8 +6,10 @@ import Title from "../components/Title";
import { fetchAppInfo, showTenantName } from "../redux/actions";
import { useNavigate, NavLink } from "react-router-dom";
import login_img from "../assets/images/login_img.svg";
import { useWindowSize } from "../hook/useWindowSize";
const Signup = (props) => {
const { width } = useWindowSize();
const navigate = useNavigate();
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
@@ -18,7 +20,6 @@ const Signup = (props) => {
const [company, setCompany] = useState("");
const [jobTitle, setJobTitle] = useState("");
const [state, setState] = useState({
hideNav: "",
loading: false,
toastColor: "#5cb85c",
toastDescription: ""
@@ -387,24 +388,14 @@ const Signup = (props) => {
}
};
useEffect(() => {
window.addEventListener("resize", resize);
props.fetchAppInfo(
localStorage.getItem("domain"),
localStorage.getItem("BaseUrl12"),
localStorage.getItem("AppID12")
);
return () => {
window.removeEventListener("resize", resize);
};
// eslint-disable-next-line
}, []);
const resize = () => {
let currentHideNav = window.innerWidth <= 760;
if (currentHideNav !== state.hideNav) {
setState({ hideNav: currentHideNav });
}
};
return (
<div className="bg-white">
{state.loading && (
@@ -438,11 +429,7 @@ const Signup = (props) => {
<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="" />
)}
<img src={image} width="100%" alt="" />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
<div className="">
@@ -550,14 +537,14 @@ const Signup = (props) => {
<NavLink
className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
to="/"
style={state.hideNav ? { textAlign: "center" } : {}}
style={width < 768 ? { textAlign: "center" } : {}}
>
Login
</NavLink>
</div>
</form>
</div>
{!state.hideNav && (
{width >= 768 && (
<div className="self-center">
<div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
<img src={login_img} alt="bisec" width="100%" />
+24 -3
View File
@@ -16,6 +16,8 @@ function UserProfile() {
const [Phone, SetPhone] = useState(UserProfile && UserProfile.phone);
const [Image, setImage] = useState(localStorage.getItem("profileImg"));
const [isLoader, setIsLoader] = useState(false);
const [percentage, setpercentage] = useState(0);
Parse.serverURL = parseBaseUrl;
Parse.initialize(parseAppId);
const handleSubmit = async (e) => {
@@ -44,7 +46,7 @@ function UserProfile() {
await updateExtUser({ Name: res.name, Phone: res.phone });
alert("Profile updated successfully.");
setEditMode(false);
navigate("/");
navigate("/dashboard/35KBoSgoAK");
}
},
(error) => {
@@ -102,7 +104,15 @@ function UserProfile() {
const parseFile = new Parse.File(name, pdfFile);
try {
const response = await parseFile.save();
const response = await parseFile.save({
progress: (progressValue, loaded, total, { type }) => {
if (type === "upload" && progressValue !== null) {
const percentCompleted = Math.round((loaded * 100) / total);
// console.log("percentCompleted ", percentCompleted);
setpercentage(percentCompleted);
}
}
});
// // The response object will contain information about the uploaded file
// console.log("File uploaded:", response);
@@ -111,6 +121,7 @@ function UserProfile() {
if (response.url()) {
setImage(response.url());
localStorage.setItem("profileImg", response.url());
setpercentage(0);
SaveFileSize(size, response.url());
return response.url();
}
@@ -167,8 +178,18 @@ function UserProfile() {
}}
/>
)}
{percentage !== 0 && (
<div className="flex items-center gap-x-2">
<div className="h-2 rounded-full w-[200px] md:w-[400px] bg-gray-200">
<div
className="h-2 rounded-full bg-blue-500"
style={{ width: `${percentage}%` }}
></div>
</div>
<span className="text-black text-sm">{percentage}%</span>
</div>
)}
<div className="text-base font-semibold pt-4">
{" "}
{localStorage.getItem("_user_role")}
</div>
</div>