48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
phone: string;
|
|
password: string;
|
|
error: string | null;
|
|
busy: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "update:phone", value: string): void;
|
|
(e: "update:password", value: string): void;
|
|
(e: "submit"): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-full items-center justify-center px-3">
|
|
<div class="card w-full max-w-sm border border-base-300 bg-base-100 shadow-sm">
|
|
<div class="card-body p-5">
|
|
<h1 class="text-lg font-semibold">Login</h1>
|
|
<p class="mt-1 text-xs text-base-content/65">Sign in with phone and password.</p>
|
|
<div class="mt-4 space-y-2">
|
|
<input
|
|
:value="props.phone"
|
|
type="tel"
|
|
class="input input-bordered w-full"
|
|
placeholder="+1 555 000 0001"
|
|
@input="emit('update:phone', ($event.target as HTMLInputElement).value)"
|
|
@keyup.enter="emit('submit')"
|
|
>
|
|
<input
|
|
:value="props.password"
|
|
type="password"
|
|
class="input input-bordered w-full"
|
|
placeholder="Password"
|
|
@input="emit('update:password', ($event.target as HTMLInputElement).value)"
|
|
@keyup.enter="emit('submit')"
|
|
>
|
|
<p v-if="props.error" class="text-xs text-error">{{ props.error }}</p>
|
|
<button class="btn w-full" :disabled="props.busy" @click="emit('submit')">
|
|
{{ props.busy ? "Logging in..." : "Login" }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|