Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add show password icon in login and register page to show and hide pa… #329

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add show password icon in login and register page to show and hide pa… #329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"dependencies": {
"react-icons": "^5.3.0"
}
}
20 changes: 15 additions & 5 deletions site/pages/apply.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@ import styles from '../styles/apply.module.css';
import { toast } from 'react-toastify';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { FaEye } from "react-icons/fa";
import { FaEyeSlash } from "react-icons/fa";

const Apply = () => {
const router = useRouter();
const [handle, setHandle] = useState('');
const [category, setCategory] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [submitted, setSubmitted] = useState(false);

const handleCategoryChange = (e) => {
Expand Down Expand Up @@ -70,7 +73,7 @@ const Apply = () => {
<span className='flex items-center shadow-md border-2 px-3 py-2 rounded-md focus:outline-none'>
<img className='w-6 mr-2' src="/svg/email.svg" alt="" />
<input
className='focus:outline-none'
className='focus:outline-none'
placeholder='Add Email'
type="email"
value={email}
Expand All @@ -82,27 +85,34 @@ const Apply = () => {
<path d="M 25 3 C 18.363281 3 13 8.363281 13 15 L 13 20 L 9 20 C 7.355469 20 6 21.355469 6 23 L 6 47 C 6 48.644531 7.355469 50 9 50 L 41 50 C 42.644531 50 44 48.644531 44 47 L 44 23 C 44 21.355469 42.644531 20 41 20 L 37 20 L 37 15 C 37 8.363281 31.636719 3 25 3 Z M 25 5 C 30.566406 5 35 9.433594 35 15 L 35 20 L 15 20 L 15 15 C 15 9.433594 19.433594 5 25 5 Z M 9 22 L 41 22 C 41.554688 22 42 22.445313 42 23 L 42 47 C 42 47.554688 41.554688 48 41 48 L 9 48 C 8.445313 48 8 47.554688 8 47 L 8 23 C 8 22.445313 8.445313 22 9 22 Z M 25 30 C 23.300781 30 22 31.300781 22 33 C 22 33.898438 22.398438 34.6875 23 35.1875 L 23 38 C 23 39.101563 23.898438 40 25 40 C 26.101563 40 27 39.101563 27 38 L 27 35.1875 C 27.601563 34.6875 28 33.898438 28 33 C 28 31.300781 26.699219 30 25 30 Z"></path>
</svg>
<input
className='focus:outline-none'
className='focus:outline-none'
placeholder='Add Password'
type="password"
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className='focus:outline-none ml-2'
>
{showPassword ? <FaEyeSlash /> : <FaEye />}
</button>
</span>

<h5 className='text-center text-sm text-blue-600'>Account Type</h5>
<span className="flex justify-between">
<label htmlFor="" className='flex gap-2 cursor-pointer'>
<input type="radio" value='Creator' checked={category === 'Creator'} onChange={handleCategoryChange} className='cursor-pointer'/>
<input type="radio" value='Creator' checked={category === 'Creator'} onChange={handleCategoryChange} className='cursor-pointer' />
<p>Creator</p>
</label>
<label htmlFor="" className='flex gap-2 cursor-pointer'>
<input type="radio" value='Agency' checked={category === 'Agency'} onChange={handleCategoryChange} className='cursor-pointer' />
<p>Agency</p>
</label>
<label htmlFor="Brand" className='flex gap-2 cursor-pointer'>
<input type="radio" value='Brand' checked={category === 'Brand'} onChange={handleCategoryChange} className='cursor-pointer'/>
<input type="radio" value='Brand' checked={category === 'Brand'} onChange={handleCategoryChange} className='cursor-pointer' />
<p>Brand</p>
</label>
</span>
Expand Down
30 changes: 26 additions & 4 deletions site/pages/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@ import styles from '../styles/apply.module.css';
import { toast } from 'react-toastify';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { FaEye } from "react-icons/fa";
import { FaEyeSlash } from "react-icons/fa";

const Login = () => {
const route = useRouter();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false); // State to toggle password visibility

const handleLogin = (e) => {
e.preventDefault();
Expand All @@ -20,7 +23,6 @@ const Login = () => {
body: JSON.stringify({ email, password }),
};

// backend implementations
fetch('https://bio-branch-server.onrender.com/api/login', options)
.then(response => response.json())
.then(data => {
Expand All @@ -36,7 +38,6 @@ const Login = () => {
.catch(error => toast.error("An error occurred. Please try again."));
};

// Google login function
const googleLogin = () => {
window.location.href = 'http://localhost:4000/auth/google';
};
Expand All @@ -51,11 +52,32 @@ const Login = () => {
<form onSubmit={handleLogin} className='flex flex-col gap-3 text-lg'>
<span className='flex items-center shadow-md border-2 px-3 py-2 rounded-md focus:outline-none'>
<img className='w-6 mr-2' src="/svg/email.svg" alt="" />
<input className='px-3 rounded-md focus:outline-none' placeholder='Add Email' type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
<input
className='px-3 rounded-md focus:outline-none'
placeholder='Add Email'
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</span>

<span className='flex items-center shadow-md border-2 px-3 py-2 rounded-md focus:outline-none'>
<img className='w-7 mr-2' src="/svg/password.png" alt="" />
<input className='px-3 rounded-md focus:outline-none' placeholder='Add Password' type="password" value={password} onChange={(e) => setPassword(e.target.value)} required/>
<input
className='px-3 rounded-md focus:outline-none'
placeholder='Add Password'
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className='ml-2 focus:outline-none'
>
{showPassword ? <FaEyeSlash /> : <FaEye />}
</button>
</span>

<input type='submit' value='Login' className='bg-blue-500 text-white px-3 py-2 rounded-md' />
Expand Down