You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

LoginButton.vue 1.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!--
  2. - @copyright 2020 Christoph Wurst <christoph@winzerhof-wurst.at>
  3. -
  4. - @author 2020 Christoph Wurst <christoph@winzerhof-wurst.at>
  5. -
  6. - @license GNU AGPL version 3 or any later version
  7. -
  8. - This program is free software: you can redistribute it and/or modify
  9. - it under the terms of the GNU Affero General Public License as
  10. - published by the Free Software Foundation, either version 3 of the
  11. - License, or (at your option) any later version.
  12. -
  13. - This program is distributed in the hope that it will be useful,
  14. - but WITHOUT ANY WARRANTY; without even the implied warranty of
  15. - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16. - GNU Affero General Public License for more details.
  17. -
  18. - You should have received a copy of the GNU Affero General Public License
  19. - along with this program. If not, see <http://www.gnu.org/licenses/>.
  20. -->
  21. <template>
  22. <div id="submit-wrapper" @click="$emit('click')">
  23. <input id="submit-form"
  24. type="submit"
  25. class="login primary"
  26. title=""
  27. :value="!loading ? t('core', 'Log in') : t('core', 'Logging in …')">
  28. <div class="submit-icon"
  29. :class="{
  30. 'icon-confirm-white': !loading,
  31. 'icon-loading-small': loading && invertedColors,
  32. 'icon-loading-small-dark': loading && !invertedColors,
  33. }" />
  34. </div>
  35. </template>
  36. <script>
  37. export default {
  38. name: 'LoginButton',
  39. props: {
  40. loading: {
  41. type: Boolean,
  42. required: true,
  43. },
  44. invertedColors: {
  45. type: Boolean,
  46. default: false,
  47. },
  48. },
  49. }
  50. </script>
  51. <style scoped>
  52. </style>