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

added ability to show/hide password

Browse Source
This commit is contained in:
Erica Birdsong 2024-02-28 14:41:14 -05:00
parent 9fc19a9305
commit 851d71e00d
4 changed files with 124 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
compass/app/auth/login/page.tsx Normal file
View File

@ -0,0 +1,57 @@
// 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';
import PasswordInput from '@/components/auth/PasswordInput';
// 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"
alt='Compass Center logo.'
width={100}
height={91}
/>
<h1 className='font-bold text-xl text-purple-700'>Login</h1>
<div className="mb-4">
<Input type='email' title="Email" iconKey={'EmailInputIcon'} required />
</div>
<div className="mb-6">
<PasswordInput type='password' title="Password" required />
</div>
<div className="flex flex-col items-left space-y-4">
<InlineLink href="/reset-password">
Forgot password?
</InlineLink>
<Button>
Login
</Button>
</div>
</form>
<p className="text-center mt-6 text-gray-500 text-xs">
&copy; 2024 Compass Center
</p>
</Paper>
</>
);
};

12
compass/app/page.tsx
View File

@ -7,14 +7,16 @@ import Paper from '@/components/auth/Paper';
import { Metadata } from 'next'
import Image from 'next/image';
import React, { useState } from 'react';
import PasswordInput from '@/components/auth/PasswordInput';
//export const metadata: Metadata = {
// title: 'Login',
//}
// export const metadata: Metadata = {
// title: 'Login',
// }
export default function Page() {
const [visible, setVisible] = useState(false);
return (
<>
<Paper>
@ -32,7 +34,9 @@ export default function Page() {
</div>
<div className="mb-6">
<Input type='password' title="Password" passwordIcon='UnhidePasswordIcon' pass required/>
<PasswordInput type='password' title="Password" required />
</div>
<div className="flex flex-col items-left space-y-4">
<InlineLink href="/reset-password">

23
compass/components/Input.tsx
View File

@ -9,19 +9,12 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> & {
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, pass, showIcon, hideIcon, passwordIcon, type, title, placeholder, ...rest }) => {
const Input: FunctionComponent<InputProps> = ({ iconKey, 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 (
@ -42,21 +35,15 @@ const Input: FunctionComponent<InputProps> = ({ iconKey, pass, showIcon, hideIco
<input
{...rest}
type={visible ? "text" : "password"}
type={type}
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>
);

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

@ -0,0 +1,54 @@
'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;