Feature/change character and copy button

src/components/javigaralva/components/button.tsx

@@ -0,0 +1,10 @@
+export function Button({ children, className = '', onClick }) {
+	return (
+		<button
+			className={`${className} rounded min-w-fit font-black uppercase py-2 text-lg text-black/75 tracking-wide duration-300 scale-100 active:scale-95 shadow-2xl shadow-slate-900`}
+			onClick={onClick}
+		>
+			{children}
+		</button>
+	)
+}

src/components/javigaralva/components/colorized-letter.tsx → src/components/javigaralva/components/colorized-character.tsx

@@ -8,34 +8,35 @@ import { isUpperCaseLetter } from '../utils/is-upper-case-letter'
 import { isSymbol } from '../utils/is-symbol'
 import { isNumber } from '../utils/is-number'
 
-type ColorizedLetterStyles = {
+type ColorizedCharacterStyles = {
 	classNames: string
 	style: CSSProperties
 }
 
-interface ColorizedLetterProps {
-	letter: string
+interface ColorizedCharacterProps {
+	character: string
+	onClick: () => void
 }
-export function ColorizedLetter({ letter }: ColorizedLetterProps) {
-	const { classNames, style } = getStyles(letter)
+export function ColorizedCharacter({ character, onClick }: ColorizedCharacterProps) {
+	const { classNames, style } = getStyles(character)
 	return (
-		<span className={classNames} style={style}>
-			{letter}
+		<span className={classNames} style={style} onClick={onClick}>
+			{character}
 		</span>
 	)
 }
 
-function getStyles(letter: string): ColorizedLetterStyles {
+function getStyles(character: string): ColorizedCharacterStyles {
 	let classNames = 'text-white'
 	let style: CSSProperties = {}
-	if (isNumber(letter)) {
+	if (isNumber(character)) {
 		classNames = 'text-orange-600'
 		style = getBigDotsStyle()
-	} else if (isSymbol(letter)) {
+	} else if (isSymbol(character)) {
 		classNames = 'text-lime-600'
 		style = getBigCircleDottedStyle()
 		style.textShadow = 'rgb(116 255 77 / 60%) -1px -1px 6px, rgb(124 127 255 / 0%) 1px 1px 6px'
-	} else if (isUpperCaseLetter(letter)) {
+	} else if (isUpperCaseLetter(character)) {
 		classNames = 'text-white/50'
 		style = getSquareAndVerticalLinesStyle()
 	} else {

src/components/javigaralva/components/colorized-password.tsx

@@ -1,13 +1,29 @@
-import { ColorizedLetter } from './colorized-letter'
+import { ColorizedCharacter } from './colorized-character'
+
+type OnClickCharacterHandlerParams = {
+	character: string
+	index: number
+}
+export type OnClickCharacterHandler = (
+	onClickCharacterHandlerParams: OnClickCharacterHandlerParams
+) => void
 
 interface ColorizedPasswordProps {
 	password: string
+	onClickCharacter?: OnClickCharacterHandler
 }
-export function ColorizedPassword({ password }: ColorizedPasswordProps) {
+export function ColorizedPassword({ password, onClickCharacter }: ColorizedPasswordProps) {
+	const handleOnClickCharacter: OnClickCharacterHandler = ({ character, index }) => {
+		onClickCharacter?.({ character, index })
+	}
 	return (
 		<div className='font-mono font-black text-4xl min-h-min tracking-widest cursor-pointer'>
-			{password.split('').map((letter, i) => (
-				<ColorizedLetter key={i} letter={letter} />
+			{password.split('').map((character, i) => (
+				<ColorizedCharacter
+					key={i}
+					character={character}
+					onClick={() => handleOnClickCharacter({ character, index: i })}
+				/>
 			))}
 		</div>
 	)

src/components/javigaralva/constants/constants.tsx

@@ -1,7 +1,19 @@
+import { GeneratePasswordOptions } from '../utils/generate-password/generate-password'
+
 const LETTERS = 'abcdefghijklmnopqrstuvwxyz'
 export const NUMBERS = '0123456789'
 export const SYMBOLS = '\'\\¡!"·$%&()=€@[]{}^/+-*'
 export const UPPER_CASE_LETTERS_LIST = LETTERS.toUpperCase().split('')
 export const LOWER_CASE_LETTERS_LIST = LETTERS.toLowerCase().split('')
 export const NUMBERS_LIST = NUMBERS.split('')
 export const SYMBOLS_LIST = SYMBOLS.split('')
+export const MIN_PASSWORD_LENGTH = 1
+export const MAX_PASSWORD_LENGTH = 30
+
+export const DEFAULT_PASSWORD_OPTIONS: GeneratePasswordOptions = {
+	length: 10,
+	hasUpperCaseLetters: true,
+	hasLowerCaseLetters: true,
+	hasNumbers: true,
+	hasSymbols: true
+}

src/components/javigaralva/hooks/use-password-generator.tsx

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react'
+import { DEFAULT_PASSWORD_OPTIONS } from '../constants/constants'
+import {
+	generatePassword,
+	replacePasswordCharacterAt
+} from '../utils/generate-password/generate-password'
+
+export function usePasswordGenerator() {
+	const [passwordLength, setPasswordLength] = useState(DEFAULT_PASSWORD_OPTIONS.length)
+	const [password, setPassword] = useState('')
+
+	const handleGeneratePassword = () => {
+		setPassword(
+			generatePassword({
+				...DEFAULT_PASSWORD_OPTIONS,
+				length: passwordLength
+			})
+		)
+	}
+
+	const handleCharacterReplacement = ({ index }: { index: number }) => {
+		setPassword(replacePasswordCharacterAt({ password, index, options: DEFAULT_PASSWORD_OPTIONS }))
+	}
+
+	useEffect(() => {
+		setPassword(
+			generatePassword({
+				...DEFAULT_PASSWORD_OPTIONS,
+				length: passwordLength
+			})
+		)
+	}, [passwordLength])
+
+	return {
+		passwordLength,
+		setPasswordLength,
+		password,
+		generatePassword: handleGeneratePassword,
+		replaceCharacterAt: handleCharacterReplacement
+	}
+}

src/components/javigaralva/password-generator-app.tsx

@@ -1,113 +1,33 @@
-import { useState, useEffect, type ChangeEventHandler } from 'react'
-import { sample } from './utils/sample'
+import { Button } from './components/button'
 import { ColorizedPassword } from './components/colorized-password'
-import {
-	UPPER_CASE_LETTERS_LIST,
-	LOWER_CASE_LETTERS_LIST,
-	NUMBERS_LIST,
-	SYMBOLS_LIST
-} from './constants/constants'
-
-interface GeneratePasswordOptions {
-	length: number
-	hasUpperCaseLetters: boolean
-	hasLowerCaseLetters: boolean
-	hasNumbers: boolean
-	hasSymbols: boolean
-}
-const MIN_PASSWORD_LENGTH = 1
-const MAX_PASSWORD_LENGTH = 30
-const DEFAULT_PASSWORD_OPTIONS: GeneratePasswordOptions = {
-	length: 10,
-	hasUpperCaseLetters: true,
-	hasLowerCaseLetters: true,
-	hasNumbers: true,
-	hasSymbols: true
-}
-
-function generatePassword(options: GeneratePasswordOptions) {
-	return Array.from<undefined>({ length: options.length }).reduce(
-		(acc: string) => acc + getRandomCharacter(options),
-		''
-	)
-}
-
-function getRandomCharacter(options: GeneratePasswordOptions) {
-	return getRandomCharacterPickerFunction(options)?.() ?? ''
-}
-
-function getRandomCharacterPickerFunction(options: GeneratePasswordOptions) {
-	const choosableStrategy = getChoosableStrategies(options)
-	return sample(choosableStrategy)
-}
-
-function getChoosableStrategies(options: GeneratePasswordOptions) {
-	return [
-		options.hasUpperCaseLetters ? sampleUpperCaseLetter : undefined,
-		options.hasLowerCaseLetters ? sampleLowerCaseLetter : undefined,
-		options.hasNumbers ? sampleNumber : undefined,
-		options.hasSymbols ? sampleSymbol : undefined
-	].filter(Boolean)
-}
-
-const sampleUpperCaseLetter = makeSampleCharacterFunction(UPPER_CASE_LETTERS_LIST)
-const sampleLowerCaseLetter = makeSampleCharacterFunction(LOWER_CASE_LETTERS_LIST)
-const sampleNumber = makeSampleCharacterFunction(NUMBERS_LIST)
-const sampleSymbol = makeSampleCharacterFunction(SYMBOLS_LIST)
-
-function makeSampleCharacterFunction(characters: string[]) {
-	return () => sample(characters)
-}
+import { MAX_PASSWORD_LENGTH, MIN_PASSWORD_LENGTH } from './constants/constants'
+import { usePasswordGenerator } from './hooks/use-password-generator'
 
 export default function Main() {
-	const [passwordLength, setPasswordLength] = useState(DEFAULT_PASSWORD_OPTIONS.length)
-	const [password, setPassword] = useState('')
+	const { passwordLength, setPasswordLength, password, generatePassword, replaceCharacterAt } =
+		usePasswordGenerator()
 
-	const handleGeneratePassword = () => {
-		setPassword(
-			generatePassword({
-				...DEFAULT_PASSWORD_OPTIONS,
-				length: passwordLength
-			})
-		)
+	const handleCopy = () => {
+		navigator.clipboard.writeText(password)
 	}
 
-	const handleOnChangeSlider: ChangeEventHandler<HTMLInputElement> = (e) => {
-		setPasswordLength(Number(e.target.value))
-	}
-
-	useEffect(() => {
-		setPassword(
-			generatePassword({
-				...DEFAULT_PASSWORD_OPTIONS,
-				length: passwordLength
-			})
-		)
-	}, [passwordLength])
-
 	return (
-		<div className='w-screen h-screen bg-stone-800'>
+		<div className='w-screen h-screen bg-stone-800 select-none'>
 			<div className='flex place-content-center h-screen'>
 				<div className='grid min-w-100 place-items-center justify-evenly grid-rows-1'>
 					<div className='min-h-min mx-10 text-center mt-32'>
-						<ColorizedPassword password={password} />
+						<ColorizedPassword password={password} onClickCharacter={replaceCharacterAt} />
 					</div>
 					<div className='flex justify-center items-end min-w-full min-h-full'>
 						<div className='mb-32 sm:mb-48'>
 							<div className='flex flex-col place-items-center gap-10'>
-								<button
-									className='bg-yellow-600 rounded min-w-fit font-black uppercase py-2 w-60 text-lg text-black/75 tracking-wide duration-300 hover:shadow-yellow-400/25 scale-100 hover:bg-yellow-500 active:scale-95 shadow-2xl shadow-slate-900'
-									onClick={handleGeneratePassword}
-								>
-									Generate
-								</button>
-								<input
-									className='w-60 h-1 outline-2 rounded-lg outline-dotted outline-offset-8 outline-slate-50/25 appearance-none cursor-pointer bg-yellow-600/50 accent-yellow-600'
-									type='range'
-									min={MIN_PASSWORD_LENGTH}
-									max={MAX_PASSWORD_LENGTH}
-									value={passwordLength}
-									onChange={handleOnChangeSlider}
+								<div className='flex gap-3'>
+									<GenerateButton onClick={generatePassword} />
+									<CopyButton onClick={handleCopy} />
+								</div>
+								<PasswordLengthSlider
+									passwordLength={passwordLength}
+									onChange={(e) => setPasswordLength(Number(e.target.value))}
 								/>
 							</div>
 						</div>
@@ -117,3 +37,39 @@ export default function Main() {
 		</div>
 	)
 }
+
+function PasswordLengthSlider({ passwordLength, onChange }) {
+	return (
+		<input
+			className='w-60 h-1 outline-2 rounded-lg outline-dotted outline-offset-8 outline-slate-50/25 appearance-none cursor-pointer bg-yellow-600/50 accent-yellow-600'
+			type='range'
+			min={MIN_PASSWORD_LENGTH}
+			max={MAX_PASSWORD_LENGTH}
+			value={passwordLength}
+			onChange={onChange}
+		/>
+	)
+}
+function GenerateButton({ onClick }) {
+	return (
+		<Button
+			className='w-44 bg-yellow-600 hover:shadow-yellow-400/25 hover:bg-yellow-500'
+			onClick={onClick}
+		>
+			{' '}
+			Generate{' '}
+		</Button>
+	)
+}
+
+function CopyButton({ onClick }) {
+	return (
+		<Button
+			className='w-20 bg-zinc-400 hover:shadow-zinc-200/25 hover:bg-zinc-300'
+			onClick={onClick}
+		>
+			{' '}
+			Copy{' '}
+		</Button>
+	)
+}

src/components/javigaralva/utils/generate-password/generate-password.ts

@@ -0,0 +1,62 @@
+import { sample } from '../sample'
+import {
+	UPPER_CASE_LETTERS_LIST,
+	LOWER_CASE_LETTERS_LIST,
+	NUMBERS_LIST,
+	SYMBOLS_LIST
+} from '../../constants/constants'
+
+export interface GeneratePasswordOptions {
+	length: number
+	hasUpperCaseLetters: boolean
+	hasLowerCaseLetters: boolean
+	hasNumbers: boolean
+	hasSymbols: boolean
+}
+export function generatePassword(options: GeneratePasswordOptions) {
+	return Array.from<undefined>({ length: options.length }).reduce(
+		(acc: string) => acc + getRandomCharacter(options),
+		''
+	)
+}
+interface ReplacePasswordCharacterAtParams {
+	password: string
+	index: number
+	options: GeneratePasswordOptions
+}
+export function replacePasswordCharacterAt({
+	password,
+	index,
+	options
+}: ReplacePasswordCharacterAtParams): string {
+	const areParamsValid = index >= 0 && index <= password.length - 1
+	if (!areParamsValid) {
+		return password
+	}
+
+	const character = getRandomCharacter(options)
+	return password.substring(0, index) + character + password.substring(index + character.length)
+}
+function getRandomCharacter(options: GeneratePasswordOptions) {
+	return getRandomCharacterPickerFunction(options)?.() ?? ''
+}
+function getRandomCharacterPickerFunction(options: GeneratePasswordOptions) {
+	const choosableStrategy = getChoosableStrategies(options)
+	return sample(choosableStrategy)
+}
+function getChoosableStrategies(options: GeneratePasswordOptions) {
+	return [
+		options.hasUpperCaseLetters ? sampleUpperCaseLetter : undefined,
+		options.hasLowerCaseLetters ? sampleLowerCaseLetter : undefined,
+		options.hasNumbers ? sampleNumber : undefined,
+		options.hasSymbols ? sampleSymbol : undefined
+	].filter(Boolean)
+}
+const sampleUpperCaseLetter = makeSampleCharacterFunction(UPPER_CASE_LETTERS_LIST)
+const sampleLowerCaseLetter = makeSampleCharacterFunction(LOWER_CASE_LETTERS_LIST)
+const sampleNumber = makeSampleCharacterFunction(NUMBERS_LIST)
+const sampleSymbol = makeSampleCharacterFunction(SYMBOLS_LIST)
+
+function makeSampleCharacterFunction(characters: string[]) {
+	return () => sample(characters)
+}