로그인, 아이디찾기, 비밀번호찾기, 가입시 권장사항 화면 추가
This commit is contained in:
이진기
parent
7f3bd6ef65
commit
940a0320b3
|
|
@ -10,13 +10,17 @@ import { LogoutOutlined } from '@ant-design/icons-vue';
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
||||||
<a-col>
|
<router-link to="/login" style="color: #1890ff">
|
||||||
<a-button @click="'#'">
|
|
||||||
<template #icon>
|
|
||||||
<LogoutOutlined />
|
|
||||||
</template>
|
|
||||||
로그아웃
|
로그아웃
|
||||||
</a-button>
|
</router-link>
|
||||||
</a-col>
|
|
||||||
|
<!-- <a-col>-->
|
||||||
|
<!-- <a-button @click="'#'">-->
|
||||||
|
<!-- <template #icon>-->
|
||||||
|
<!-- <LogoutOutlined />-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- 로그아웃-->
|
||||||
|
<!-- </a-button>-->
|
||||||
|
<!-- </a-col>-->
|
||||||
</a-row>
|
</a-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import locale from 'ant-design-vue/es/locale/ko_KR';
|
||||||
|
import { DEFAULT_THEME } from '~/constants/theme/ui';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-config-provider :locale="locale" :theme="DEFAULT_THEME">
|
||||||
|
<a-row class="w-full h-full">
|
||||||
|
<slot />
|
||||||
|
</a-row>
|
||||||
|
</a-config-provider>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'empty'
|
||||||
|
});
|
||||||
|
|
||||||
|
const dummy = ref('phone');
|
||||||
|
const domain = ref(''); // 도메인 선택 부분
|
||||||
|
|
||||||
|
const domains = [
|
||||||
|
{ value: 'gmail.com', label: 'gmail.com' },
|
||||||
|
{ value: 'naver.com', label: 'naver.com' },
|
||||||
|
{ value: 'daum.net', label: 'daum.net' },
|
||||||
|
{ value: '직접 입력', label: '직접 입력' }
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-row justify="center" class="w-full h-full items-center">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-card
|
||||||
|
bordered
|
||||||
|
style="padding: 24px; background-color: #f9f9f9; border-radius: 8px"
|
||||||
|
>
|
||||||
|
<!-- 아이디 찾기 타이틀 -->
|
||||||
|
<h2 style="text-align: center; font-weight: bold; font-size: 24px">
|
||||||
|
아이디 찾기
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<!-- 검색 방법 선택 -->
|
||||||
|
<div style="display: flex; justify-content: center; margin: 16px 0">
|
||||||
|
<a-radio-group v-model:value="dummy">
|
||||||
|
<a-radio value="phone">휴대폰으로 찾기</a-radio>
|
||||||
|
<a-radio value="email">이메일로 찾기</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-form :colon="false" label-align="left">
|
||||||
|
<!-- 이름 -->
|
||||||
|
<a-form-item
|
||||||
|
label="이름"
|
||||||
|
:label-col="{ span: 4 }"
|
||||||
|
:wrapper-col="{ span: 20 }"
|
||||||
|
>
|
||||||
|
<a-input placeholder="이름을 입력하세요" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 자동입력방지문자 (라디오 값이 'phone'일 때만 표시) -->
|
||||||
|
<a-form-item
|
||||||
|
v-if="dummy === 'phone'"
|
||||||
|
label="자동입력방지문자"
|
||||||
|
:label-col="{ span: 6 }"
|
||||||
|
:wrapper-col="{ span: 18 }"
|
||||||
|
>
|
||||||
|
<div style="display: flex; gap: 8px">
|
||||||
|
<a-input
|
||||||
|
disabled
|
||||||
|
value="564866"
|
||||||
|
style="width: 100px; text-align: center"
|
||||||
|
/>
|
||||||
|
<a-button>새로고침</a-button>
|
||||||
|
<a-button>음성듣기</a-button>
|
||||||
|
</div>
|
||||||
|
<a-input
|
||||||
|
placeholder="자동입력 방지문자를 입력하세요."
|
||||||
|
style="margin-top: 8px"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 휴대전화 (라디오 값이 'phone'일 때만 표시) -->
|
||||||
|
<a-form-item
|
||||||
|
v-if="dummy === 'phone'"
|
||||||
|
label="휴대전화"
|
||||||
|
:label-col="{ span: 4 }"
|
||||||
|
:wrapper-col="{ span: 20 }"
|
||||||
|
>
|
||||||
|
<div style="display: flex; gap: 8px">
|
||||||
|
<a-input style="width: 60px" maxlength="4" />
|
||||||
|
<a-input style="width: 60px" maxlength="4" />
|
||||||
|
<a-input style="width: 60px" maxlength="4" />
|
||||||
|
<a-button>인증번호</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item
|
||||||
|
v-if="dummy === 'email'"
|
||||||
|
label="이메일"
|
||||||
|
:label-col="{ span: 4 }"
|
||||||
|
:wrapper-col="{ span: 20 }"
|
||||||
|
>
|
||||||
|
<!-- 이메일 입력 필드 -->
|
||||||
|
<a-input v-model="dummy" style="width: 120px" />
|
||||||
|
<span> @ </span>
|
||||||
|
<!-- 도메인 입력 필드 -->
|
||||||
|
<a-input v-model="dummy" style="width: 150px; margin-right: 18px" />
|
||||||
|
<!-- 직접 입력 드롭다운 -->
|
||||||
|
<a-select
|
||||||
|
v-model="domains"
|
||||||
|
style="width: 150px"
|
||||||
|
@change="handleDomainChange"
|
||||||
|
>
|
||||||
|
<a-select-option value="직접 입력">직접 입력</a-select-option>
|
||||||
|
<a-select-option value="gmail.com">gmail.com</a-select-option>
|
||||||
|
<a-select-option value="naver.com">naver.com</a-select-option>
|
||||||
|
<a-select-option value="daum.net">daum.net</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 인증번호 (라디오 값이 'phone'일 때만 표시) -->
|
||||||
|
<a-form-item
|
||||||
|
v-if="dummy === 'phone'"
|
||||||
|
label="인증번호"
|
||||||
|
:label-col="{ span: 4 }"
|
||||||
|
:wrapper-col="{ span: 20 }"
|
||||||
|
>
|
||||||
|
<a-input placeholder="인증번호를 입력하세요" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 아이디 찾기 버튼 -->
|
||||||
|
<div style="text-align: center; margin-top: 16px">
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
style="background-color: #1e90ff; color: white; width: 100px"
|
||||||
|
>
|
||||||
|
아이디 찾기
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const useAuthStore = ref('');
|
||||||
|
const remember = ref(false);
|
||||||
|
const memberId = ref('');
|
||||||
|
const password = ref('');
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'empty'
|
||||||
|
});
|
||||||
|
|
||||||
|
// const router = useRouter();
|
||||||
|
// const store = useAuthStore();
|
||||||
|
// const { authentication } = storeToRefs(store);
|
||||||
|
//
|
||||||
|
// onBeforeMount(() => {
|
||||||
|
// store.loadRemember();
|
||||||
|
// });
|
||||||
|
//
|
||||||
|
// onBeforeUnmount(() => {
|
||||||
|
// authentication.value = {
|
||||||
|
// ...authentication.value,
|
||||||
|
// memberId: ''
|
||||||
|
// };
|
||||||
|
// });
|
||||||
|
//
|
||||||
|
// watch(authentication.value, (newValue) => {
|
||||||
|
// if (newValue.remember) {
|
||||||
|
// store.setRemember();
|
||||||
|
// } else {
|
||||||
|
// store.initRemember();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
const login = async () => {
|
||||||
|
// try {
|
||||||
|
// const { data } = await store.authenticate();
|
||||||
|
// store.authorize(data);
|
||||||
|
//
|
||||||
|
// await router.push('/');
|
||||||
|
// } catch (e) {
|
||||||
|
// message.error('아이디 또는 비밀번호를 확인해주세요.');
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateLogin = computed(() => {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-row justify="center" class="w-full h-full items-center">
|
||||||
|
<a-col :span="7.5">
|
||||||
|
<a-card bordered style="background-color: #f5f5f5; padding: 24px">
|
||||||
|
<h1
|
||||||
|
style="
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
로그인
|
||||||
|
</h1>
|
||||||
|
<div style="height: 18px"></div>
|
||||||
|
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox v-model:checked="remember">
|
||||||
|
키보드보안 프로그램적용
|
||||||
|
</a-checkbox>
|
||||||
|
<div style="height: 10px"></div>
|
||||||
|
<div>
|
||||||
|
<p style="font-size: 12px; color: #888">
|
||||||
|
※ 안전한 서비스 이용을 위해 키보드보안 프로그램 적용을 권장합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form :colon="false" label-align="left">
|
||||||
|
<a-form-item label="아이디" :label-col="{ span: 5 }">
|
||||||
|
<a-input
|
||||||
|
v-model:value="memberId"
|
||||||
|
placeholder="아이디를 입력하세요"
|
||||||
|
maxLength="20"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="비밀번호" :label-col="{ span: 5 }">
|
||||||
|
<a-input-password
|
||||||
|
v-model:value="password"
|
||||||
|
placeholder="비밀번호를 입력하세요"
|
||||||
|
maxLength="20"
|
||||||
|
@keyup.enter="login"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
block
|
||||||
|
@click="login"
|
||||||
|
:disabled="!validateLogin"
|
||||||
|
style="font-weight: bold"
|
||||||
|
>
|
||||||
|
로그인
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: center; margin-top: 16px">
|
||||||
|
<router-link to="/login/id" style="color: #1890ff"
|
||||||
|
>아이디 찾기</router-link
|
||||||
|
>
|
||||||
|
<span style="margin: 0 8px; color: #888">|</span>
|
||||||
|
<router-link to="/login/pw" style="color: #1890ff"
|
||||||
|
>비밀번호 찾기</router-link
|
||||||
|
>
|
||||||
|
<span style="margin: 0 8px; color: #888">|</span>
|
||||||
|
<router-link to="/login/join" style="color: #1890ff"
|
||||||
|
>회원가입</router-link
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</a-form>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import locale from 'ant-design-vue/es/locale/ko_KR';
|
||||||
|
import { DEFAULT_THEME } from '~/constants/theme/ui';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const adminJoinStore = ref('');
|
||||||
|
const member = ref('');
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'empty'
|
||||||
|
});
|
||||||
|
|
||||||
|
const changeUrl = (activeKey: string) => {
|
||||||
|
router.push(activeKey);
|
||||||
|
};
|
||||||
|
|
||||||
|
function activeKey(key) {
|
||||||
|
console.log('Active Tab:', key);
|
||||||
|
}
|
||||||
|
|
||||||
|
const disabledInst = computed(() => {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
const disabledCert = computed(() => {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
const disabledForm = computed(() => {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
const disabledCmptn = computed(() => {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-config-provider :locale="locale" :theme="DEFAULT_THEME">
|
||||||
|
<a-row class="w-full h-full">
|
||||||
|
<a-row justify="center" class="w-full h-full items-center">
|
||||||
|
<a-col :span="15">
|
||||||
|
<a-card bordered class="p-5">
|
||||||
|
<a-typography-title :level="4" type="secondary" class="text-center">
|
||||||
|
참여기관 회원가입
|
||||||
|
</a-typography-title>
|
||||||
|
|
||||||
|
<a-tabs default-active-key="1" v-model:active-key="activeKey">
|
||||||
|
<a-tab-pane key="/admin/login/join/trms" tab="01.약관동의" />
|
||||||
|
<a-tab-pane
|
||||||
|
key="/admin/login/join/inst"
|
||||||
|
tab="02.기관선택"
|
||||||
|
:disabled="disabledInst"
|
||||||
|
/>
|
||||||
|
<a-tab-pane
|
||||||
|
key="/admin/login/join/cert"
|
||||||
|
tab="03.본인인증"
|
||||||
|
:disabled="disabledCert"
|
||||||
|
/>
|
||||||
|
<a-tab-pane
|
||||||
|
key="/admin/login/join"
|
||||||
|
tab="04.정보입력"
|
||||||
|
:disabled="disabledForm"
|
||||||
|
/>
|
||||||
|
<a-tab-pane
|
||||||
|
key="/admin/login/join/cmptn"
|
||||||
|
tab="05.가입완료"
|
||||||
|
:disabled="disabledCmptn"
|
||||||
|
/>
|
||||||
|
</a-tabs>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-row>
|
||||||
|
</a-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'empty'
|
||||||
|
});
|
||||||
|
|
||||||
|
const dummy = ref<string>('phone');
|
||||||
|
const domain = ref(''); // 도메인 선택 부분
|
||||||
|
|
||||||
|
const domains = [
|
||||||
|
{ value: 'gmail.com', label: 'gmail.com' },
|
||||||
|
{ value: 'naver.com', label: 'naver.com' },
|
||||||
|
{ value: 'daum.net', label: 'daum.net' },
|
||||||
|
{ value: '직접 입력', label: '직접 입력' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleDomainChange = (value) => {
|
||||||
|
if (value !== '직접 입력') {
|
||||||
|
domain.value = value;
|
||||||
|
} else {
|
||||||
|
domain.value = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-row justify="center" class="w-full h-full items-center">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-card
|
||||||
|
bordered
|
||||||
|
style="padding: 24px; background-color: #f9f9f9; border-radius: 8px"
|
||||||
|
>
|
||||||
|
<!-- 아이디 찾기 타이틀 -->
|
||||||
|
<h2 style="text-align: center; font-weight: bold; font-size: 24px">
|
||||||
|
비밀번호 재설정
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<!-- 검색 방법 선택 -->
|
||||||
|
<div style="display: flex; justify-content: center; margin: 16px 0">
|
||||||
|
<a-radio-group v-model:value="dummy">
|
||||||
|
<a-radio defaultValue="phone">휴대폰으로 찾기</a-radio>
|
||||||
|
<a-radio value="email">이메일로 찾기</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-form :colon="false" label-align="left">
|
||||||
|
<!-- 이름 -->
|
||||||
|
<a-form-item
|
||||||
|
label="이름"
|
||||||
|
:label-col="{ span: 4 }"
|
||||||
|
:wrapper-col="{ span: 20 }"
|
||||||
|
>
|
||||||
|
<a-input placeholder="이름을 입력하세요" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 아이디 -->
|
||||||
|
<a-form-item
|
||||||
|
label="아이디"
|
||||||
|
:label-col="{ span: 4 }"
|
||||||
|
:wrapper-col="{ span: 20 }"
|
||||||
|
>
|
||||||
|
<a-input placeholder="아이디를 입력하세요" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 휴대전화 (라디오 값이 'phone'일 때만 표시) -->
|
||||||
|
<a-form-item
|
||||||
|
v-if="dummy === 'phone'"
|
||||||
|
label="휴대전화"
|
||||||
|
:label-col="{ span: 4 }"
|
||||||
|
:wrapper-col="{ span: 20 }"
|
||||||
|
>
|
||||||
|
<div style="display: flex; gap: 8px">
|
||||||
|
<a-input style="width: 90px" maxlength="4" />
|
||||||
|
<a-input style="width: 90px" maxlength="4" />
|
||||||
|
<a-input style="width: 90px" maxlength="4" />
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item
|
||||||
|
v-if="dummy === 'email'"
|
||||||
|
label="이메일"
|
||||||
|
:label-col="{ span: 4 }"
|
||||||
|
:wrapper-col="{ span: 20 }"
|
||||||
|
>
|
||||||
|
<!-- 이메일 입력 필드 -->
|
||||||
|
<a-input v-model="dummy" style="width: 120px" />
|
||||||
|
<span> @ </span>
|
||||||
|
<!-- 도메인 입력 필드 -->
|
||||||
|
<a-input v-model="dummy" style="width: 150px; margin-right: 18px" />
|
||||||
|
<!-- 직접 입력 드롭다운 -->
|
||||||
|
<a-select
|
||||||
|
v-model="domains"
|
||||||
|
style="width: 150px"
|
||||||
|
@change="handleDomainChange"
|
||||||
|
>
|
||||||
|
<a-select-option value="직접 입력">직접 입력</a-select-option>
|
||||||
|
<a-select-option value="gmail.com">gmail.com</a-select-option>
|
||||||
|
<a-select-option value="naver.com">naver.com</a-select-option>
|
||||||
|
<a-select-option value="daum.net">daum.net</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 암호 찾기 버튼 -->
|
||||||
|
<div style="text-align: center; margin-top: 16px">
|
||||||
|
<a-button
|
||||||
|
v-if="dummy === 'phone'"
|
||||||
|
type="primary"
|
||||||
|
style="background-color: #1e90ff; color: white; width: 100px"
|
||||||
|
>
|
||||||
|
휴대폰 인증
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-else
|
||||||
|
type="primary"
|
||||||
|
style="background-color: #1e90ff; color: white; width: 100px"
|
||||||
|
>
|
||||||
|
이메일 인증
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue