Feat: Add user regist page
This commit is contained in:
parent
f7348fa626
commit
e95cde0ec2
@ -21,7 +21,7 @@ const loginUser = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
async function handleLogin() {
|
||||
async function handleSubmit() {
|
||||
console.log('login');
|
||||
await userLogin(loginUser.value);
|
||||
if (isLogin.value) {
|
||||
@ -31,7 +31,7 @@ async function handleLogin() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="handleLogin" action="POST" class="form">
|
||||
<form @submit.prevent="handleSubmit" action="POST">
|
||||
<h2>로그인</h2>
|
||||
<div class="form-group">
|
||||
<label for="userId">아이디</label>
|
||||
@ -44,28 +44,31 @@ async function handleLogin() {
|
||||
<TextButton> 비밀번호를 잊으셨나요? </TextButton>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-handler">
|
||||
<FilledButton primary class="button" type="submit">로그인</FilledButton>
|
||||
<p>
|
||||
아직 회원이 아니신가요?
|
||||
<RouterLink :to="{ name: 'home' }"><TextButton primary>회원가입</TextButton></RouterLink>
|
||||
<RouterLink :to="{ name: 'user-join' }"
|
||||
><TextButton primary>회원가입</TextButton></RouterLink
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form {
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 80px;
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-group,
|
||||
.form-handler {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
@ -73,6 +76,11 @@ async function handleLogin() {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-handler {
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,28 +1,39 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { registMember } from '@/api/member';
|
||||
import { useRouter } from 'vue-router';
|
||||
import TextButton from '../common/TextButton.vue';
|
||||
import FilledButton from '../common/FilledButton.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const id = ref('');
|
||||
const email = ref('');
|
||||
const name = ref('');
|
||||
const password = ref('');
|
||||
const passwordConfirm = ref('');
|
||||
const isPasswordMiss = computed(
|
||||
() => passwordConfirm.value && password.value !== passwordConfirm.value
|
||||
);
|
||||
|
||||
const email_id = ref('');
|
||||
const email_domain = ref('');
|
||||
|
||||
const member = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
password: '',
|
||||
email: email_id.value + '@' + email_domain.value,
|
||||
const member = computed(() => {
|
||||
return {
|
||||
id: id.value,
|
||||
email: email.value,
|
||||
name: name.value,
|
||||
password: password.value,
|
||||
};
|
||||
});
|
||||
|
||||
function onSubmit() {
|
||||
member.value.email = email_id.value + '@' + email_domain.value;
|
||||
console.log(member.value);
|
||||
function handleSubmit() {
|
||||
if (password.value !== passwordConfirm.value) {
|
||||
return;
|
||||
}
|
||||
registMember(
|
||||
member.value,
|
||||
(response) => {
|
||||
if (response.status == 200) console.log('회원가입 성공!');
|
||||
if (response.status == 200) {
|
||||
router.push({ name: 'user-login' });
|
||||
}
|
||||
},
|
||||
(error) => console.error(error)
|
||||
);
|
||||
@ -30,65 +41,110 @@ function onSubmit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<h2 class="my-3 py-3 shadow-sm bg-light text-center">
|
||||
<mark class="orange">회원가입</mark>
|
||||
</h2>
|
||||
<form @submit.prevent="handleSubmit" action="POST">
|
||||
<h2>회원가입</h2>
|
||||
<div class="form-group">
|
||||
<label for="userId">아이디</label>
|
||||
<input v-model="id" type="text" id="userId" required />
|
||||
</div>
|
||||
<div class="col-lg-10 text-start">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">이름 : </label>
|
||||
<input type="text" class="form-control" placeholder="이름..." v-model="member.name" />
|
||||
<div class="form-group">
|
||||
<label for="email">이메일</label>
|
||||
<input v-model="email" type="email" id="email" required />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="userid" class="form-label">아이디 : </label>
|
||||
<input type="text" class="form-control" placeholder="아이디..." v-model="member.id" />
|
||||
<div class="form-group">
|
||||
<label for="name">닉네임</label>
|
||||
<input v-model="name" type="text" id="name" required />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="userpwd" class="form-label">비밀번호 : </label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="비밀번호..."
|
||||
v-model="member.password"
|
||||
/>
|
||||
<div class="form-group">
|
||||
<label for="password">비밀번호</label>
|
||||
<input v-model="password" type="password" id="password" required />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="pwdcheck" class="form-label">비밀번호확인 : </label>
|
||||
<input type="text" class="form-control" id="pwdcheck" placeholder="비밀번호확인..." />
|
||||
<div :class="['form-group', isPasswordMiss ? 'error' : '']">
|
||||
<label for="password-confirm">비밀번호 확인</label>
|
||||
<input v-model="passwordConfirm" type="password" id="password-confirm" required />
|
||||
<p class="error-msg" v-if="isPasswordMiss">비밀번호가 일치하지 않습니다.</p>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="emailid" class="form-label">이메일 : </label>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="이메일아이디"
|
||||
v-model="email_id"
|
||||
/>
|
||||
<span class="input-group-text">@</span>
|
||||
<select class="form-select" aria-label="이메일 도메인 선택" v-model="email_domain">
|
||||
<option selected>선택</option>
|
||||
<option value="ssafy.com">싸피</option>
|
||||
<option value="google.com">구글</option>
|
||||
<option value="naver.com">네이버</option>
|
||||
<option value="kakao.com">카카오</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto text-center">
|
||||
<button type="button" class="btn btn-outline-primary mb-3" @click="onSubmit">
|
||||
회원가입
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success ms-1 mb-3">초기화</button>
|
||||
<div class="form-handler">
|
||||
<FilledButton primary class="button" type="submit">회원가입</FilledButton>
|
||||
<p>
|
||||
이미 회원이신가요?
|
||||
<RouterLink :to="{ name: 'user-login' }">
|
||||
<TextButton primary>로그인</TextButton>
|
||||
</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group,
|
||||
.form-handler {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-handler {
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: var(--color-text-secondary);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
input {
|
||||
border-width: 1px;
|
||||
box-shadow: var(--shadow);
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
outline-color 0.25s;
|
||||
}
|
||||
|
||||
.error label {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.error input {
|
||||
border-color: var(--color-error);
|
||||
outline-color: var(--color-error);
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
text-align: start;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.forgot {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user