Add busy-indicator to login/signup buttons
This commit is contained in:
parent
3dbe2d2327
commit
db72a6df17
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue