refactor: signin page

This commit is contained in:
Anthony Fu 2022-11-23 11:06:56 +08:00
parent 936488f51e
commit 24c573ccf0
10 changed files with 47 additions and 39 deletions

View file

@ -25,7 +25,7 @@ const createdAt = $computed(() => {
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="`/@${account.acct}`">
<CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<CommonRichContent font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
<p op50>
@{{ account.acct }}
</p>

View file

@ -1,10 +1,29 @@
<script setup lang="ts">
import { DEFAULT_SERVER } from '~/constants'
const server = ref<string>()
async function oauth() {
const a = document.createElement('a')
a.href = `/api/${server.value || DEFAULT_SERVER}/login`
a.target = '_blank'
a.click()
}
</script>
<template>
<div p8 flex="~ col gap4">
<div text-sm op50>
Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.
<div h-full text-center justify-center flex="~ col items-center gap2">
<div text-4xl mb-10>
Nuxtodon
</div>
<NuxtLink to="/signin" class="btn-solid text-center">
<div>Mastodon Server</div>
<div flex bg-gray:10 px2 py1 mxa rounded border="~ border" w-80 text-xl items-center>
<span op35 mr1 text-sm>https://</span>
<input v-model="server" :placeholder="DEFAULT_SERVER" outline-none bg-transparent>
</div>
<button btn-solid mxa @click="oauth()">
Sign in
</NuxtLink>
</button>
</div>
</template>

View file

@ -0,0 +1,10 @@
<template>
<div p8 flex="~ col gap4">
<div text-sm op50>
Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.
</div>
<NuxtLink to="/signin" class="btn-solid text-center">
Sign in
</NuxtLink>
</div>
</template>

View file

@ -38,6 +38,10 @@
<div i-ri:bookmark-line />
<span>Bookmarks</span>
</NuxtLink>
<NuxtLink flex gap2 items-center :to="`/@${currentUser.account?.username}`" active-class="text-primary">
<AccountAvatar :account="currentUser.account" h="1.2em" />
<span>Profile</span>
</NuxtLink>
</template>
</div>
</template>

View file

@ -55,8 +55,8 @@ onUnmounted(() => {
/>
<div flex justify-end>
<button
h-9 w-22 bg-primary border-rounded
:disabled="draft.status === ''"
btn-solid
:disabled="!draft.status"
@click="publish"
>
Publish!

View file

@ -5,7 +5,7 @@
<div sticky top-0 h-screen flex="~ col">
<slot name="left">
<AccountMe v-if="currentUser" />
<AccountSignIn v-else />
<AccountSignInEntry v-else />
</slot>
</div>
</div>

View file

@ -2,30 +2,8 @@
definePageMeta({
layout: 'none',
})
const server = ref()
async function oauth() {
const a = document.createElement('a')
a.href = `/api/${server.value}/login`
a.target = '_blank'
a.click()
}
</script>
<template>
<div h-full text-center justify-center flex="~ col items-center gap2">
<div text-4xl mb-10>
Nuxtodon
</div>
<div>Mastodon Server</div>
<div bg-gray:10 px2 py1 rounded border="~ border" w-50 mxa flex>
<span op25 mr1>https://</span>
<input v-model="server" outline-none bg-transparent>
</div>
<button bg-teal6 px2 py1 rounded w-20 mxa mt-5 @click="oauth()">
Login
</button>
</div>
<AccountSignIn />
</template>

1
shim.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <references type="unplugin-vue-macros/macros-global" />

View file

@ -1,10 +1,5 @@
{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"types": [
"unplugin-vue-macros/macros-global"
]
},
"vueCompilerOptions": {
"plugins": [
"@vue-macros/volar/define-model",

View file

@ -15,8 +15,9 @@ export default defineConfig({
'border-base': 'border-$c-border',
'bg-base': 'bg-$c-bg-base',
'text-base': 'text-$c-text-base',
'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active',
'btn-outline': 'px-4 py-2 rounded text-$c-primary border-$c-primary hover:bg-$c-primary hover:text-white',
'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active interact-disabled',
'btn-outline': 'px-4 py-2 rounded text-$c-primary border-$c-primary hover:bg-$c-primary hover:text-white interact-disabled',
},
],
presets: [