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

Merge pull request 'When hovering over the login form's password box, it appears divided, with the text box and hide button becoming separate.' (#192) from Kartik_bug#379 into Issue_Jun_1W_2

Browse Source 
Reviewed-on: #192
This commit is contained in:
Vikas Nale 2025-06-09 06:00:26 +00:00
commit 9ba8a1501b
1 changed files with 10 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,47 +83,30 @@ const LoginPage = () => {
</div>
)}
</div>
<div className="mb-3 form-password-toggle">
<div className="d-flex justify-content-center">
<label className="form-label" htmlFor="password">
Password
</label>
</div>
<div className="input-group input-group-merge">
<div className="mb-3 ">
<label className="form-label" htmlFor="password">Password</label>
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
<input
type={hidepass ? "password" : "text"}
autoComplete="true"
id="password"
autoComplete="true"
className="form-control border-0 shadow-none"
{...register("password")}
className="form-control"
name="password"
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
style={{ flex: 1 }}
aria-describedby="password"
/>
<button
type="button"
className="btn border-top border-end border-bottom"
className="btn btn-link p-0 ms-2"
style={{ fontSize: "18px", color: "#6c757d", }}
onClick={() => setHidepass(!hidepass)}
style={{
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeft: 0,
}}
>
{hidepass ? (
<i className="bx bx-hide" />
) : (
<i className="bx bx-show" />
)}
<i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`} />
</button>
</div>
{errors.password && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.password.message}
</div>
<p className="danger-text small-text text-start">{errors.password.message}</p>
)}
</div>
<div className="mb-3 d-flex justify-content-between">