zterton-status/src/views/Login.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 14
</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>