rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-06 20:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add a PasswordInput, show/hide password

Browse Source 
Co-Authored-By: Erica Birdsong <97683338+ermaria@users.noreply.github.com>
This commit is contained in:
Andy Chan 2024-03-02 14:36:02 -05:00
parent 96b3e62554
commit 2a495b89fa
2 changed files with 51 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
compass/app/page.tsx
View File

@ -12,6 +12,7 @@ import {ChangeEvent, useState} from "react";
// export const metadata: Metadata = {
// title: 'Login',
// }
import PasswordInput from '@/components/auth/PasswordInput';
export default function Page() {
const [email, setEmail] = useState("");
@ -59,10 +60,10 @@ export default function Page() {
/>
<h1 className='font-bold text-xl text-purple-800'>Login</h1>
<div className="mb-4">
<Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} />
<Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} required/>
</div>
<div className="mb-6">
<Input type='password' title="Password" onChange={handlePasswordChange} />
<PasswordInput title="Password" onChange={handlePasswordChange} required />
</div>
<div className="flex flex-col items-left space-y-4">
<InlineLink href="/forgot_password">

48
compass/components/auth/PasswordInput.tsx Normal file
View File

@ -0,0 +1,48 @@
'use client'
import { Icons } from '@/utils/constants';
import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode, useState} from 'react';
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
title?: string; // Assuming title is always a string
type?: string;
placeholder?: string;
};
const PasswordInput: FunctionComponent<InputProps> = ({ type, title, placeholder, ...rest }) => {
const [visible, setVisible] = useState (false);
const PasswordIcon = visible ? Icons['HidePasswordIcon'] : Icons['UnhidePasswordIcon'];
return (
<div className="mb-4">
{title && (
<div className="mb-1">
<label htmlFor={title} className="text-sm font-semibold text-gray-700">
{title}
</label>
</div>
)}
<div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
<input
{...rest}
type={visible ? "text" : "password"}
id={title}
placeholder={placeholder}
className="w-full border-none p-3 text-sm focus:ring-0"
style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
/>
{PasswordIcon && (
<span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
<PasswordIcon className="h-5 w-5" onClick={() => setVisible(!visible)}/>
</span>
)}
</div>
</div>
);
};
export default PasswordInput;