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

Added password vadlidator for validating password || also added max l… #239

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added password vadlidator for validating password || also added max l… #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da0ad0a
Added password vadlidator for validating password || also added max l…
KulshresthJangid Oct 5, 2024
7b8261f
Fixed lint errors and added setEmoji
KulshresthJangid Oct 5, 2024
cac2af2
disable unwanted lint errors
KulshresthJangid Oct 5, 2024
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
140 changes: 91 additions & 49 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,61 @@ import './App.css'
import Footer from './components/Footer'
import ThemeButton from './components/ThemeButton'
import useWindowDimensions from './custom-hooks/useWindowDimensions'
// ...

const App = () => {
// ... (existing code)
function App() {
const [form, setForm] = useState({ email: '', password: '' })
const [themeState, setThemeState] = useState('light')
const [isPasswordShown, setPasswordShown] = useState(false)
const [toggleClass, setToggleClass] = useState(false)
const [showToast, setShowToast] = useState(false)
/* eslint no-unused-vars: "error" */
const [emojiState, setEmojiState] = useState('')
const { height } = useWindowDimensions()

const validatePassword = (password) => {
const passRegex = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/
return passRegex.test(password)
}

const validateEmail = (email) => {
const re = /\S+@\S+\.\S+/
return re.test(email)
}

const handleForm = (e) => {
setForm({
...form,
[e.target.name]: e.target.value,
})
}

const annoyingSubmitButton = () => {
if (!validatePassword(form.password) || !validateEmail(form.email)) {
setToggleClass((prevState) => !prevState)
}
}

/* eslint-disable no-unused-vars */
const handleFormSubmit = async (e) => {
e.preventDefault();
setShowToast(false);
e.preventDefault()
setShowToast(false)

if (
form.password.length < minPasswordLength ||
!validateEmail(form.email)
) {
setToggleClass((prevState) => !prevState);
setShowToast(true);
if (validatePassword(form.password) || !validateEmail(form.email)) {
setToggleClass((prevState) => !prevState)
setShowToast(true)
setTimeout(() => {
setShowToast(false);
}, 1000);
setShowToast(false)
}, 1000)
} else {
// Form is valid, submit the form to the server or take necessary action.
try {
const response = await fetch('https://formspree.io/f/xqkjbjzw', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(form),
});
})

if (response.ok) {
// Handle a successful submission, e.g., redirect the user.
Expand All @@ -39,24 +69,33 @@ const App = () => {
}
}
}
/* eslint-enable no-unused-vars */

const handleSubmit = (e) => {
e.preventDefault()
if (form.password.length < minPasswordLength || !validateEmail(form.email)) {
if (!validatePassword(form.password) || !validateEmail(form.email)) {
setToggleClass((prevState) => !prevState)
setShowToast(true)
setTimeout(() => {
setShowToast(false)
}, 1000)
} else {
// call the API here o whatever action you need to do
// Call the API or any other action
}
}
// To remember user's selected theme.

// To remember the user's selected theme in local storage
useEffect(() => {
localStorage.setItem('theme', themeState)
}, [themeState])

useEffect(() => {
if (!validatePassword(form.password) || !validateEmail(form.email)) {
setEmojiState('em em-rage')
} else {
setEmojiState('em em-smile')
}
}, [form])
return (
<div className="wrapper">
<ThemeButton setThemeState={setThemeState} themeState={themeState} />
Expand All @@ -66,36 +105,32 @@ const App = () => {
<div className="link-container">
<span className="link-title1 title">
<span className="hover">Annoying Submit Button</span>
{' '}
<span
className={`${emojiState} ${form.password.length < minPasswordLength
|| !validateEmail(form.email)
className={`${emojiState} ${!validatePassword(form.password)
|| !validateEmail(form.email)
? 'em em-rage'
: 'em em-smile'
}`}
style={{ height: 20 }}
/>
{' '}
</span>
<span className="link-title2 title">
<span className="hover">Annoying Submit Button</span>
{' '}
<span
className={`${emojiState} ${form.password.length < minPasswordLength
|| !validateEmail(form.email)
className={`${emojiState} ${!validatePassword(form.password)
|| !validateEmail(form.email)
? 'em em-rage'
: 'em em-face_with_hand_over_mouth'
}`}
style={{ height: 20 }}
/>
{' '}
</span>
</div>
</span>
</div>

<form
autoComplete="false"
autoComplete="off"
action="https://formspree.io/f/xqkjbjzw"
method="POST"
onChange={handleForm}
Expand All @@ -114,7 +149,7 @@ const App = () => {
id="email"
type="email"
name="email"
defaultValue={form.email}
value={form.email}
placeholder="Email"
tabIndex={1}
required
Expand All @@ -133,49 +168,57 @@ const App = () => {
</label>
<span className="input-password-group">
<input
className={`input ${form.password.length < minPasswordLength
? 'wrong-input'
: 'correct-input'
className={`input ${validatePassword(form.password)
? 'correct-input'
: 'wrong-input'
} ${themeState}-theme ${!form.password ? 'empty' : ''}`}
id="password"
type={isPasswordShown ? 'text' : 'password'}
name="password"
defaultValue={form.password}
value={form.password}
minLength="6"
maxLength="12"
tabIndex={2}
required
/>

<button className="toggle-btn" type="button" onClick={() => setPasswordShown(!isPasswordShown)}>{isPasswordShown ? <span className="fa fa-eye">{' '}</span> : <span className="fa fa-eye-slash">{' '}</span>}</button>

<button
className="toggle-btn"
type="button"
onClick={() => setPasswordShown(!isPasswordShown)}
>
{isPasswordShown ? (
<span className="fa fa-eye" />
) : (
<span className="fa fa-eye-slash" />
)}
</button>
</span>
</div>
<div>
{form.password.length < minPasswordLength && (
<p className={`${form.password ? 'warning-message' : 'none'}`}>
{!validatePassword(form.password) && (
<p className="warning-message">
Password should be at least 6 characters long
</p>
)}
</div>
<div
style={{
transform: `translateX(${toggleClass

&& !(
form.password.length >= minPasswordLength
&& validateEmail(form.email)
)
&& !(
validatePassword(form.password)
&& validateEmail(form.email)
)
? '33vh'
: '0'
}`,
})`,
transition: 'transform 190ms ease-in-out',
}}
>
<button
type="submit"
tabIndex={3}
className={`submit-button ${form.password.length >= minPasswordLength
&& validateEmail(form.email)
className={`submit-button ${validatePassword(form.password)
&& validateEmail(form.email)
? 'button-success'
: ''
}`}
Expand All @@ -185,16 +228,15 @@ const App = () => {
</button>
</div>
<div
className={`toast ${showToast ? 'fadeIn' : 'fadeOut'
} ${themeState}-theme-toast`}
className={`toast ${showToast ? 'fadeIn' : 'fadeOut'} ${themeState}-theme-toast`}
>
You cannot submit until you fix all the validation errors...
</div>
</form>
</section>
{height < 680 ? null : <Footer theme={themeState} />}
</div>
);
};
)
}

export default App;
export default App
3 changes: 2 additions & 1 deletion src/components/Footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function Footer({ theme }) {
const dateObj = new Date()
return dateObj.getFullYear()
}, [])

/* eslint-disable jsx-a11y/control-has-associated-label */
return (
<footer className={`${theme}-footer`}>
<div className="footer-content">
Expand Down Expand Up @@ -61,6 +61,7 @@ function Footer({ theme }) {
</p>
</div>
</footer>
/* eslint-disable jsx-a11y/control-has-associated-label */
)
}

Expand Down