Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7c707ecbcf |
@@ -5,13 +5,13 @@
|
||||
<form @submit.prevent="handleLogin" v-if="!showRegisterForm">
|
||||
<div class="form-group">
|
||||
<label for="username">사용자명</label>
|
||||
<InputText id="username" v-model="username" class="w-full" :class="{'p-invalid': usernameError}" />
|
||||
<small v-if="usernameError" class="p-error">{{ usernameError }}</small>
|
||||
<InputText id="username" v-model="username" class="w-full" />
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">비밀번호</label>
|
||||
<InputText id="password" v-model="password" type="password" class="w-full" :class="{'p-invalid': passwordError}" />
|
||||
<small v-if="passwordError" class="p-error">{{ passwordError }}</small>
|
||||
<InputText id="password" v-model="password" type="password" class="w-full" />
|
||||
|
||||
</div>
|
||||
<div class="form-options">
|
||||
<div class="remember-me">
|
||||
@@ -32,37 +32,35 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label for="registerUsername">사용자명(로그인 아이디)</label>
|
||||
<InputText id="registerUsername" v-model="registerUsername" class="w-full" :class="{'p-invalid': registerUsernameError}" />
|
||||
<small v-if="registerUsernameError" class="p-error">{{ registerUsernameError }}</small>
|
||||
<InputText id="registerUsername" v-model="registerUsername" class="w-full" />
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="registerName">이름</label>
|
||||
<InputText id="registerName" v-model="registerName" class="w-full" :class="{'p-invalid': registerNameError}" />
|
||||
<small v-if="registerNameError" class="p-error">{{ registerNameError }}</small>
|
||||
<InputText id="registerName" v-model="registerName" class="w-full" />
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="registerEmail">이메일</label>
|
||||
<InputText id="registerEmail" v-model="registerEmail" class="w-full" :class="{'p-invalid': registerEmailError}" />
|
||||
<small v-if="registerEmailError" class="p-error">{{ registerEmailError }}</small>
|
||||
<InputText id="registerEmail" v-model="registerEmail" class="w-full" />
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="registerPassword">비밀번호</label>
|
||||
<Password id="registerPassword" v-model="registerPassword" :feedback="true" toggleMask
|
||||
:class="{'p-invalid': registerPasswordError}"
|
||||
:promptLabel="'비밀번호 강도'"
|
||||
:weakLabel="'약함'"
|
||||
:mediumLabel="'중간'"
|
||||
:strongLabel="'강함'"
|
||||
class="w-full" />
|
||||
<small v-if="registerPasswordError" class="p-error">{{ registerPasswordError }}</small>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="registerPasswordConfirm">비밀번호 확인</label>
|
||||
<Password id="registerPasswordConfirm" v-model="registerPasswordConfirm" toggleMask
|
||||
:class="{'p-invalid': registerPasswordConfirmError}"
|
||||
:feedback="false"
|
||||
class="w-full" />
|
||||
<small v-if="registerPasswordConfirmError" class="p-error">{{ registerPasswordConfirmError }}</small>
|
||||
|
||||
</div>
|
||||
|
||||
<Button type="submit" label="회원가입" class="w-full" :loading="loading" />
|
||||
@@ -89,8 +87,6 @@ const username = ref('');
|
||||
const password = ref('');
|
||||
const rememberMe = ref(false);
|
||||
const loading = ref(false);
|
||||
const usernameError = ref('');
|
||||
const passwordError = ref('');
|
||||
|
||||
// 회원가입 폼 상태
|
||||
const showRegisterForm = ref(false);
|
||||
@@ -99,11 +95,6 @@ const registerUsername = ref('');
|
||||
const registerEmail = ref('');
|
||||
const registerPassword = ref('');
|
||||
const registerPasswordConfirm = ref('');
|
||||
const registerNameError = ref('');
|
||||
const registerUsernameError = ref('');
|
||||
const registerEmailError = ref('');
|
||||
const registerPasswordError = ref('');
|
||||
const registerPasswordConfirmError = ref('');
|
||||
|
||||
// 비밀번호 강도 검사
|
||||
const passwordHasMinLength = computed(() => registerPassword.value.length >= 8);
|
||||
@@ -118,18 +109,14 @@ const validateForm = () => {
|
||||
|
||||
// 사용자명 검증
|
||||
if (!username.value) {
|
||||
usernameError.value = '사용자명을 입력해주세요.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '사용자명을 입력해주세요.', life: 3000 });
|
||||
isValid = false;
|
||||
} else {
|
||||
usernameError.value = '';
|
||||
}
|
||||
|
||||
// 비밀번호 유효성 검사
|
||||
if (!password.value) {
|
||||
passwordError.value = '비밀번호를 입력해주세요.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호를 입력해주세요.', life: 3000 });
|
||||
isValid = false;
|
||||
} else {
|
||||
passwordError.value = '';
|
||||
}
|
||||
|
||||
return isValid;
|
||||
@@ -141,58 +128,48 @@ const validateRegisterForm = () => {
|
||||
|
||||
// 이름 검증
|
||||
if (!registerName.value) {
|
||||
registerNameError.value = '이름을 입력해주세요.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '이름을 입력해주세요.', life: 3000 });
|
||||
isValid = false;
|
||||
} else {
|
||||
registerNameError.value = '';
|
||||
}
|
||||
|
||||
// 사용자명 검증
|
||||
if (!registerUsername.value) {
|
||||
registerUsernameError.value = '사용자명을 입력해주세요.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '사용자명을 입력해주세요.', life: 3000 });
|
||||
isValid = false;
|
||||
} else if (registerUsername.value.length < 4) {
|
||||
registerUsernameError.value = '사용자명은 최소 4자 이상이어야 합니다.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '사용자명은 최소 4자 이상이어야 합니다.', life: 3000 });
|
||||
isValid = false;
|
||||
} else {
|
||||
registerUsernameError.value = '';
|
||||
}
|
||||
|
||||
// 이메일 검증
|
||||
if (!registerEmail.value) {
|
||||
registerEmailError.value = '이메일을 입력해주세요.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '이메일을 입력해주세요.', life: 3000 });
|
||||
isValid = false;
|
||||
} else if (!/^\S+@\S+\.\S+$/.test(registerEmail.value)) {
|
||||
registerEmailError.value = '유효한 이메일 주소를 입력해주세요.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '유효한 이메일 주소를 입력해주세요.', life: 3000 });
|
||||
isValid = false;
|
||||
} else {
|
||||
registerEmailError.value = '';
|
||||
}
|
||||
|
||||
// 비밀번호 유효성 검사
|
||||
if (!registerPassword.value) {
|
||||
registerPasswordError.value = '비밀번호를 입력해주세요.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호를 입력해주세요.', life: 3000 });
|
||||
isValid = false;
|
||||
} else if (registerPassword.value.length < 8) {
|
||||
registerPasswordError.value = '비밀번호는 최소 8자 이상이어야 합니다.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호는 최소 8자 이상이어야 합니다.', life: 3000 });
|
||||
isValid = false;
|
||||
} else if (!passwordHasUppercase.value || !passwordHasLowercase.value ||
|
||||
!passwordHasNumber.value || !passwordHasSpecial.value) {
|
||||
registerPasswordError.value = '비밀번호는 대문자, 소문자, 숫자, 특수문자를 모두 포함해야 합니다.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호는 대문자, 소문자, 숫자, 특수문자를 모두 포함해야 합니다.', life: 3000 });
|
||||
isValid = false;
|
||||
} else {
|
||||
registerPasswordError.value = '';
|
||||
}
|
||||
|
||||
// 비밀번호 확인 유효성 검사
|
||||
if (!registerPasswordConfirm.value) {
|
||||
registerPasswordConfirmError.value = '비밀번호 확인을 입력해주세요.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호 확인을 입력해주세요.', life: 3000 });
|
||||
isValid = false;
|
||||
} else if (registerPassword.value !== registerPasswordConfirm.value) {
|
||||
registerPasswordConfirmError.value = '비밀번호가 일치하지 않습니다.';
|
||||
toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호가 일치하지 않습니다.', life: 3000 });
|
||||
isValid = false;
|
||||
} else {
|
||||
registerPasswordConfirmError.value = '';
|
||||
}
|
||||
|
||||
return isValid;
|
||||
|
||||
Reference in New Issue
Block a user