admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added hid and visible functionality for password field.

Browse Source
This commit is contained in:
Pramod Mahajan 2025-04-07 17:16:18 +05:30
parent 2081b13d64
commit 8bce23d9b6
2 changed files with 53 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Activities/ReportTaskComments.jsx
View File

@ -142,8 +142,8 @@ const ReportTaskComments = ( {commentsData, closeModal} ) =>
)} )}
<div class="text-end my-1"> <div class="text-end my-1">
<button type="button" class="btn btn-secondary" onClick={closeModal} data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-sm btn-secondary" onClick={closeModal} data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary ms-2">{ loading ? "Sending...":"Comment"}</button> <button type="submit" class="btn btn-sm btn-primary ms-2">{ loading ? "Sending...":"Comment"}</button>
</div> </div>
</form> </form>

90
src/pages/authentication/LoginPage.jsx
View File

@ -7,41 +7,40 @@ import AuthRepository from "../../repositories/AuthRepository";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import {z} from "zod" import { z } from "zod";
const loginScheam = z.object( { const loginScheam = z.object({
username: z.string().email(), username: z.string().email(),
password: z.string().min( 1, {message: "Password required"} ), password: z.string().min(1, { message: "Password required" }),
rememberMe: z.boolean(), rememberMe: z.boolean(),
} ) });
const LoginPage = () => { const LoginPage = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [ loading, setLoading ] = useState( false ); const [loading, setLoading] = useState(false);
const[hidepass,setHidepass] = useState(true) const [hidepass, setHidepass] = useState(true);
const {register, const {
handleSubmit, register,
formState: { errors }, handleSubmit,
reset, formState: { errors },
getValues } = useForm( { reset,
resolver: zodResolver( loginScheam ), getValues,
} = useForm({
resolver: zodResolver(loginScheam),
});
}) const onSubmit = async (data) => {
const onSubmit = async ( data ) =>
{
setLoading(true); setLoading(true);
try { try {
let userCredential = { let userCredential = {
username: data.username, username: data.username,
password:data.password password: data.password,
} };
const response = await AuthRepository.login(userCredential); const response = await AuthRepository.login(userCredential);
localStorage.setItem("jwtToken", response.data.token); localStorage.setItem("jwtToken", response.data.token);
localStorage.setItem( "refreshToken", response.data.refreshToken ); localStorage.setItem("refreshToken", response.data.refreshToken);
setLoading(false); setLoading(false);
navigate("/dashboard"); navigate("/dashboard");
} catch (err) { } catch (err) {
@ -57,8 +56,12 @@ const LoginPage = () => {
Please sign-in to your account and start the adventure Please sign-in to your account and start the adventure
</p> </p>
<form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}> <form
<div className="mb-3"> id="formAuthentication"
className="mb-3"
onSubmit={handleSubmit(onSubmit)}
>
<div className="mb-0">
<label htmlFor="username" className="form-label"> <label htmlFor="username" className="form-label">
Email or Username Email or Username
</label> </label>
@ -71,14 +74,14 @@ const LoginPage = () => {
placeholder="Enter your email or username" placeholder="Enter your email or username"
autoFocus autoFocus
/> />
{errors.username && ( {errors.username && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.username.message} {errors.username.message}
</div> </div>
)} )}
</div> </div>
<div className="mb-3 form-password-toggle"> <div className="mb-3 form-password-toggle">
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
@ -94,7 +97,7 @@ const LoginPage = () => {
</div> </div>
<div className="input-group input-group-merge"> <div className="input-group input-group-merge">
<input <input
type={hidepass ? "password" :"text"} type={hidepass ? "password" : "text"}
autoComplete="true" autoComplete="true"
id="password" id="password"
{...register("password")} {...register("password")}
@ -103,16 +106,25 @@ const LoginPage = () => {
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
aria-describedby="password" aria-describedby="password"
/> />
<span class="input-group-text cursor-pointer" onClick={()=>setHidepass(!hidepass)}>{ hidepass ? <i className="bx bx-hide"></i> :<i className="bx bx-show"></i>}</span> <span
class="input-group-text cursor-pointer"
onClick={() => setHidepass(!hidepass)}
>
{hidepass ? (
<i className="bx bx-hide"></i>
) : (
<i className="bx bx-show"></i>
)}
</span>
</div> </div>
{errors.password && ( {errors.password && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.password.message} {errors.password.message}
</div> </div>
)} )}
</div> </div>
<div className="mb-3"> <div className="mb-3">
<div className="form-check"> <div className="form-check">