mirror of
https://github.com/OpenSTDL/CrunchyDL.git
synced 2024-10-18 18:25:07 +02:00
89 lines
2.7 KiB
Vue
89 lines
2.7 KiB
Vue
<template>
|
|
<div class="h-screen overflow-hidden bg-[#11111189] flex flex-col p-5 text-white font-dm" style="-webkit-app-region: drag">
|
|
<div class="relative flex flex-row items-center justify-center">
|
|
<div class="text-2xl">Crunchyroll Login</div>
|
|
</div>
|
|
<div class="flex flex-col mt-5 gap-3.5 h-full" style="-webkit-app-region: no-drag">
|
|
<div class="relative flex flex-col">
|
|
<input v-model="username" type="text" name="text" placeholder="Email" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center" />
|
|
</div>
|
|
<div class="relative flex flex-col">
|
|
<input v-model="password" type="password" name="text" placeholder="Password" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center" />
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-col mt-auto">
|
|
<button @click="login" class="relative py-3 border-2 rounded-xl flex flex-row items-center justify-center" style="-webkit-app-region: no-drag">
|
|
<div class="flex flex-row items-center justify-center transition-all" :class="isLoggingIn ? 'opacity-0' : 'opacity-100'">
|
|
<div class="text-xl">Login</div>
|
|
</div>
|
|
<div class="absolute flex flex-row items-center justify-center gap-1 transition-all" :class="isLoggingIn ? 'opacity-100' : 'opacity-0'">
|
|
<Icon name="mdi:loading" class="h-6 w-6 animate-spin" />
|
|
<div class="text-xl">Logging in</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { loginAccount } from '~/components/Crunchyroll/Account'
|
|
const isProduction = process.env.NODE_ENV !== 'development'
|
|
|
|
const username = ref<string>()
|
|
const password = ref<string>()
|
|
|
|
const isLoggingIn = ref<number>(0)
|
|
|
|
const login = async () => {
|
|
isLoggingIn.value++
|
|
if (!username.value) {
|
|
isLoggingIn.value--
|
|
return
|
|
}
|
|
if (!password.value) {
|
|
isLoggingIn.value--
|
|
return
|
|
}
|
|
|
|
const { data, error } = await loginAccount(username.value, password.value, 'CR')
|
|
|
|
if (error.value) {
|
|
isLoggingIn.value--
|
|
return
|
|
}
|
|
isLoggingIn.value--
|
|
close()
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.font-dm {
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
|
|
.font-protest {
|
|
font-family: 'Protest Riot', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.font-dm-big {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 1000;
|
|
font-style: normal;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
body {
|
|
animation: fadein 0.5s;
|
|
}
|
|
</style>
|