Login.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <!-- Copyright (C) 2012-2021 Zammad Foundation, https://zammad-foundation.org/ -->
  2. <template>
  3. <!-- TODO: Only a dummy implementation for the login... -->
  4. <div class="flex flex-col h-screen items-center justify-center">
  5. <div class="max-w-sm w-full">
  6. <div class="h-full m-auto">
  7. <div class="flex-grow flex flex-col justify-center">
  8. <p>{{ i18n.t('Log in with %s', config.get('fqdn') as string) }}</p>
  9. <div class="my-5 p-5 max-w-full bg-white flex-grow rounded-md">
  10. <div class="flex flex-col">
  11. <div class="flex justify-center p-4">
  12. <img
  13. class="w-32 h-32"
  14. src="@common/assets/logo.svg"
  15. alt="Zammad"
  16. />
  17. </div>
  18. <div class="text-left">
  19. <label class="block mt-4 cursor-pointer">
  20. <span class="text-gray-600 uppercase text-xs tracking-wide">
  21. {{ i18n.t('Username / Email') }}
  22. </span>
  23. <input
  24. v-model="loginFormValues.login"
  25. type="text"
  26. class="
  27. text-gray-700
  28. mt-1
  29. block
  30. w-full
  31. text-sm
  32. rounded
  33. border border-gray-200
  34. "
  35. />
  36. </label>
  37. <label class="block mt-4 cursor-pointer">
  38. <span class="text-gray-600 uppercase text-xs tracking-wide">
  39. {{ i18n.t('Password') }}
  40. </span>
  41. <input
  42. v-model="loginFormValues.password"
  43. type="password"
  44. class="
  45. text-gray-700
  46. mt-1
  47. block
  48. w-full
  49. text-sm
  50. rounded
  51. border border-gray-200
  52. "
  53. />
  54. </label>
  55. <label
  56. class="
  57. mt-4
  58. cursor-pointer
  59. inline-flex
  60. items-center
  61. select-none
  62. "
  63. >
  64. <input type="checkbox" class="form-checkbox" checked />
  65. <span class="ml-2">{{ i18n.t('Remember me') }}</span>
  66. </label>
  67. </div>
  68. <div class="flex justify-between flex-grow items-baseline mt-4">
  69. <button
  70. class="
  71. bg-blue-500
  72. hover:bg-blue-600
  73. text-white
  74. py-2
  75. px-4
  76. rounded
  77. select-none
  78. "
  79. v-on:click="login"
  80. >
  81. {{ i18n.t('Sign in') }}
  82. </button>
  83. <a class="cursor-pointer select-none underline">
  84. {{ i18n.t('Forgot password?') }}
  85. </a>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="flex justify-center items-center align-baseline p-6">
  92. <a href="https://zammad.org" target="_blank">
  93. <svg class="w-10 h-10">
  94. <use xlink:href="@common/assets/icons.svg#icon-logo"></use>
  95. </svg>
  96. </a>
  97. <span class="mx-1">{{ i18n.t('Powered by') }}</span>
  98. <a class="ml-1 -mt-1" href="https://zammad.org" target="_blank">
  99. <svg class="w-20 h-10 fill-current">
  100. <use xlink:href="@common/assets/icons.svg#icon-logotype"></use>
  101. </svg>
  102. </a>
  103. </div>
  104. </div>
  105. </div>
  106. </template>
  107. <script setup lang="ts">
  108. import useApplicationConfigStore from '@common/stores/application/config'
  109. import useAuthenticationStore from '@common/stores/authenticated'
  110. import { useRouter } from 'vue-router'
  111. const authentication = useAuthenticationStore()
  112. const loginFormValues = {
  113. login: '',
  114. password: '',
  115. }
  116. const router = useRouter()
  117. const login = (): void => {
  118. authentication
  119. .login(loginFormValues.login, loginFormValues.password)
  120. .then(() => {
  121. router.replace('/')
  122. })
  123. }
  124. const config = useApplicationConfigStore()
  125. </script>