scott/kalkutago
1
0
Fork 0
forked from TWS/kalkutago
Code Pull requests Activity

Add busy-indicator to login/signup buttons

Browse source
This commit is contained in:
D. Scott Boggs 2023-08-12 08:54:55 -04:00
parent 4fb02e704c
commit 68e9b15da9
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/src/views/Login.vue
View file

@ -1,13 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ref, computed } from 'vue'
import { state } from '../state';
import router from '../router'
const name = ref("")
const password = ref("")
const signUpWait = ref(false)
const loginWait = ref(false)
const signUpClass = computed(() => `submit button is-success ${signUpWait ? 'is-loading' : ''}`)
const loginClass = computed(() => `submit button is-success ${loginWait ? 'is-loading' : ''}`)
async function signUp() {
const $name = name.value
signUpWait.value = true
const result = await fetch("/api/v1/auth", {
method: 'POST',
body: JSON.stringify({ name: $name, password: password.value }),
@ -22,6 +27,7 @@ async function signUp() {
async function login() {
const $name = name.value
loginWait.value = true
const result = await fetch("/api/v1/auth", {
method: 'PUT',
body: JSON.stringify({ name: $name, password: password.value }),
@ -58,8 +64,8 @@ async function login() {
</div>
</section>
<footer class="modal-card-foot">
<button class="submit button is-success" @click="login">Log in</button>
<button class="submit button is-info" @click="signUp">Sign Up</button>
<button :class="loginClass" @click="login">Log in</button>
<button :class="signUpClass" @click="signUp">Sign Up</button>
</footer>
</div>
</div>