mirror of
https://github.com/Drop-OSS/drop-app.git
synced 2025-11-12 15:52:43 +10:00
auth initiate, database and more
This commit is contained in:
DecDuck
71
pages/auth/index.vue
Normal file
71
pages/auth/index.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div
|
||||
class="grid min-h-full grid-cols-1 grid-rows-[1fr,auto,1fr] bg-zinc-950 lg:grid-cols-[max(50%,36rem),1fr]"
|
||||
>
|
||||
<header
|
||||
class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
|
||||
>
|
||||
<Logo class="h-10 w-auto sm:h-12" />
|
||||
</header>
|
||||
<main
|
||||
class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
|
||||
>
|
||||
<div class="max-w-lg">
|
||||
<h1
|
||||
class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
|
||||
>
|
||||
Sign in to Drop
|
||||
</h1>
|
||||
<p class="mt-6 text-base leading-7 text-zinc-400">
|
||||
To get started, sign in to your Drop instance by clicking below.
|
||||
</p>
|
||||
<div class="mt-10">
|
||||
<button
|
||||
@click="() => auth()"
|
||||
class="text-sm font-semibold leading-7 text-blue-600"
|
||||
>
|
||||
Sign in with your browser <span aria-hidden="true">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
|
||||
<div class="border-t border-blue-600 bg-zinc-900 py-10">
|
||||
<nav
|
||||
class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
|
||||
>
|
||||
<a href="#">Documentation</a>
|
||||
<svg
|
||||
viewBox="0 0 2 2"
|
||||
aria-hidden="true"
|
||||
class="h-0.5 w-0.5 fill-zinc-700"
|
||||
>
|
||||
<circle cx="1" cy="1" r="1" />
|
||||
</svg>
|
||||
<a href="#">Troubleshooting</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
<div
|
||||
class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
|
||||
>
|
||||
<img
|
||||
src="@/assets/wallpaper.jpg"
|
||||
alt=""
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
async function auth() {
|
||||
await invoke("auth_initiate");
|
||||
}
|
||||
|
||||
definePageMeta({
|
||||
layout: "mini",
|
||||
});
|
||||
</script>
|
||||
1
pages/index.vue
Normal file
1
pages/index.vue
Normal file
@ -0,0 +1 @@
|
||||
<template></template>
|
||||
33
pages/setup/index.vue
Normal file
33
pages/setup/index.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div
|
||||
class="mx-auto flex flex-col items-center gap-y-4 max-w-2xl py-32 sm:py-48 lg:py-56"
|
||||
>
|
||||
<div>
|
||||
<Wordmark />
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1
|
||||
class="text-balance text-4xl font-bold font-display tracking-tight text-zinc-100 sm:text-6xl"
|
||||
>
|
||||
Let's get you set up
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-zinc-400">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem
|
||||
cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
|
||||
</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<NuxtLink
|
||||
href="/setup/server"
|
||||
class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>Get started -></NuxtLink
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: "mini",
|
||||
});
|
||||
</script>
|
||||
113
pages/setup/server.vue
Normal file
113
pages/setup/server.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8"
|
||||
>
|
||||
<div class="sm:mx-auto sm:w-full sm:max-w-sm flex flex-col items-center">
|
||||
<Wordmark />
|
||||
<h2
|
||||
class="mt-10 text-center text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
|
||||
>
|
||||
Connect to your Drop instance
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<form class="space-y-6" @submit.prevent="connect_wrapper">
|
||||
<div>
|
||||
<label
|
||||
for="company-website"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Drop instance address</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<div
|
||||
class="flex rounded-md shadow-sm ring-1 ring-inset ring-zinc-700 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600 sm:max-w-md"
|
||||
>
|
||||
<span
|
||||
v-if="!url.startsWith('http')"
|
||||
class="flex select-none items-center pl-3 text-zinc-500 -mr-2.5 sm:text-sm"
|
||||
>https://</span
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="company-website"
|
||||
id="company-website"
|
||||
v-model="url"
|
||||
class="block flex-1 border-0 bg-transparent py-1.5 text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
placeholder="www.example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LoadingButton :loading="loading" class="w-full">
|
||||
Continue ->
|
||||
</LoadingButton>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="mt-10 text-center text-sm text-gray-500">
|
||||
Don't have one?
|
||||
{{ " " }}
|
||||
<a
|
||||
href="https://github.com/Drop-OSS"
|
||||
target="_blank"
|
||||
class="font-semibold leading-6 text-blue-600 hover:text-blue-500"
|
||||
>Host your own instance -></a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { XCircleIcon } from "@heroicons/vue/16/solid";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
definePageMeta({
|
||||
layout: "mini",
|
||||
});
|
||||
|
||||
const url = ref("");
|
||||
const error = ref(undefined);
|
||||
const loading = ref(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
async function connect() {
|
||||
const newUrl = url.value.startsWith("http")
|
||||
? url.value
|
||||
: `https://${url.value}`;
|
||||
|
||||
const result = await invoke("use_remote", { url: newUrl });
|
||||
router.push("/auth");
|
||||
}
|
||||
|
||||
function connect_wrapper() {
|
||||
loading.value = true;
|
||||
error.value = undefined;
|
||||
connect()
|
||||
.then(() => {})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
error.value = e;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user