mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
@@ -744,7 +744,7 @@ function Login(props) {
|
||||
};
|
||||
|
||||
const GetLoginData = async () => {
|
||||
setState({...state, loading: true})
|
||||
setState({ ...state, loading: true })
|
||||
try {
|
||||
Parse.serverURL = localStorage.getItem("baseUrl");
|
||||
Parse.initialize(localStorage.getItem("parseAppId"));
|
||||
@@ -925,6 +925,7 @@ function Login(props) {
|
||||
<Title title={"Login Page"} />
|
||||
{state.loading && (
|
||||
<div
|
||||
aria-live="assertive"
|
||||
style={{
|
||||
position: "fixed",
|
||||
width: "100vw",
|
||||
@@ -936,63 +937,66 @@ function Login(props) {
|
||||
}}
|
||||
>
|
||||
<div
|
||||
role="status"
|
||||
style={{
|
||||
position: "fixed",
|
||||
fontSize: "50px",
|
||||
color: "#3ac9d6",
|
||||
top: "50%",
|
||||
left: "45%"
|
||||
left: "50%",
|
||||
transform: 'translate(-50%, -50%)'
|
||||
}}
|
||||
className="loader-37"
|
||||
></div>
|
||||
>
|
||||
<span className="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{props.isloginVisible && props.isloginVisible ? (
|
||||
<div>
|
||||
<div aria-labelledby="loginHeading" role="region">
|
||||
<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="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly." />
|
||||
) : (
|
||||
<img src={image} width="100%" alt="" />
|
||||
<img src={image} width="100%" alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly." />
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
|
||||
<div className="">
|
||||
<div>
|
||||
<div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<h2 className="text-[30px] mt-6">Welcome Back !</h2>
|
||||
<span className="text-[12px] text-[#878787]">
|
||||
Login to your account
|
||||
</span>
|
||||
<div className="shadow-md rounded my-4">
|
||||
<form onSubmit={handleSubmit} aria-label="Login Form">
|
||||
<h1 className="text-[30px] mt-6">Welcome Back!</h1>
|
||||
<fieldset className="outline outline-1 outline-slate-300/50 my-4">
|
||||
<legend className="text-xs font-bold px-6 mt-4">Login to your account</legend>
|
||||
<div className="px-6 py-4">
|
||||
<label className="block text-xs">Username</label>
|
||||
<label className="block text-xs" htmlFor="email">Username</label>
|
||||
<input
|
||||
id="email"
|
||||
type="text"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
|
||||
name="email"
|
||||
value={state.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
<hr className="my-2 border-none" />
|
||||
<label className="block text-xs">Password</label>
|
||||
<label className="block text-xs" htmlFor="password">Password</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="password"
|
||||
type={state.passwordVisible ? "text" : "password"}
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
|
||||
name="password"
|
||||
value={state.password}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
<span
|
||||
className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
|
||||
state.passwordVisible
|
||||
? "text-[#007bff]"
|
||||
: "text-black"
|
||||
}`}
|
||||
className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${state.passwordVisible
|
||||
? "text-[#007bff]"
|
||||
: "text-black"
|
||||
}`}
|
||||
onClick={togglePasswordVisibility}
|
||||
>
|
||||
{state.passwordVisible ? (
|
||||
@@ -1003,32 +1007,32 @@ function Login(props) {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between items-center text-xs px-4 py-2">
|
||||
</fieldset>
|
||||
<div className="flex flex-row justify-between items-center px-4 py-2">
|
||||
<div>
|
||||
<label className="form-check-label">
|
||||
<label className="form-check-label inline-block cursor-pointer" htmlFor="rememberpassword">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
className="form-check-input mr-2"
|
||||
value=""
|
||||
id="rememberpassword"
|
||||
/>
|
||||
<span className="text-center pl-1">
|
||||
Remember Password
|
||||
</span>
|
||||
<span className="text-[13px] pl-1">Remember Password</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[13px]">
|
||||
<NavLink to={`/forgetpassword`}>
|
||||
Forgot Password ?
|
||||
</NavLink>
|
||||
</span>
|
||||
<NavLink
|
||||
to="/forgetpassword"
|
||||
className="text-[13px] underline focus:outline-none focus:ring-2 focus:ring-blue-600"
|
||||
>
|
||||
Forgot Password?
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow uppercase"
|
||||
className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow outline-none uppercase focus:ring-2 focus:ring-blue-600"
|
||||
disabled={state.loading}
|
||||
>
|
||||
{state.loading ? "Loading..." : "Login"}
|
||||
@@ -1093,7 +1097,7 @@ function Login(props) {
|
||||
}}
|
||||
>
|
||||
{props.appInfo.googleClietId &&
|
||||
props.appInfo.googleClietId !== "" ? (
|
||||
props.appInfo.googleClietId !== "" ? (
|
||||
<GoogleSignInBtn
|
||||
GoogleCred={props.appInfo.googleClietId}
|
||||
thirdpartyLoginfn={thirdpartyLoginfn}
|
||||
@@ -1107,14 +1111,18 @@ function Login(props) {
|
||||
{!state.hideNav && (
|
||||
<div className="self-center">
|
||||
<div className="mx-auto md:w-[300px] lg:w-[500px]">
|
||||
<img src={login_img} alt="bisec" width="100%" />
|
||||
<img src={login_img} alt="The image illustrates a person from behind, seated at a desk with a four-monitor computer setup, in an environment with a light blue and white color scheme, featuring a potted plant to the right." width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="snackbar" style={{ backgroundColor: state.toastColor }}>
|
||||
<div
|
||||
id="snackbar"
|
||||
role="alert"
|
||||
style={{ backgroundColor: state.toastColor }}
|
||||
>
|
||||
{state.toastDescription}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user