Skip to content

Commit

Permalink
fix(fe): prevent send email button disable (#1980)
Browse files Browse the repository at this point in the history 
* fix(fe): prevent send email button disable

* chore(fe): change id duplicate warning message

* chore(fe): improve email input error behavior

* chore(fe): change signup fields ring to border
  • Loading branch information
@jwoojin9
jwoojin9 authored Aug 24, 2024
1 parent c58d96c commit c2e4ab2
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 39 deletions.
14 changes: 9 additions & 5 deletions apps/frontend/components/auth/SignUpEmailVerify.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default function SignUpEmailVerify() {
register,
getValues,
trigger,
clearErrors,
formState: { errors }
} = useForm<EmailVerifyInput>({
resolver: zodResolver(schema)
Expand Down Expand Up @@ -113,6 +114,7 @@ export default function SignUpEmailVerify() {
setEmailError('Something went wrong!')
})
}
setSendButtonDisabled(false)
}
const verifyCode = async () => {
const { verificationCode } = getValues()
Expand Down Expand Up @@ -157,12 +159,14 @@ export default function SignUpEmailVerify() {
id="email"
type="email"
className={cn(
'focus-visible:ring-primary w-full focus-visible:ring-1',
(emailError || errors.email) && 'ring-1 ring-red-500'
'focus-visible:border-primary w-full focus-visible:ring-0',
(emailError || errors.email) &&
'border-red-500 focus-visible:border-red-500'
)}
placeholder="example@g.skku.edu"
{...register('email')}
onKeyDown={(e) => {
onFocus={() => clearErrors('email')}
onKeyDown={async (e) => {
if (e.key === 'Enter' && !sendButtonDisabled) {
e.preventDefault()
setSendButtonDisabled(true)
Expand Down Expand Up @@ -190,9 +194,9 @@ export default function SignUpEmailVerify() {
type="number"
className={cn(
'mt-2 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
'focus-visible:ring-primary w-full focus-visible:ring-1',
'focus-visible:border-primary w-full focus-visible:ring-0',
(errors.verificationCode || expired || codeError) &&
'ring-1 ring-red-500 focus-visible:ring-red-500'
'border-red-500 focus-visible:border-red-500'
)}
placeholder="Verification Code"
{...register('verificationCode', {
Expand Down
95 changes: 61 additions & 34 deletions apps/frontend/components/auth/SignUpRegister.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@ import {
import { ScrollArea } from '@/components/ui/scroll-area'
import { baseUrl } from '@/lib/constants'
import { cn } from '@/lib/utils'
import checkIcon from '@/public/check.svg'
import useSignUpModalStore from '@/stores/signUpModal'
import { zodResolver } from '@hookform/resolvers/zod'
import { CommandList } from 'cmdk'
import Image from 'next/image'
import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { FaCheck, FaChevronDown, FaEye, FaEyeSlash } from 'react-icons/fa'
Expand Down Expand Up @@ -305,12 +307,14 @@ export default function SignUpRegister() {
errors.username && errors.username.message === 'Required'
const isInvalidFormatError =
errors.username && errors.username.message !== 'Required'
const isUsernameChecked = checkedUsername === getValues('username')
const isUsernameChecked =
checkedUsername === getValues('username') && getValues('username')
const isAvailable =
!errors.username && isUsernameAvailable && isUsernameChecked
const isUnavailable =
!errors.username && !isUsernameAvailable && isUsernameChecked
const shouldCheckUserId = !isUsernameChecked && !errors.username
const shouldCheckUserId =
!isUsernameChecked && !errors.username && getValues('username')

return (
<div className="mb-5 mt-12 flex w-full flex-col py-4">
Expand All @@ -319,23 +323,29 @@ export default function SignUpRegister() {
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex flex-col gap-1">
<div className="flex gap-2">
<div className="flex items-center gap-2">
<Input
placeholder="User ID"
className={cn(
focusedList[1] && 'ring-1 focus-visible:ring-1',
errors.username && (getValues('username') || inputFocus !== 1)
? 'ring-red-500 focus-visible:ring-red-500'
: 'ring-primary',
'focus-visible:ring-0',
!focusedList[1]
? ''
: errors.username &&
(getValues('username') || inputFocus !== 1)
? 'border-red-500 focus-visible:border-red-500'
: 'border-primary',

!isUsernameAvailable &&
getValues('username') &&
(checkedUsername === getValues('username') ||
inputFocus !== 1) &&
'ring-red-500 focus-visible:ring-red-500'
'border-red-500 focus-visible:border-red-500'
)}
{...register('username', {
onChange: () => validation('username'),
onChange: () => {
validation('username')
setIsUsernameAvailable(false)
},
validate: (value) =>
value === checkedUsername && isUsernameAvailable
? true
Expand All @@ -356,7 +366,7 @@ export default function SignUpRegister() {
checkedUsername == getValues('username')) ||
errors.username) &&
'bg-gray-400',
'flex aspect-square w-12 items-center justify-center rounded-md'
'flex h-8 w-11 items-center justify-center rounded-md'
)}
disabled={
(isUsernameAvailable &&
Expand All @@ -365,8 +375,9 @@ export default function SignUpRegister() {
? true
: false
}
size="icon"
>
<FaCheck className="text-white" size="20" />
<Image src={checkIcon} alt="check" />
</Button>
</div>
<div className="text-xs">
Expand All @@ -382,7 +393,9 @@ export default function SignUpRegister() {
{isAvailable && (
<p className="text-xs text-blue-500">Available</p>
)}
{isUnavailable && <p className="text-red-500">Unavailable</p>}
{isUnavailable && (
<p className="text-red-500">This ID is already in use</p>
)}
{shouldCheckUserId && (
<p className="text-red-500">Check user ID</p>
)}
Expand All @@ -392,7 +405,7 @@ export default function SignUpRegister() {
(!isUsernameAvailable &&
checkedUsername === getValues('username') &&
getValues('username') ? (
<p className="text-red-500">Unavailable</p>
<p className="text-red-500">This ID is already in use</p>
) : (
<div
className={cn(
Expand All @@ -415,10 +428,13 @@ export default function SignUpRegister() {
<Input
placeholder="Password"
className={cn(
focusedList[2] && 'ring-1 focus-visible:ring-1',
errors.password && (getValues('password') || inputFocus !== 2)
? 'ring-red-500 focus-visible:ring-red-500'
: 'ring-primary'
'focus-visible:ring-0',
!focusedList[2]
? ''
: errors.password &&
(getValues('password') || inputFocus !== 2)
? 'border-red-500 focus-visible:border-red-500'
: 'border-primary'
)}
{...register('password', {
onChange: () => validation('password')
Expand Down Expand Up @@ -475,11 +491,13 @@ export default function SignUpRegister() {
onChange: () => validation('passwordAgain')
})}
className={cn(
focusedList[3] && 'ring-1 focus-visible:ring-1',
errors.passwordAgain &&
(getValues('passwordAgain') || inputFocus !== 3)
? 'ring-red-500 focus-visible:ring-red-500'
: 'ring-primary'
'focus-visible:ring-0',
!focusedList[3]
? ''
: errors.passwordAgain &&
(getValues('passwordAgain') || inputFocus !== 3)
? 'border-red-500 focus-visible:border-red-500'
: 'border-primary'
)}
placeholder="Re-enter password"
type={passwordAgainShow ? 'text' : 'password'}
Expand Down Expand Up @@ -511,10 +529,13 @@ export default function SignUpRegister() {
onChange: () => validation('firstName')
})}
className={cn(
focusedList[4] && 'ring-1 focus-visible:ring-1',
errors.firstName && (getValues('firstName') || inputFocus !== 4)
? 'ring-red-500 focus-visible:ring-red-500'
: 'ring-primary'
'focus-visible:ring-0',
!focusedList[4]
? ''
: errors.firstName &&
(getValues('firstName') || inputFocus !== 4)
? 'border-red-500 focus-visible:border-red-500'
: 'border-primary'
)}
onFocus={() => {
updateFocus(4)
Expand All @@ -531,10 +552,13 @@ export default function SignUpRegister() {
onChange: () => validation('lastName')
})}
className={cn(
focusedList[5] && 'ring-1 focus-visible:ring-1',
errors.lastName && (getValues('lastName') || inputFocus !== 5)
? 'ring-red-500 focus-visible:ring-red-500'
: 'ring-primary'
'focus-visible:ring-0',
!focusedList[5]
? ''
: errors.lastName &&
(getValues('lastName') || inputFocus !== 5)
? 'border-red-500 focus-visible:border-red-500'
: 'border-primary'
)}
onFocus={() => {
updateFocus(5)
Expand All @@ -552,10 +576,13 @@ export default function SignUpRegister() {
onChange: () => validation('studentId')
})}
className={cn(
focusedList[6] && 'ring-1 focus-visible:ring-1',
errors.studentId && (getValues('studentId') || inputFocus !== 6)
? 'ring-red-500 focus-visible:ring-red-500'
: 'ring-primary'
'focus-visible:ring-0',
!focusedList[6]
? ''
: errors.studentId &&
(getValues('studentId') || inputFocus !== 6)
? 'border-red-500 focus-visible:border-red-500'
: 'border-primary'
)}
onFocus={() => {
updateFocus(6)
Expand Down
3 changes: 3 additions & 0 deletions apps/frontend/public/check.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c2e4ab2

Please sign in to comment.