470 lines
24 KiB
Vue
470 lines
24 KiB
Vue
<template>
|
|
<div v-if="isCheckin">
|
|
<div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
|
|
<div class="dot1" />
|
|
<div class="dot2" />
|
|
</div>
|
|
<div class="flex justify-center text-2xl">
|
|
{{ t('message.loadding') }} ...
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<section class="page-w bg-gray-200 h-full flex content-center flex-wrap ">
|
|
<figure class="login w-[calc(100%+1rem)] ">
|
|
<div class="card ~neutral !low p-0 max-w-sm dark:bg-gray-900 ">
|
|
<div class="flex flex-row justify-center flex-none">
|
|
<div class="order-last flex-shrink-0">
|
|
<MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" />
|
|
</div>
|
|
<div class="p-1 ml-8 flex flex-shrink-0 justify-center flex-grow bg-transparent">
|
|
<router-link class="text-white no-underline" to="/" >
|
|
<span v-if="use_logo" class="text-lg rounded-full">
|
|
<app-logo-img class="w-35 h-35 " />
|
|
</span>
|
|
<h2 v-else class="text-center mb-1 text-lg heading ~info">
|
|
{{ t('login.wellcome') }}
|
|
</h2>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<div v-if="use_logo" class="-mt-2 flex flex-row justify-center flex-none">
|
|
<span class="mb-1 text-lg ">
|
|
<app-logo-text class="h-12" />
|
|
</span>
|
|
</div>
|
|
<div class="p-2">
|
|
<p class="text-center mb-3 text-base support ~info">
|
|
<span class="text-gray-400">{{ t('login.subtitle') }}</span>
|
|
</p>
|
|
<div class="container">
|
|
<h5 class="hidden text-center subheading">
|
|
<span class="text-gray-500">{{ t('login.subHeading') }}</span>
|
|
</h5>
|
|
<div class="messages global">
|
|
<span class="text-gray-500">{{ t('login.form','') }}</span>
|
|
</div>
|
|
<div id="login-password">
|
|
<form>
|
|
<div class="messages " />
|
|
<fieldset>
|
|
<label>
|
|
<input
|
|
v-model="user"
|
|
name="identifier"
|
|
type="text"
|
|
:placeholder="t('login.user_email')"
|
|
autocomplete="username"
|
|
@focus="errorMessage = ''"
|
|
>
|
|
<span>{{ t('login.user_email') }}</span>
|
|
</label>
|
|
<div class="messages " />
|
|
</fieldset> <fieldset>
|
|
<label>
|
|
<input
|
|
v-model="password"
|
|
name="password"
|
|
:type="passwordVisible ? 'text' : 'password'"
|
|
:placeholder="t('login.password')"
|
|
autocomplete="current-password"
|
|
@focus="errorMessage = ''"
|
|
>
|
|
<span>{{ t('login.password') }}</span>
|
|
<svg class="password-visibility-toggle" @click="togglePasswordVisible">
|
|
<path v-if="!passwordVisible" class="eye-open" d="M8 2.36365C4.36364 2.36365 1.25818 4.62547 0 7.81819C1.25818 11.0109 4.36364 13.2727 8 13.2727C11.6364 13.2727 14.7418 11.0109 16 7.81819C14.7418 4.62547 11.6364 2.36365 8 2.36365ZM8 11.4546C5.99273 11.4546 4.36364 9.82547 4.36364 7.81819C4.36364 5.81092 5.99273 4.18183 8 4.18183C10.0073 4.18183 11.6364 5.81092 11.6364 7.81819C11.6364 9.82547 10.0073 11.4546 8 11.4546ZM8 5.63637C6.79273 5.63637 5.81818 6.61092 5.81818 7.81819C5.81818 9.02547 6.79273 10 8 10C9.20727 10 10.1818 9.02547 10.1818 7.81819C10.1818 6.61092 9.20727 5.63637 8 5.63637Z" />
|
|
<path v-else class="eye-closed" fill-rule="evenodd" clip-rule="evenodd" d="M14.8222 1.85355C15.0175 1.65829 15.0175 1.34171 14.8222 1.14645C14.627 0.951184 14.3104 0.951184 14.1151 1.14645L12.005 3.25653C10.8901 2.482 9.56509 1.92505 8.06 1.92505C3 1.92505 0 7.92505 0 7.92505C0 7.92505 1.16157 10.2482 3.25823 12.0033L1.19366 14.0679C0.998396 14.2632 0.998396 14.5798 1.19366 14.775C1.38892 14.9703 1.7055 14.9703 1.90076 14.775L14.8222 1.85355ZM4.85879 10.4028L6.29159 8.96998C6.10643 8.66645 6 8.3089 6 7.92505C6 6.81505 6.89 5.92505 8 5.92505C8.38385 5.92505 8.7414 6.03148 9.04493 6.21664L10.4777 4.78384C9.79783 4.24654 8.93821 3.92505 8 3.92505C5.8 3.92505 4 5.72505 4 7.92505C4 8.86326 4.32149 9.72288 4.85879 10.4028ZM11.8644 6.88906L13.8567 4.8968C15.2406 6.40616 16 7.92505 16 7.92505C16 7.92505 13 13.925 8.06 13.925C7.09599 13.925 6.20675 13.7073 5.39878 13.3547L6.96401 11.7895C7.29473 11.8779 7.64207 11.925 8 11.925C10.22 11.925 12 10.145 12 7.92505C12 7.56712 11.9529 7.21978 11.8644 6.88906ZM9.33847 9.41501L9.48996 9.26352C9.44222 9.31669 9.39164 9.36726 9.33847 9.41501Z" />
|
|
</svg>
|
|
</label>
|
|
<div v-if="connection.state !== ''" class="messages text-red-400 ">
|
|
{{ t(connection.state) }}
|
|
</div>
|
|
<div v-if="errorMessage !== ''" class="messages text-red-400 ">
|
|
{{ t(errorMessage) }}
|
|
</div>
|
|
</fieldset>
|
|
<input name="csrf_token" type="hidden" value="">
|
|
<div class="flex justify-center">
|
|
<button class="text-lg button ~info !high " type="submit" @click.prevent="signIn">
|
|
{{ t('login.signin') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div v-if="allow_register || allow_reset" class="alternative-actions border-t border-b flex gap-4 py-2 section ~info justify-center ">
|
|
<!-- <a href="auth/registration">Recover password</a> -->
|
|
<a v-if="allow_register" class="border-r-2 border-blue-500 pr-5 pl-2 " href="#" @click.prevent="register">
|
|
{{ t('login.register') }} <br><small>{{ t('login.newuser') }}</small></a>
|
|
<a v-if="allow_reset" class="pl-3 pr-2" href="#" @click.prevent="recovery">
|
|
{{ t('login.reset') }} <br><small> {{ t('login.password') }}</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section style="display: none" class="section ~critical p-4">
|
|
<button class="button">
|
|
Let's go!
|
|
</button>
|
|
<span class="button ~critical !high">Delete</span>
|
|
<span class="button ~neutral bg-transparent">Go Back</span>
|
|
</section>
|
|
</figure>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {
|
|
ref,
|
|
} from 'vue'
|
|
import 'a17t'
|
|
import { useRouter } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useStore } from 'vuex'
|
|
import MenuLocales from '@/menus/MenuLocales.vue'
|
|
import AppLogoImg from '@/icons/AppImg.vue'
|
|
import AppLogoText from '@/icons/AppLogoText.vue'
|
|
import { AppDefsAction } from '~/store/types'
|
|
import useState from '~/hooks/useState'
|
|
import { post_data } from '~/hooks/utils'
|
|
|
|
enum LocalesLabelModes {
|
|
value = 'val',
|
|
translation = 'trans',
|
|
}
|
|
|
|
/*
|
|
<svg
|
|
class="logo"
|
|
width="218"
|
|
height="48"
|
|
viewBox="0 0 218 48"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M28 14V28C28 29.1 27.1 30 26 30H6C4.9 30 4 29.1 4 28V14C4 12.9 4.9 12 6 12H8V8C8 3.6 11.6 0 16 0C20.4 0 24 3.6 24 8V12H26C27.1 12 28 12.9 28 14ZM11.6 12H20.42V8C20.42 5.56 18.46 3.6 16.02 3.6C13.58 3.6 11.62 5.56 11.62 8V12H11.6ZM26 14H8V28H26V14ZM12 26H10V24H12V26ZM12 16H10V18H12V16ZM12 20H10V22H12V20Z" fill="#3DACFC" />
|
|
<path d="M53.224 39.432C51.16 39.432 49.432 39.048 48.04 38.28C46.672 37.488 45.496 36.444 44.512 35.148L46.132 33.816C47.02 34.992 48.016 35.904 49.12 36.552C50.248 37.2 51.64 37.524 53.296 37.524C55.24 37.524 56.728 37.068 57.76 36.156C58.816 35.22 59.344 33.924 59.344 32.268C59.344 30.732 58.9 29.604 58.012 28.884C57.124 28.164 55.876 27.636 54.268 27.3L52.036 26.832C49.636 26.352 47.896 25.548 46.816 24.42C45.736 23.292 45.196 21.852 45.196 20.1C45.196 18.996 45.388 18.036 45.772 17.22C46.156 16.38 46.696 15.684 47.392 15.132C48.112 14.58 48.964 14.16 49.948 13.872C50.956 13.584 52.06 13.44 53.26 13.44C55.132 13.44 56.716 13.776 58.012 14.448C59.308 15.12 60.376 16.068 61.216 17.292L59.596 18.48C58.9 17.472 58.024 16.704 56.968 16.176C55.936 15.624 54.664 15.348 53.152 15.348C51.352 15.348 49.924 15.744 48.868 16.536C47.836 17.304 47.32 18.468 47.32 20.028C47.32 21.516 47.788 22.608 48.724 23.304C49.66 24 50.908 24.504 52.468 24.816L54.7 25.284C57.196 25.836 58.948 26.688 59.956 27.84C60.964 28.992 61.468 30.432 61.468 32.16C61.468 34.464 60.736 36.252 59.272 37.524C57.808 38.796 55.792 39.432 53.224 39.432ZM73.3969 39.432C72.1729 39.432 71.0569 39.216 70.0489 38.784C69.0649 38.352 68.2129 37.728 67.4929 36.912C66.7969 36.072 66.2569 35.052 65.8729 33.852C65.5129 32.652 65.3329 31.296 65.3329 29.784C65.3329 28.272 65.5129 26.928 65.8729 25.752C66.2569 24.552 66.7969 23.544 67.4929 22.728C68.2129 21.888 69.0649 21.252 70.0489 20.82C71.0329 20.364 72.1369 20.136 73.3609 20.136C74.5369 20.136 75.6049 20.364 76.5649 20.82C77.5249 21.252 78.3409 21.864 79.0129 22.656C79.6849 23.448 80.2009 24.408 80.5609 25.536C80.9449 26.64 81.1369 27.864 81.1369 29.208V30.18H67.4929V31.08C67.4929 32.04 67.6249 32.928 67.8889 33.744C68.1769 34.536 68.5729 35.22 69.0769 35.796C69.6049 36.372 70.2409 36.828 70.9849 37.164C71.7289 37.476 72.5689 37.632 73.5049 37.632C76.1929 37.632 78.0529 36.396 79.0849 33.924L80.5969 34.932C80.0209 36.3 79.1089 37.392 77.8609 38.208C76.6369 39.024 75.1489 39.432 73.3969 39.432ZM73.3609 21.864C72.4729 21.864 71.6689 22.032 70.9489 22.368C70.2289 22.68 69.6049 23.124 69.0769 23.7C68.5729 24.276 68.1769 24.972 67.8889 25.788C67.6249 26.58 67.4929 27.456 67.4929 28.416V28.596H78.9049V28.308C78.9049 27.348 78.7729 26.472 78.5089 25.68C78.2449 24.864 77.8609 24.18 77.3569 23.628C76.8769 23.076 76.2889 22.644 75.5929 22.332C74.9209 22.02 74.1769 21.864 73.3609 21.864ZM92.8358 39.432C90.2918 39.432 88.3238 38.592 86.9318 36.912C85.5638 35.232 84.8798 32.856 84.8798 29.784C84.8798 26.712 85.5638 24.336 86.9318 22.656C88.3238 20.976 90.2918 20.136 92.8358 20.136C94.5398 20.136 95.9198 20.508 96.9758 21.252C98.0318 21.996 98.8358 22.98 99.3878 24.204L97.6598 25.068C97.2278 24.06 96.6158 23.292 95.8238 22.764C95.0558 22.236 94.0598 21.972 92.8358 21.972C90.9638 21.972 89.5358 22.572 88.5518 23.772C87.5678 24.972 87.0758 26.544 87.0758 28.488V31.08C87.0758 33.024 87.5678 34.596 88.5518 35.796C89.5358 36.996 90.9638 37.596 92.8358 37.596C94.1078 37.596 95.1758 37.32 96.0398 36.768C96.9038 36.216 97.5998 35.424 98.1278 34.392L99.6398 35.4C99.0398 36.624 98.1758 37.608 97.0478 38.352C95.9438 39.072 94.5398 39.432 92.8358 39.432ZM115.735 36.084H115.591C115.423 36.516 115.195 36.936 114.907 37.344C114.619 37.752 114.259 38.112 113.827 38.424C113.395 38.712 112.879 38.952 112.279 39.144C111.703 39.336 111.019 39.432 110.227 39.432C108.259 39.432 106.723 38.832 105.619 37.632C104.515 36.408 103.963 34.668 103.963 32.412V20.568H106.015V32.016C106.015 33.912 106.423 35.316 107.239 36.228C108.055 37.14 109.231 37.596 110.767 37.596C111.415 37.596 112.027 37.512 112.603 37.344C113.203 37.176 113.731 36.924 114.187 36.588C114.667 36.252 115.039 35.832 115.303 35.328C115.591 34.8 115.735 34.188 115.735 33.492V20.568H117.787V39H115.735V36.084ZM124.5 39V20.568H126.552V23.88H126.696C127.056 23.016 127.668 22.248 128.532 21.576C129.396 20.904 130.62 20.568 132.204 20.568H133.428V22.584H131.808C130.272 22.584 129.012 22.92 128.028 23.592C127.044 24.264 126.552 25.2 126.552 26.4V39H124.5ZM143.85 39.432C142.626 39.432 141.51 39.216 140.502 38.784C139.518 38.352 138.666 37.728 137.946 36.912C137.25 36.072 136.71 35.052 136.326 33.852C135.966 32.652 135.786 31.296 135.786 29.784C135.786 28.272 135.966 26.928 136.326 25.752C136.71 24.552 137.25 23.544 137.946 22.728C138.666 21.888 139.518 21.252 140.502 20.82C141.486 20.364 142.59 20.136 143.814 20.136C144.99 20.136 146.058 20.364 147.018 20.82C147.978 21.252 148.794 21.864 149.466 22.656C150.138 23.448 150.654 24.408 151.014 25.536C151.398 26.64 151.59 27.864 151.59 29.208V30.18H137.946V31.08C137.946 32.04 138.078 32.928 138.342 33.744C138.63 34.536 139.026 35.22 139.53 35.796C140.058 36.372 140.694 36.828 141.438 37.164C142.182 37.476 143.022 37.632 143.958 37.632C146.646 37.632 148.506 36.396 149.538 33.924L151.05 34.932C150.474 36.3 149.562 37.392 148.314 38.208C147.09 39.024 145.602 39.432 143.85 39.432ZM143.814 21.864C142.926 21.864 142.122 22.032 141.402 22.368C140.682 22.68 140.058 23.124 139.53 23.7C139.026 24.276 138.63 24.972 138.342 25.788C138.078 26.58 137.946 27.456 137.946 28.416V28.596H149.358V28.308C149.358 27.348 149.226 26.472 148.962 25.68C148.698 24.864 148.314 24.18 147.81 23.628C147.33 23.076 146.742 22.644 146.046 22.332C145.374 22.02 144.63 21.864 143.814 21.864ZM172.757 39L170.021 31.188H159.329L156.593 39H154.433L163.325 13.872H166.097L175.025 39H172.757ZM164.729 15.924H164.585L159.869 29.316H169.445L164.729 15.924ZM179.309 20.568H181.361V23.52H181.469C181.925 22.488 182.621 21.672 183.557 21.072C184.493 20.448 185.669 20.136 187.085 20.136C189.461 20.136 191.321 20.976 192.665 22.656C194.009 24.336 194.681 26.712 194.681 29.784C194.681 32.856 194.009 35.232 192.665 36.912C191.321 38.592 189.461 39.432 187.085 39.432C185.669 39.432 184.505 39.132 183.593 38.532C182.681 37.908 181.973 37.08 181.469 36.048H181.361V46.2H179.309V20.568ZM186.617 37.596C188.465 37.596 189.905 37.008 190.937 35.832C191.969 34.656 192.485 33.072 192.485 31.08V28.488C192.485 26.496 191.969 24.912 190.937 23.736C189.905 22.56 188.465 21.972 186.617 21.972C185.897 21.972 185.213 22.08 184.565 22.296C183.941 22.488 183.389 22.764 182.909 23.124C182.429 23.484 182.045 23.916 181.757 24.42C181.493 24.924 181.361 25.476 181.361 26.076V33.384C181.361 34.032 181.493 34.62 181.757 35.148C182.045 35.652 182.429 36.096 182.909 36.48C183.389 36.84 183.941 37.116 184.565 37.308C185.213 37.5 185.897 37.596 186.617 37.596ZM199.981 20.568H202.033V23.52H202.141C202.597 22.488 203.293 21.672 204.229 21.072C205.165 20.448 206.341 20.136 207.757 20.136C210.133 20.136 211.993 20.976 213.337 22.656C214.681 24.336 215.353 26.712 215.353 29.784C215.353 32.856 214.681 35.232 213.337 36.912C211.993 38.592 210.133 39.432 207.757 39.432C206.341 39.432 205.177 39.132 204.265 38.532C203.353 37.908 202.645 37.08 202.141 36.048H202.033V46.2H199.981V20.568ZM207.289 37.596C209.137 37.596 210.577 37.008 211.609 35.832C212.641 34.656 213.157 33.072 213.157 31.08V28.488C213.157 26.496 212.641 24.912 211.609 23.736C210.577 22.56 209.137 21.972 207.289 21.972C206.569 21.972 205.885 22.08 205.237 22.296C204.613 22.488 204.061 22.764 203.581 23.124C203.101 23.484 202.717 23.916 202.429 24.42C202.165 24.924 202.033 25.476 202.033 26.076V33.384C202.033 34.032 202.165 34.62 202.429 35.148C202.717 35.652 203.101 36.096 203.581 36.48C204.061 36.84 204.613 37.116 205.237 37.308C205.885 37.5 206.569 37.596 207.289 37.596Z" fill="#ECFDFE" />
|
|
</svg>
|
|
components: { MenuLocales },
|
|
*/
|
|
const router = useRouter()
|
|
const root_url = router.currentRoute.value.meta.rooturl || ''
|
|
const map_key = router.currentRoute.value.meta.uiMapkey || 'ui'
|
|
const use_logo = router.currentRoute.value.meta.use_logo
|
|
const allow_register = router.currentRoute.value.meta.allow_register
|
|
const allow_reset = router.currentRoute.value.meta.allow_reset
|
|
const { t } = useI18n()
|
|
const store = useStore()
|
|
const includeCurrLocale = true // computed(() => appDefs.value.includeCurrLocale || false)
|
|
|
|
const { connection } = useState()
|
|
connection.value.state = ''
|
|
const localesLabelMode = ref(LocalesLabelModes.translation)
|
|
const errorMessage = ref('')
|
|
const isCheckin = ref(false)
|
|
const user = ref('')
|
|
const password = ref('')
|
|
const passwordVisible = ref(false)
|
|
const togglePasswordVisible = () => passwordVisible.value = !passwordVisible.value
|
|
const signIn = async() => {
|
|
// event.preventDefault()
|
|
if (user.value === '' && password.value === '') {
|
|
errorMessage.value = 'login.nodata'
|
|
return
|
|
}
|
|
console.log('signIn')
|
|
let success = false
|
|
const url = `${root_url}/loginin`
|
|
errorMessage.value = ''
|
|
connection.value.state = ''
|
|
// const url = `http://localhost:3030/${root_url}/loginin`
|
|
const formData = { name: user.value, passwd: password.value, mapkey: map_key }
|
|
const responseData = await post_data(url, formData, false)
|
|
if (responseData && responseData.token && responseData.token.length > 0) {
|
|
localStorage.setItem('auth', responseData.token)
|
|
if (responseData.defs)
|
|
store.dispatch(AppDefsAction.addDefs, { key: map_key, defs: responseData.defs })
|
|
success = true
|
|
useState().checkin.value = false
|
|
}
|
|
// isCheckin.value = true
|
|
// TODO login ...
|
|
if (success)
|
|
router.push('/')
|
|
else
|
|
errorMessage.value = 'login.invalidcredentials'
|
|
}
|
|
const register = () => {
|
|
// TODO register
|
|
console.log('register')
|
|
}
|
|
const recovery = () => {
|
|
// TODO recovery
|
|
console.log('recovery')
|
|
}
|
|
|
|
// // { onMount } from 'svelte';
|
|
// {
|
|
// utils, loadLang,
|
|
// appDefs,
|
|
// appLayout,
|
|
// currentLang,
|
|
// dataLang,
|
|
// routesParams,
|
|
// menuOptions,
|
|
// validator,
|
|
// dataSchema,
|
|
// data,
|
|
// } from '../Stores'
|
|
|
|
// export let route
|
|
|
|
/*
|
|
const asideLeftWidth = 'w-64'
|
|
// let asideLeftWidth="w-full";
|
|
const asideRightWidth = 'w-64'
|
|
const currAppTab = ''
|
|
|
|
const chooseAppTab = (event) => {
|
|
console.log(`chooseAppTab: ${event.detail}`)
|
|
}
|
|
// <p>Route params are: {currentRoute.namedParams} and {currentRoute.queryParams}</p>
|
|
|
|
const tkn = 'y/bWsTm4QY2Hp7SVjUnK8mvlMWMh/FDRISn4x/ramdeqHP+4dGyK9Ko+WJ70Pm1o12Pd2y/i8i4Y+7fO+oQOPg=='
|
|
const rqid = '14e77f79-2300-4cec-8b87-1d0a0a484d19'
|
|
// const url=`http://127.0.0.1:4455/auth/login/?request=${rqid}`;
|
|
const url = `http://127.0.0.1:4455/.ory/kratos/public/self-service/browser/flows/login/strategies/password?request=${rqid}`
|
|
|
|
// Setting profile
|
|
const setDefsFromProfile = (profile) => {
|
|
const _data = $data
|
|
if (profile) {
|
|
_data.profile = profile
|
|
}
|
|
else {
|
|
_data.profile.dataEntry = _data.profile.dataEntry ? _data.profile.dataEntry : {}
|
|
_data.profile.dataEntry.doc = [
|
|
{ id: 'document', name: 'Document', prio: 'normal', tone: 'urge', active: false, icon: 'fas fa-list-alt', mode: 'action', target: 'choose' },
|
|
{ id: 'template', name: 'Template', prio: 'normal', tone: 'info', active: false, icon: 'fas fa-database', mode: 'link', target: 'choose' },
|
|
]
|
|
}
|
|
data.set(_data)
|
|
const _appDefs = $appDefs
|
|
Object.keys($data.profile).forEach((ky) => {
|
|
if (typeof $data.profile[ky] === 'object' && _appDefs[ky]) {
|
|
Object.keys($data.profile[ky]).forEach((key) => {
|
|
_appDefs[ky][key] = $data.profile[ky][key]
|
|
})
|
|
}
|
|
else {
|
|
_appDefs[ky] = $data.profile[ky]
|
|
}
|
|
})
|
|
// _appDefs.dataEntry.doc = profile.dataEntry.doc;
|
|
appDefs.set(_appDefs)
|
|
}
|
|
|
|
const postForm = async(url = '', data = {}) => {
|
|
const response = await fetch(url, {
|
|
method: 'POST', // *GET, POST, PUT, DELETE, etc.
|
|
mode: '*cors', // no-cors, *cors, same-origin
|
|
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
|
|
credentials: 'same-origin', // include, *same-origin, omit
|
|
headers: {
|
|
// 'Content-Type': 'application/json'
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
redirect: 'manual', // 'follow', // manual, *follow, error
|
|
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
|
|
body: data, // body data type must match "Content-Type" header
|
|
})
|
|
return response // parses JSON response into native JavaScript objects
|
|
}
|
|
const signIn = (event) => {
|
|
event.preventDefault()
|
|
|
|
setDefsFromProfile()
|
|
$router.push('/home')
|
|
return
|
|
|
|
// http://127.0.0.1:4455/.ory/kratos/public/self-service/browser/flows/login/strategies/password?request=cb3489d1-f74c-4d0e-9a1c-bb40a7a95ebe
|
|
// const url=`http://127.0.0.1:4455/.ory/kratos/public/self-service/browser/flows/login/strategies/password`; //?request=${rqid}`;
|
|
const formElement = document.querySelector('#login-password form')
|
|
const data = new URLSearchParams()
|
|
for (const pair of new FormData(formElement))
|
|
data.append(pair[0], pair[1])
|
|
|
|
data.append('csrf_token', tkn)
|
|
|
|
postForm(url, data).then((response) => {
|
|
debugger
|
|
return response.json()
|
|
}).then((data) => {
|
|
debugger
|
|
console.log('signIn:', data)
|
|
}).catch((e) => {
|
|
debugger
|
|
console.log(e)
|
|
})
|
|
}
|
|
|
|
const togglePasswordVisible = () => {
|
|
const input = document.querySelector('input[name="password"]')
|
|
const newType = input.getAttribute('type') === 'password' ? 'text' : 'password'
|
|
input.setAttribute('type', newType)
|
|
}
|
|
*/
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-w {
|
|
--base-white: #FFFFFF;
|
|
--base-light: #F0F0F1;
|
|
--base-text: #99999E;
|
|
--base-main: #5A5B6A;
|
|
--base-dark: #19191D;
|
|
--base-black: #000000;
|
|
--primary-light: #ECFDFE;
|
|
--primary-half: #95E1F9;
|
|
--primary-main: #3DACFC;
|
|
--primary-dark: #2E0473;
|
|
--red-strong: #F44336;
|
|
--green-strong: #43A047;
|
|
}
|
|
form {
|
|
line-height: 1.15;
|
|
font-weight: normal;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
form input, form button {
|
|
outline: none;
|
|
}
|
|
|
|
form fieldset {
|
|
border: 0;
|
|
margin-bottom: 1rem;
|
|
padding: 0;
|
|
}
|
|
|
|
form label {
|
|
position: relative;
|
|
}
|
|
|
|
form label span {
|
|
position: absolute;
|
|
color: var(--base-text);
|
|
top: calc(0.875em / 2 - 6px);
|
|
font-size: 1em;
|
|
left: 0.666em;
|
|
transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out, color 0.1s ease-in-out;
|
|
pointer-events: none;
|
|
}
|
|
.dark form label span {
|
|
color: white;
|
|
}
|
|
|
|
form label input:not(:placeholder-shown) ~ span {
|
|
font-size: 0.65em;
|
|
top: -1.5em;
|
|
left: 0.666rem;
|
|
color: var(--base-text);
|
|
}
|
|
.dark form label input:not(:placeholder-shown) ~ span {
|
|
color: white;
|
|
}
|
|
|
|
form button {
|
|
border-radius: 0.225em;
|
|
background-color: var(--primary-main);
|
|
color: var(--base-white);
|
|
border-width: 0;
|
|
/* padding: 0.875em 0.5em;*/
|
|
padding: 0.5em 0.8em;
|
|
transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
|
|
margin-bottom: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
form button:hover {
|
|
background-color: var(--primary-half);
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
form label input {
|
|
border-radius: 0.166em;
|
|
background-color: var(--base-black);
|
|
border-width: 0;
|
|
color: var(--base-white);
|
|
padding: 0.975em 0.666em;
|
|
font-size: inherit;
|
|
line-height: 168%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin-bottom: 8px;
|
|
box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
|
|
}
|
|
.dark form label input {
|
|
color: #f0f0f0;
|
|
background-color: #7a7a7a;
|
|
}
|
|
fieldset .input-form-messages, .form-messages {
|
|
font-size: 14px;
|
|
margin-bottom: 24px;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
fieldset .input-form-messages .info,
|
|
fieldset .input-form-messages .error,
|
|
.form-messages .info,
|
|
.form-messages .error {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
form input::placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.password-visibility-toggle path {
|
|
fill: var(--base-white);
|
|
}
|
|
|
|
.password-visibility-toggle {
|
|
position: absolute;
|
|
top: 0.2125rem;
|
|
right: 1em;
|
|
height: 1em;
|
|
width: 1em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="text"] ~ .password-visibility-toggle .eye-closed,
|
|
input[type="password"] ~ .password-visibility-toggle .eye-open {
|
|
display: inline;
|
|
}
|
|
/*
|
|
input[type="password"] ~ .password-visibility-toggle .eye-closed,
|
|
input[type="text"] ~ .password-visibility-toggle .eye-open {
|
|
display: none;
|
|
}
|
|
*/
|
|
.page-w {
|
|
min-width: 100vw;
|
|
/* position: absolute;
|
|
top: 0;
|
|
*/
|
|
min-height: 100vh;
|
|
color: var(--primary-light);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.login {
|
|
/* position: absolute;*/
|
|
/* top: 45%;*/
|
|
/* left: 50%;*/
|
|
/* margin-right: -50%; */
|
|
/* transform: translate(-50%, -50%) */
|
|
/* margin: 0 auto; */
|
|
}
|
|
</style>
|