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');
|
console.log('login');
|
||||||
await userLogin(loginUser.value);
|
await userLogin(loginUser.value);
|
||||||
if (isLogin.value) {
|
if (isLogin.value) {
|
||||||
@ -31,7 +31,7 @@ async function handleLogin() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<form @submit.prevent="handleLogin" action="POST" class="form">
|
<form @submit.prevent="handleSubmit" action="POST">
|
||||||
<h2>로그인</h2>
|
<h2>로그인</h2>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="userId">아이디</label>
|
<label for="userId">아이디</label>
|
||||||
@ -44,28 +44,31 @@ async function handleLogin() {
|
|||||||
<TextButton> 비밀번호를 잊으셨나요? </TextButton>
|
<TextButton> 비밀번호를 잊으셨나요? </TextButton>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-handler">
|
||||||
<FilledButton primary class="button" type="submit">로그인</FilledButton>
|
<FilledButton primary class="button" type="submit">로그인</FilledButton>
|
||||||
<p>
|
<p>
|
||||||
아직 회원이 아니신가요?
|
아직 회원이 아니신가요?
|
||||||
<RouterLink :to="{ name: 'home' }"><TextButton primary>회원가입</TextButton></RouterLink>
|
<RouterLink :to="{ name: 'user-join' }"
|
||||||
|
><TextButton primary>회원가입</TextButton></RouterLink
|
||||||
|
>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.form {
|
form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 12px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 80px;
|
margin-top: 40px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group,
|
||||||
|
.form-handler {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@ -73,6 +76,11 @@ async function handleLogin() {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-handler {
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -1,28 +1,39 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
import { registMember } from '@/api/member';
|
import { registMember } from '@/api/member';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
import TextButton from '../common/TextButton.vue';
|
||||||
|
import FilledButton from '../common/FilledButton.vue';
|
||||||
|
|
||||||
const router = useRouter();
|
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 member = computed(() => {
|
||||||
const email_domain = ref('');
|
return {
|
||||||
|
id: id.value,
|
||||||
const member = reactive({
|
email: email.value,
|
||||||
id: '',
|
name: name.value,
|
||||||
name: '',
|
password: password.value,
|
||||||
password: '',
|
};
|
||||||
email: email_id.value + '@' + email_domain.value,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function onSubmit() {
|
function handleSubmit() {
|
||||||
member.value.email = email_id.value + '@' + email_domain.value;
|
if (password.value !== passwordConfirm.value) {
|
||||||
console.log(member.value);
|
return;
|
||||||
|
}
|
||||||
registMember(
|
registMember(
|
||||||
member.value,
|
member.value,
|
||||||
(response) => {
|
(response) => {
|
||||||
if (response.status == 200) console.log('회원가입 성공!');
|
if (response.status == 200) {
|
||||||
router.push({ name: 'user-login' });
|
router.push({ name: 'user-login' });
|
||||||
|
}
|
||||||
},
|
},
|
||||||
(error) => console.error(error)
|
(error) => console.error(error)
|
||||||
);
|
);
|
||||||
@ -30,65 +41,110 @@ function onSubmit() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<form @submit.prevent="handleSubmit" action="POST">
|
||||||
<div class="row justify-content-center">
|
<h2>회원가입</h2>
|
||||||
<div class="col-lg-10">
|
<div class="form-group">
|
||||||
<h2 class="my-3 py-3 shadow-sm bg-light text-center">
|
<label for="userId">아이디</label>
|
||||||
<mark class="orange">회원가입</mark>
|
<input v-model="id" type="text" id="userId" required />
|
||||||
</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-10 text-start">
|
<div class="form-group">
|
||||||
<form>
|
<label for="email">이메일</label>
|
||||||
<div class="mb-3">
|
<input v-model="email" type="email" id="email" required />
|
||||||
<label for="username" class="form-label">이름 : </label>
|
|
||||||
<input type="text" class="form-control" placeholder="이름..." v-model="member.name" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="form-group">
|
||||||
<label for="userid" class="form-label">아이디 : </label>
|
<label for="name">닉네임</label>
|
||||||
<input type="text" class="form-control" placeholder="아이디..." v-model="member.id" />
|
<input v-model="name" type="text" id="name" required />
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="form-group">
|
||||||
<label for="userpwd" class="form-label">비밀번호 : </label>
|
<label for="password">비밀번호</label>
|
||||||
<input
|
<input v-model="password" type="password" id="password" required />
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="비밀번호..."
|
|
||||||
v-model="member.password"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div :class="['form-group', isPasswordMiss ? 'error' : '']">
|
||||||
<label for="pwdcheck" class="form-label">비밀번호확인 : </label>
|
<label for="password-confirm">비밀번호 확인</label>
|
||||||
<input type="text" class="form-control" id="pwdcheck" placeholder="비밀번호확인..." />
|
<input v-model="passwordConfirm" type="password" id="password-confirm" required />
|
||||||
|
<p class="error-msg" v-if="isPasswordMiss">비밀번호가 일치하지 않습니다.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="form-handler">
|
||||||
<label for="emailid" class="form-label">이메일 : </label>
|
<FilledButton primary class="button" type="submit">회원가입</FilledButton>
|
||||||
<div class="input-group">
|
<p>
|
||||||
<input
|
이미 회원이신가요?
|
||||||
type="text"
|
<RouterLink :to="{ name: 'user-login' }">
|
||||||
class="form-control"
|
<TextButton primary>로그인</TextButton>
|
||||||
placeholder="이메일아이디"
|
</RouterLink>
|
||||||
v-model="email_id"
|
</p>
|
||||||
/>
|
|
||||||
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</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