68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue"
|
|
|
|
import { useATProtoLogin } from "@/hooks/useATProtoLogin.hook"
|
|
|
|
const { handle, isLoggedIn, isATProtoReady, signIn, signOut } =
|
|
useATProtoLogin()
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
withSignOut?: boolean
|
|
}>(),
|
|
{
|
|
withSignOut: true
|
|
}
|
|
)
|
|
|
|
const inputHandle = ref("")
|
|
|
|
const onSignIn = () => {
|
|
if (inputHandle.value) {
|
|
signIn(inputHandle.value)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="!isATProtoReady" class="skeleton h-8 w-40"></div>
|
|
<div v-else-if="isLoggedIn" class="sign-in-atproto is-signed-in">
|
|
<span>{{ handle }}</span>
|
|
<button class="btn btn-sm" @click="signOut" v-if="withSignOut">
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
<div v-else-if="!isLoggedIn" class="sign-in-atproto join">
|
|
<input
|
|
v-model="inputHandle"
|
|
class="input input-sm join-item"
|
|
type="text"
|
|
placeholder="alice.bsky.social"
|
|
@keyup.enter="onSignIn"
|
|
/>
|
|
<button class="btn input-sm join-item" @click="onSignIn">
|
|
Sign in with
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 600 530"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
|
|
fill="#1185fe"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.is-signed-in {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
</style>
|