forked from Mirrors/elk
refactor: signin page
This commit is contained in:
Anthony Fu
parent
936488f51e
commit
24c573ccf0
10 changed files with 47 additions and 39 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
10
components/account/AccountSignInEntry.vue
Normal file
10
components/account/AccountSignInEntry.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
1
shim.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <references type="unplugin-vue-macros/macros-global" />
|
||||
|
|
@ -1,10 +1,5 @@
|
|||
{
|
||||
"extends": "./.nuxt/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"types": [
|
||||
"unplugin-vue-macros/macros-global"
|
||||
]
|
||||
},
|
||||
"vueCompilerOptions": {
|
||||
"plugins": [
|
||||
"@vue-macros/volar/define-model",
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
Loading…
Reference in a new issue