From 9fc19a93051402a036f5ba71c7d0b16814a976c4 Mon Sep 17 00:00:00 2001
From: Erica Birdsong <97683338+ermaria@users.noreply.github.com>
Date: Wed, 28 Feb 2024 13:10:13 -0500
Subject: [PATCH] added visibility change to password input
---
compass/app/page.tsx | 23 ++++++++++++++---------
compass/components/Input.tsx | 31 +++++++++++++++++++++++++++----
2 files changed, 41 insertions(+), 13 deletions(-)
diff --git a/compass/app/page.tsx b/compass/app/page.tsx
index 8d32287..bf62ac2 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -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>
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index 5997296..7ace445 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -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>
);