rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-17 17:30:17 -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
'use client'
import Button from '@/components/Button';
import Input from '@/components/Input'
import InlineLink from '@/components/InlineLink';
import Paper from '@/components/auth/Paper';
import { Metadata } from 'next'
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() {
const [visible, setVisible] = useState(false);
return (
<>
<>
<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">
<Image
src="/logo.png"
@ -22,15 +26,16 @@ export default function Page() {
width={100}
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">
<Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} />
<Input type='email' title="Email" iconKey={'EmailInputIcon'} required />
</div>
<div className="mb-6">
<Input type='password' title="Password" />
<Input type='password' title="Password" passwordIcon='UnhidePasswordIcon' pass required/>
</div>
<div className="flex flex-col items-left space-y-4">
<InlineLink>
<InlineLink href="/reset-password">
Forgot password?
</InlineLink>
<Button>

31
compass/components/Input.tsx
View File

@ -1,15 +1,28 @@
'use client'
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> & {
iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons
title?: string; // Assuming title is always a string
type?: 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 PasswordIcon = passwordIcon ? Icons[passwordIcon] : null;
const [visible, setVisible] = useState (false);
const PassIcon = passwordIcon? Icons[passwordIcon] : null;
return (
<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">
{IconComponent && (
<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>
)}
<input
{...rest}
type={type}
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
/>
{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>
);