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

added visibility change to password input

Browse Source
This commit is contained in:
Erica Birdsong 2024-02-28 13:10:13 -05:00
parent 016b2a3d70
commit 9fc19a9305
2 changed files with 41 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
compass/app/page.tsx
View File

@ -1,20 +1,24 @@
// pages/index.tsx // pages/index.tsx
'use client'
import Button from '@/components/Button'; import Button from '@/components/Button';
import Input from '@/components/Input' import Input from '@/components/Input'
import InlineLink from '@/components/InlineLink'; import InlineLink from '@/components/InlineLink';
import Paper from '@/components/auth/Paper'; import Paper from '@/components/auth/Paper';
import { Metadata } from 'next' import { Metadata } from 'next'
import Image from 'next/image'; import Image from 'next/image';
import React, { useState } from 'react';
export const metadata: Metadata = {
title: 'Login', //export const metadata: Metadata = {
} // title: 'Login',
//}
export default function Page() { export default function Page() {
const [visible, setVisible] = useState(false);
return ( return (
<> <>
<Paper> <Paper>
<form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl"> <form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
<Image <Image
src="/logo.png" src="/logo.png"
@ -22,15 +26,16 @@ export default function Page() {
width={100} width={100}
height={91} height={91}
/> />
<h1 className='font-bold text-xl text-purple-800'>Login</h1> <h1 className='font-bold text-xl text-purple-700'>Login</h1>
<div className="mb-4"> <div className="mb-4">
<Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} /> <Input type='email' title="Email" iconKey={'EmailInputIcon'} required />
</div> </div>
<div className="mb-6"> <div className="mb-6">
<Input type='password' title="Password" />
<Input type='password' title="Password" passwordIcon='UnhidePasswordIcon' pass required/>
</div> </div>
<div className="flex flex-col items-left space-y-4"> <div className="flex flex-col items-left space-y-4">
<InlineLink> <InlineLink href="/reset-password">
Forgot password? Forgot password?
</InlineLink> </InlineLink>
<Button> <Button>

31
compass/components/Input.tsx
View File

@ -1,15 +1,28 @@
'use client'
import { Icons } from '@/utils/constants'; import { Icons } from '@/utils/constants';
import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react'; import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode, useState} from 'react';
import Button from './Button';
type InputProps = InputHTMLAttributes<HTMLInputElement> & { type InputProps = InputHTMLAttributes<HTMLInputElement> & {
iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons
title?: string; // Assuming title is always a string title?: string; // Assuming title is always a string
type?: string; type?: string;
placeholder?: string; placeholder?: string;
passwordIcon?: keyof typeof Icons;
showIcon?: keyof typeof Icons;
hideIcon?: keyof typeof Icons;
pass?: boolean;
}; };
const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => { const Input: FunctionComponent<InputProps> = ({ iconKey, pass, showIcon, hideIcon, passwordIcon, type, title, placeholder, ...rest }) => {
const IconComponent = iconKey ? Icons[iconKey] : null; const IconComponent = iconKey ? Icons[iconKey] : null;
const PasswordIcon = passwordIcon ? Icons[passwordIcon] : null;
const [visible, setVisible] = useState (false);
const PassIcon = passwordIcon? Icons[passwordIcon] : null;
return ( return (
<div className="mb-4"> <div className="mb-4">
@ -23,17 +36,27 @@ const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholde
<div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden"> <div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
{IconComponent && ( {IconComponent && (
<span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500"> <span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
<IconComponent className="h-5 w-5" /> <IconComponent className="h-5 w-5" />
</span> </span>
)} )}
<input <input
{...rest} {...rest}
type={type} type={visible ? "text" : "password"}
id={title} id={title}
placeholder={placeholder} placeholder={placeholder}
className="w-full border-none p-3 text-sm focus:ring-0" 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 style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
/> />
{PassIcon && (
<span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
<PassIcon className="h-5 w-5" onClick={() => setVisible(!visible)} />
</span>
)}
</div> </div>
</div> </div>
); );