This commit is contained in:
2026-04-07 14:50:23 +09:00
commit b4e485502b
4778 changed files with 2017091 additions and 0 deletions

View File

@@ -0,0 +1,451 @@
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<div class="divide-y divide-gray-200">
<form class="lg:col-span-9" @submit.prevent="doUpdateInfo">
<!-- Profile section -->
<div class="py-6 px-4 sm:p-6 lg:pb-8">
<div>
<h2 class="text-lg leading-6 font-medium text-gray-900">
사용자 정보 확인, 변경
</h2>
<p class="mt-1 text-sm text-gray-500">
일부 정보는 다른 사용자들에게 보여질 있으니 신중하게
입력해 주세요.
</p>
</div>
<div class="mt-6 grid grid-cols-12 gap-6">
<div class="col-span-12 sm:col-span-6">
<label
for="email"
class="block text-sm font-medium text-gray-700"
>이메일</label
>
<input
id="email"
v-model="email"
disabled
type="text"
name="email"
autocomplete="email"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
/>
</div>
<div class="col-span-12 sm:col-span-6"></div>
</div>
<div class="mt-6 flex flex-col lg:flex-row">
<div class="flex-grow space-y-6">
<div>
<label
for="username"
class="block text-sm font-medium text-gray-700"
>
사용자 이름
</label>
<div class="mt-1 rounded-md shadow-sm flex">
<input
id="username"
v-model="displayName"
type="text"
name="username"
autocomplete="username"
class="focus:ring-sky-500 focus:border-sky-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
/>
</div>
</div>
<div>
<label
for="phone"
class="block text-sm font-medium text-gray-700"
>
전화번호
</label>
<div class="mt-1 rounded-md shadow-sm flex">
<input
id="phone"
v-model="phone"
type="text"
name="phone"
autocomplete="phone"
class="focus:ring-sky-500 focus:border-sky-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
/>
</div>
</div>
<div>
<label
for="about"
class="block text-sm font-medium text-gray-700"
>
간단한 소개
</label>
<div class="mt-1">
<textarea
id="about"
v-model="memo"
name="about"
rows="3"
class="shadow-sm focus:ring-sky-500 focus:border-sky-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
/>
</div>
<p class="mt-2 text-sm text-gray-500">
관리자나 다른 사용자가 당신을 식별할 있도록
간단한 소개를 입력해 주세요.
</p>
</div>
<div>
<label
class="block text-sm font-medium text-gray-700"
>
프로필 사진
</label>
<div class="mt-2 flex items-center space-x-5">
<span
v-if="photoUrl == ''"
class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"
>
<svg
class="h-full w-full text-gray-300"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
></path>
</svg>
</span>
<img
v-else
class="inline-block h-12 w-12 rounded-full border"
:src="photoUrl"
alt=""
/>
</div>
<div class="col-span-2 sm:col-span-2 pt-3">
<div class="mt-1 flex rounded-md shadow-sm">
<div
class="relative flex items-stretch flex-grow focus-within:z-10"
>
<input
id="photoUrl"
v-model="photoUrl"
type="text"
name="photoUrl"
class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300"
placeholder="http://"
/>
</div>
</div>
<p class="mt-2 text-sm text-gray-500">
프로필로 사용하실 이미지의 주소를
입력하세요.
</p>
</div>
</div>
<div>
<div
class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
@dragover.prevent
@dragenter.prevent
@drop.prevent="
filesChange(
'upload-file',
$event.dataTransfer.files
)
"
>
<div class="space-y-1 text-center">
<svg
class="mx-auto h-12 w-12 text-gray-400"
stroke="currentColor"
fill="none"
viewBox="0 0 48 48"
aria-hidden="true"
>
<path
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
<div class="flex text-sm text-gray-600">
<label
for="file-upload"
class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
>
<span
><a
href="javascript:void(0)"
@click="
$refs.input_file.click()
"
>여기</a
></span
>
<input
ref="input_file"
type="file"
name="upload-file"
accept=".jpg,.jpeg,.png"
hidden
@change="
filesChange(
$event.target.name,
$event.target.files
)
"
/>
</label>
<p class="pl-1">
눌러 업로드 하시거나 마우스로
이곳에 끌어 놓아 주세요.
</p>
</div>
<p class="text-xs text-gray-500">
PNG, JPG 최대 1MB
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Privacy section -->
<div class="pt-0">
<div class="mt-4 py-4 px-4 flex justify-end sm:px-6">
<button
type="button"
class="bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
@click="doCancel"
>
취소
</button>
<button
type="submit"
class="ml-5 bg-sky-700 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
>
저장
</button>
</div>
</div>
</form>
<form class="lg:col-span-9" @submit.prevent="doUpdatePassword">
<div class="py-6 px-4 sm:p-6 lg:pb-8">
<div>
<h2 class="text-lg leading-6 font-medium text-gray-900">
비밀번호 변경
</h2>
<p class="mt-1 text-sm text-gray-500">
이전 비밀번호와 새로운 비밀번호를 두번 정확하게 입력해
주셔야 합니다.
</p>
</div>
<div class="mt-6 grid grid-cols-12 gap-6">
<div class="col-span-12 sm:col-span-6">
<label
for="passwordCurrent"
class="block text-sm font-medium text-gray-700"
>현재 비밀번호</label
>
<input
id="passwordCurrent"
v-model="passwordCurrent"
type="password"
name="passwordCurrent"
autocomplete="passwordCurrent"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
/>
</div>
<div class="col-span-12 sm:col-span-6"></div>
</div>
<div class="mt-6 grid grid-cols-12 gap-6">
<div class="col-span-12 sm:col-span-6">
<label
for="password"
class="block text-sm font-medium text-gray-700"
>새로운 비밀번호</label
>
<input
id="password"
v-model="password"
type="password"
name="password"
autocomplete="password"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
/>
</div>
<div class="col-span-12 sm:col-span-6">
<label
for="password2"
class="block text-sm font-medium text-gray-700"
>비밀번호 확인</label
>
<input
id="password2"
v-model="password2"
type="password"
name="password2"
autocomplete="password2"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
/>
</div>
</div>
</div>
<!-- Privacy section -->
<div class="pt-0">
<div class="mt-4 py-4 px-4 flex justify-end sm:px-6">
<button
type="submit"
class="ml-5 bg-sky-700 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
>
비밀번호 저장
</button>
</div>
</div>
</form>
<form class="lg:col-span-9" @submit.prevent="doWithdrawal">
<div class="py-6 px-4 sm:p-6 lg:pb-8">
<div>
<h2 class="text-lg leading-6 font-medium text-gray-900">
회원 탈퇴
</h2>
<p class="mt-1 text-sm text-gray-500">
탈퇴 신청을 하시면 계정은 탈퇴처리 되며 일정기간 동일한
이메일로 재가입을 하실 없습니다.
</p>
</div>
</div>
<!-- Privacy section -->
<div class="pt-0">
<div class="mt-4 py-4 px-4 flex justify-end sm:px-6">
<button
type="submit"
class="ml-5 bg-sky-700 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
>
회원 탈퇴
</button>
</div>
</div>
</form>
</div>
</template>
<script setup lang="ts">
definePageMeta({
middleware: 'check-auth-user',
});
const router = useRouter();
const email = ref(_crossCtl.userProfile['email']);
const displayName = ref(_crossCtl.userProfile['displayName']);
const photoUrl = ref(_crossCtl.userProfile['photoUrl']);
const phone = ref(_crossCtl.userProfile['phone']);
const memo = ref(_crossCtl.userProfile['memo']);
const passwordCurrent = ref('');
const password = ref('');
const password2 = ref('');
// email: '1@1', displayName: '1@1', phone: '', memo: ''
async function doUpdateInfo() {
const responseJson = await _crossCtl.doComm('update', 'profile', {
displayName: displayName.value,
photoUrl: photoUrl.value,
infos: {
email: email.value,
phone: phone.value,
memo: memo.value,
},
});
console.log('responseJson=', responseJson);
if (responseJson['responseMessage'] == 'ok') {
alert('ok');
} else {
alert(responseJson['responseMessage']);
}
}
async function doUpdatePassword() {
const responseJson = await _crossCtl.doComm('update', 'password', {
password_current: passwordCurrent.value,
password_new: password.value,
password_again: password2.value,
});
console.log('responseJson=', responseJson);
if (responseJson['responseMessage'] == 'ok') {
alert('ok');
} else {
alert(responseJson['responseMessage']);
}
}
async function doCancel() {
router.back();
}
async function doWithdrawal() {
_crossCtl.openModal(
'confirm',
'탈퇴 확인',
'정말로 탈퇴하시겠습니까?',
['탈퇴', '취소'],
(serial, btnIdx) => {
console.log('btnIdx=', btnIdx);
if (btnIdx == 0) {
router.push('/user/withdrawal');
}
}
);
/*
if (window.confirm('탈퇴하시겠습니까?')) {
router.push('/user/withdrawal');
}
*/
}
async function filesChange(fieldName, fileList) {
// handle file changes
const formData = new FormData();
if (!fileList.length) return;
// append the files to FormData
Array.from(Array(fileList.length).keys()).map((x) => {
formData.append(fieldName, fileList[x], fileList[x].name);
});
// save it
console.log('formData=', formData);
formData.append('target', 'just');
const responseJson = await _crossCtl.doUpload('just', formData);
console.log('responseJson=', responseJson);
if (responseJson['responseCode'] == 200) {
photoUrl.value =
_crossCtl.config['API_BASE_URL'].replace('/api/', '') +
responseJson['files'][0]['localUrl'];
} else {
alert(responseJson['responseMessage']);
}
}
</script>

View File

@@ -0,0 +1,149 @@
<!--
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
],
}
```
-->
<template>
<!--
This example requires updating your template:
```
<html class="h-full bg-gray-50">
<body class="h-full">
```
-->
<div
class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
>
<div class="max-w-md w-full space-y-8">
<div>
<h2
class="mt-6 text-center text-3xl font-extrabold text-gray-900"
>
비밀번호 찾기
</h2>
<!--
<p class="mt-2 text-center text-sm text-gray-600">
계정이 없으신 경우
{{ ' ' }}
<a
href="javascript:void()"
class="font-medium text-indigo-600 hover:text-indigo-500"
@click="navigateTo('/user/signup')"
>
이곳에서 회원가입
</a>
</p>
-->
<p class="mt-2 text-center text-sm text-gray-600">
계정이 있는 경우
{{ ' ' }}
<a
href="javascript:void()"
class="font-medium text-indigo-600 hover:text-indigo-500"
@click="navigateTo('/user/signin')"
>
이곳에서 로그인
</a>
</p>
</div>
<form class="mt-8 space-y-6" @submit.prevent="passwordReset">
<input type="hidden" name="remember" value="true" />
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="email-address" class="sr-only"
>이메일 주소</label
>
<input
id="email-address"
v-model="email"
name="email"
type="email"
autocomplete="email"
required=""
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="이메일 주소"
/>
</div>
</div>
<div class="flex items-center justify-center">
<p class="mt-2 text-center text-sm text-gray-600">
입력하신 이메일 주소로 비밀번호 리셋 링크를 보내
드립니다.
</p>
</div>
<div>
<button
type="submit"
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<span
class="absolute left-0 inset-y-0 flex items-center pl-3"
>
<LockClosedIcon
class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
aria-hidden="true"
/>
</span>
링크 요청
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { LockClosedIcon } from '@heroicons/vue/24/solid/index.js';
definePageMeta({
layout: 'center',
});
useHead({
htmlAttrs: {
class: 'h-full bg-white',
},
bodyAttrs: {
class: 'h-full',
},
});
const email = ref('');
async function passwordReset() {
const responseJson = await _crossCtl.doComm('reset', '', {
userName: email.value,
});
_utils.log('debug', 'responseJson=', responseJson);
switch (responseJson['responseMessage']) {
case 'no user found':
alert('no user found');
break;
case 'ok':
alert(
'비밀번호 복구 메일을 발송하였습니다. 잠시 후에 이메일 수신함을 확인해 주세요.'
);
// window.location.replace('/');
break;
default:
alert(responseJson['responseMessage']);
break;
}
}
</script>

View File

@@ -0,0 +1,163 @@
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<section class="bg-white overflow-hidden">
<div
class="relative max-w-7xl mx-auto pt-20 pb-12 px-4 sm:px-6 lg:px-8 lg:py-20"
>
<svg
class="absolute top-full left-0 transform translate-x-80 -translate-y-24 lg:hidden"
width="784"
height="404"
fill="none"
viewBox="0 0 784 404"
aria-hidden="true"
>
<defs>
<pattern
id="e56e3f81-d9c1-4b83-a3ba-0d0ac8c32f32"
x="0"
y="0"
width="20"
height="20"
patternUnits="userSpaceOnUse"
>
<rect
x="0"
y="0"
width="4"
height="4"
class="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width="784"
height="404"
fill="url(#e56e3f81-d9c1-4b83-a3ba-0d0ac8c32f32)"
/>
</svg>
<svg
class="hidden lg:block absolute right-full top-1/2 transform translate-x-1/2 -translate-y-1/2"
width="404"
height="784"
fill="none"
viewBox="0 0 404 784"
aria-hidden="true"
>
<defs>
<pattern
id="56409614-3d62-4985-9a10-7ca758a8f4f0"
x="0"
y="0"
width="20"
height="20"
patternUnits="userSpaceOnUse"
>
<rect
x="0"
y="0"
width="4"
height="4"
class="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width="404"
height="784"
fill="url(#56409614-3d62-4985-9a10-7ca758a8f4f0)"
/>
</svg>
<div class="relative lg:flex lg:items-center">
<div class="w-64 h-64">
<BaseAvater1 :image-size="64" :image-url="photoUrl" />
</div>
<div class="relative lg:ml-10">
<svg
class="absolute top-0 left-0 transform -translate-x-8 -translate-y-24 h-36 w-36 text-indigo-200 opacity-50"
stroke="currentColor"
fill="none"
viewBox="0 0 144 144"
aria-hidden="true"
>
<path
stroke-width="2"
d="M41.485 15C17.753 31.753 1 59.208 1 89.455c0 24.664 14.891 39.09 32.109 39.09 16.287 0 28.386-13.03 28.386-28.387 0-15.356-10.703-26.524-24.663-26.524-2.792 0-6.515.465-7.446.93 2.327-15.821 17.218-34.435 32.11-43.742L41.485 15zm80.04 0c-23.268 16.753-40.02 44.208-40.02 74.455 0 24.664 14.891 39.09 32.109 39.09 15.822 0 28.386-13.03 28.386-28.387 0-15.356-11.168-26.524-25.129-26.524-2.792 0-6.049.465-6.98.93 2.327-15.821 16.753-34.435 31.644-43.742L121.525 15z"
/>
</svg>
<blockquote class="relative">
<div
class="text-2xl leading-9 font-medium text-gray-900"
>
<p>
{{ memo }}
</p>
</div>
<footer class="mt-8">
<div class="flex">
<div class="flex-shrink-0 lg:hidden">
<img
class="h-12 w-12 rounded-full"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div class="ml-4 lg:ml-0">
<div
class="text-base font-medium text-gray-900"
>
{{ displayName }}
</div>
<div
class="text-base font-medium text-indigo-600"
>
{{ email }}
</div>
</div>
</div>
</footer>
</blockquote>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
definePageMeta({
middleware: 'check-auth-user',
});
const route = useRoute();
const displayName = ref(_crossCtl.userProfile['displayName']);
const email = ref('');
const photoUrl = ref(_crossCtl.userProfile['photoUrl']);
const memo = ref(_crossCtl.userProfile['memo']);
let userInfo = {};
const hero = route.params.pid;
console.log('hero=', hero);
const responseJson = await _crossCtl.doComm('select', 'profile', {
hero: hero,
});
console.log('responseJson=', responseJson);
if (responseJson['responseMessage'] == 'ok') {
userInfo = responseJson['data'][0];
const tmpSubInfos = userInfo.infos;
email.value = tmpSubInfos['email'];
displayName.value = userInfo['display_name'];
photoUrl.value = userInfo['photo_url'];
memo.value = tmpSubInfos['memo'];
} else {
alert(responseJson['responseMessage']);
}
</script>

View File

@@ -0,0 +1,153 @@
<!--
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
],
}
```
-->
<template>
<!--
This example requires updating your template:
```
<html class="h-full bg-gray-50">
<body class="h-full">
```
-->
<div
class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
>
<div class="max-w-md w-full space-y-8">
<div>
<h2
class="mt-6 text-center text-3xl font-extrabold text-gray-900"
>
비밀번호 변경
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
계정이 있는 경우
{{ ' ' }}
<a
href="javascript:void()"
class="font-medium text-indigo-600 hover:text-indigo-500"
@click="navigateTo('/user/signin')"
>
이곳에서 로그인
</a>
</p>
</div>
<form class="mt-8 space-y-6" @submit.prevent="doReset">
<input type="hidden" name="remember" value="true" />
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="password" class="sr-only"
> 로그인 비밀번호</label
>
<input
id="password"
v-model="password"
name="password"
type="password"
autocomplete="current-password"
required=""
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="비밀번호"
/>
</div>
<div>
<label for="password2" class="sr-only"
>비밀번호 확인</label
>
<input
id="password2"
v-model="password2"
name="password2"
type="password"
autocomplete="current-password2"
required=""
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="비밀번호 확인"
/>
</div>
</div>
<div>
<button
type="submit"
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<span
class="absolute left-0 inset-y-0 flex items-center pl-3"
>
<LockClosedIcon
class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
aria-hidden="true"
/>
</span>
변경 신청
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { LockClosedIcon } from '@heroicons/vue/24/solid/index.js';
definePageMeta({
layout: 'center',
});
useHead({
htmlAttrs: {
class: 'h-full bg-white',
},
bodyAttrs: {
class: 'h-full',
},
});
const route = useRoute();
console.log('huk query = ', route.query);
const hero = ref(route.query.key);
const password = ref('');
const password2 = ref('');
async function doReset() {
if (password.value != password2.value) {
alert('비밀번호가 일치하지 않습니다.');
return;
}
const responseJson = await _crossCtl.doComm('update', 'password:reset', {
hero: hero.value,
passwordNew: password.value,
passwordAgain: password.value,
});
_utils.log('debug', 'responseJson=', responseJson);
switch (responseJson['responseMessage']) {
case 'Expired reset request':
alert('이미 사용된 비밀번호 리셋 링크입니다.');
break;
case 'ok':
alert('새로운 비밀번호가 설정되었습니다.');
break;
default:
alert(responseJson['responseMessage']);
break;
}
}
</script>

View File

@@ -0,0 +1,219 @@
<template>
<div
class="bg-white min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
>
<div class="max-w-md w-full space-y-8">
<div>
<img
src="/kiso_ci_1.png"
alt="KISO CI"
width="500"
height="600"
/>
<!--
<h2
class="mt-6 text-center text-3xl font-extrabold text-gray-900"
>
로그인
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
계정이 없으신 경우
{{ ' ' }}
<a
href="/user/signup"
class="font-medium text-indigo-600 hover:text-indigo-500"
>
이곳에서 회원가입
</a>
</p>
-->
</div>
<form class="mt-8 space-y-6" @submit.prevent="signin">
<input type="hidden" name="remember" value="true" />
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="email-address" class="sr-only"
>이메일 주소</label
>
<input
id="email-address"
v-model="email"
name="email"
type="email"
autocomplete="email"
required="true"
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="이메일 주소"
/>
</div>
<div>
<label for="password" class="sr-only"
>로그인 비밀번호</label
>
<input
id="password"
v-model="password"
name="password"
type="password"
autocomplete="current-password"
required="true"
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="비밀번호"
/>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
id="remember-me"
v-model="rememberMeFlag"
name="remember-me"
type="checkbox"
class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
/>
<label
for="remember-me"
class="ml-2 block text-sm text-gray-900"
>
아이디 저장
</label>
</div>
<div class="text-sm">
<a
href="javascript:void()"
class="font-medium text-indigo-600 hover:text-indigo-500"
@click="navigateTo('/user/password-reset')"
>
비밀번호 찾기
</a>
</div>
</div>
<div>
<button
type="submit"
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<span
class="absolute left-0 inset-y-0 flex items-center pl-3"
>
<LockClosedIcon
class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
aria-hidden="true"
/>
</span>
로그인
</button>
<!--
<button
type="button"
class="mt-3 group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@click="navigateTo('/user/signup')"
>
<span
class="absolute left-0 inset-y-0 flex items-center pl-3"
>
</span>
신규 가입
</button>
-->
</div>
</form>
</div>
</div>
</template>
<!--
This example requires updating your template:
```
<html class="h-full bg-gray-50">
<body class="h-full">
```
-->
<script setup lang="ts">
import { LockClosedIcon } from '@heroicons/vue/24/solid/index.js';
definePageMeta({
layout: 'center',
});
useHead({
htmlAttrs: {
class: 'h-full bg-white',
},
bodyAttrs: {
class: 'h-full',
},
});
const email = ref('');
const password = ref('');
const rememberMeFlag = ref(false);
const cookieNameEmail = '/user/signin:email';
const cachedEmail = _utils.getCookie(cookieNameEmail);
console.log('cachedEmail=', cachedEmail);
if (cachedEmail != null) {
email.value = cachedEmail;
rememberMeFlag.value = true;
}
async function signin() {
// alert(email.value);
const normalizedInfo = {
provider: 'id/password',
id: email.value,
name: email.value,
email: email.value,
photo: '',
roleTag: '',
};
const infoString = JSON.stringify(normalizedInfo);
const responseJson = await _crossCtl.doComm('signin', '', {
type: 0,
id: email.value,
token: password.value,
info: infoString,
});
_utils.log('debug', 'responseJson=', responseJson);
switch (responseJson['responseMessage']) {
case 'wrong password count limit exceeded : 5':
alert(
'비밀번호가 다섯번 틀려 로그인 할 수 없습니다. 비밀번호 찾기를 시도해 보세요.'
);
break;
case 'no user found':
alert('아이디를 확인해 주세요.');
break;
case 'bad password':
alert('비밀번호가 일치하지 않습니다.');
break;
case 'ok':
// alert('login ok');
if (rememberMeFlag.value == true) {
_utils.setCookie('/user/signin:email', email.value, 10000);
} else {
_utils.rmvCookie('/user/signin:email');
}
window.location.replace('/');
break;
default:
alert(responseJson['responseMessage']);
break;
}
}
</script>

View File

@@ -0,0 +1,192 @@
<!--
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
],
}
```
-->
<template>
<!--
This example requires updating your template:
```
<html class="h-full bg-gray-50">
<body class="h-full">
```
-->
<div
class="bg-white min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
>
<div class="max-w-md w-full space-y-8">
<div>
<h2
class="mt-6 text-center text-3xl font-extrabold text-gray-900"
>
계정등록
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
계정이 있는 경우
{{ ' ' }}
<a
href="javascript:void()"
class="font-medium text-indigo-600 hover:text-indigo-500"
@click="navigateTo('/user/signin')"
>
이곳에서 로그인
</a>
</p>
</div>
<form class="mt-8 space-y-6" @submit.prevent="signup">
<input type="hidden" name="remember" value="true" />
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="email-address" class="sr-only"
>이메일 주소</label
>
<input
id="email-address"
v-model="email"
name="email"
type="email"
autocomplete="email"
required=""
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="이메일 주소"
/>
</div>
<div>
<label for="password" class="sr-only"
>로그인 비밀번호</label
>
<input
id="password"
v-model="password"
name="password"
type="password"
autocomplete="current-password"
required=""
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="비밀번호"
/>
</div>
<div>
<label for="password2" class="sr-only"
>비밀번호 확인</label
>
<input
id="password2"
v-model="password2"
name="password2"
type="password"
autocomplete="current-password2"
required=""
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="비밀번호 확인"
/>
</div>
</div>
<div>
<button
type="submit"
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<span
class="absolute left-0 inset-y-0 flex items-center pl-3"
>
<LockClosedIcon
class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
aria-hidden="true"
/>
</span>
계정등록
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { LockClosedIcon } from '@heroicons/vue/24/solid/index.js';
definePageMeta({
layout: 'center',
});
useHead({
htmlAttrs: {
class: 'h-full bg-white',
},
bodyAttrs: {
class: 'h-full',
},
});
const email = ref('');
const password = ref('');
const password2 = ref('');
async function signup() {
if (password.value != password2.value) {
alert('비밀번호가 일치하지 않습니다.');
return;
}
const responseJson = await _crossCtl.doComm('signup', '', {
userName: email.value,
password: password.value,
});
_utils.log('debug', 'responseJson=', responseJson);
switch (responseJson['responseMessage']) {
case 'not in a white list':
alert(
'사전 승인이 필요합니다. 확인을 누르시면 안내 페이지로 이동합니다.'
);
navigateTo('/doc/contract');
break;
case 'ok':
alert('가입 완료. 확인을 누르시면 로그인 화면으로 이동합니다.');
navigateTo('/user/signin');
break;
default:
alert(responseJson['responseMessage']);
break;
}
}
console.log(
'huk _crossCtl.isSignUpInfoNoticed = ',
_crossCtl.isSignUpInfoNoticed
);
if (_crossCtl.isSignUpInfoNoticed == false) {
_crossCtl.isSignUpInfoNoticed = true;
console.log('open modal');
_crossCtl.openModal(
'info',
'계정등록 안내',
'본 서비스의 회원 가입은 정식 계약 신청 후 서버에 등록된 이메일에 대해서만 가능합니다.' +
"만약 정식 서비스 계약을 체결하지 않으셨다면 먼저 '서비스 이용 절차' 부분의 내용을 참고해 주시기 바랍니다.",
['확인', '서비스 이용 절차 확인'],
(serial, btnIdx) => {
console.log('btnIdx=', btnIdx);
if (btnIdx == 1) {
// navigateTo('/#service_use_agreement');
window.location.href = '/#service-use-agreement';
}
}
);
}
</script>

View File

@@ -0,0 +1,64 @@
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<div class="bg-white">
<div
class="max-w-7xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8"
>
<h2
class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
>
<span class="block">회원 탈퇴</span>
<span class="block">탈퇴하시겠습니까?</span>
</h2>
<p class="mt-4 text-lg leading-6 text-indigo-200">
탈퇴 후에는 일정 기간 동일 이메일로 가입이 불가합니다.
</p>
<div class="mt-8 flex justify-center">
<div class="inline-flex rounded-md shadow">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
@click="doWithdrawal"
>
탈퇴
</a>
</div>
<div class="ml-3 inline-flex">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
@click="$router.push('/')"
>
취소
</a>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({
middleware: 'check-auth-user',
layout: 'center',
});
useHead({
htmlAttrs: {
class: 'h-full bg-white',
},
bodyAttrs: {
class: 'h-full',
},
});
async function doWithdrawal() {
const responseJson = await _crossCtl.doComm('withdrawal', '', {});
console.log('responseJson=', responseJson);
if (responseJson['responseMessage'] == 'ok') {
window.location.replace('/');
} else {
alert(responseJson['responseMessage']);
}
}
</script>