<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>
