Fit Hydrogen.Identity

This commit is contained in:
LittleSheep 2024-03-16 16:14:45 +08:00
parent a229faf013
commit ad863b4844
9 changed files with 82 additions and 37 deletions

View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.svg"> <link rel="icon" type="image/xml+svg" href="/favicon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Goatplaza</title> <title>Solarplaza</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 51 KiB

View File

@ -11,15 +11,19 @@
<v-divider class="mt-2 mb-3 border-opacity-50 mx-[-1rem]" /> <v-divider class="mt-2 mb-3 border-opacity-50 mx-[-1rem]" />
<v-btn block prepend-icon="mdi-pencil" variant="plain" @click="leaveComment">Leave your comment</v-btn> <v-btn block prepend-icon="mdi-pencil" variant="plain" :disabled="!id.userinfo.isLoggedIn" @click="leaveComment">
Leave your comment
</v-btn>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { request } from "@/scripts/request" import { request } from "@/scripts/request"
import { reactive, ref, watch } from "vue" import { reactive, ref, watch } from "vue"
import { useEditor } from "@/stores/editor" import { useEditor } from "@/stores/editor"
import { useUserinfo } from "@/stores/userinfo"
import PostItem from "@/components/posts/PostItem.vue" import PostItem from "@/components/posts/PostItem.vue"
const id = useUserinfo()
const editor = useEditor() const editor = useEditor()
const props = defineProps<{ const props = defineProps<{

View File

@ -5,7 +5,7 @@
color="grey-lighten-2" color="grey-lighten-2"
icon="mdi-account-circle" icon="mdi-account-circle"
class="rounded-card" class="rounded-card"
:src="props.item?.author.avatar" :image="props.item?.author.avatar"
/> />
</div> </div>

View File

@ -12,7 +12,9 @@
<v-menu v-if="!props.readonly" location="bottom center"> <v-menu v-if="!props.readonly" location="bottom center">
<template v-slot:activator="{ props: binding }"> <template v-slot:activator="{ props: binding }">
<v-chip v-bind="binding" :size="props.size" prepend-icon="mdi-emoticon-plus"> React </v-chip> <v-chip v-if="id.userinfo.isLoggedIn" v-bind="binding" :size="props.size" prepend-icon="mdi-emoticon-plus">
React
</v-chip>
</template> </template>
<v-list density="compact" lines="one"> <v-list density="compact" lines="one">
@ -35,9 +37,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { request } from "@/scripts/request" import { request } from "@/scripts/request"
import { getAtk } from "@/stores/userinfo" import { getAtk, useUserinfo } from "@/stores/userinfo"
import { reactive, ref } from "vue" import { reactive, ref } from "vue"
const id = useUserinfo()
const emits = defineEmits(["update"]) const emits = defineEmits(["update"])
const props = defineProps<{ const props = defineProps<{
size?: string size?: string

View File

@ -4,16 +4,31 @@
<v-list> <v-list>
<v-list-item :subtitle="username" :title="nickname"> <v-list-item :subtitle="username" :title="nickname">
<template #prepend> <template #prepend>
<v-avatar icon="mdi-account-circle" :src="id.userinfo.data?.avatar" /> <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.avatar" />
</template> </template>
<template #append> <template #append>
<v-btn icon="mdi-menu-down" size="small" variant="text"></v-btn> <v-menu v-if="id.userinfo.isLoggedIn">
<template #activator="{ props }">
<v-btn v-bind="props" icon="mdi-menu-down" size="small" variant="text" />
</template>
<v-list density="compact">
<v-list-item
title="Solarpass"
prepend-icon="mdi-passport-biometric"
target="_blank"
:href="passportUrl"
/>
</v-list>
</v-menu>
<v-btn v-else icon="mdi-login-variant" size="small" variant="text" :href="signinUrl" />
</template> </template>
</v-list-item> </v-list-item>
</v-list> </v-list>
<v-list density="compact" class="flex-grow-1" nav> </v-list> <v-list density="compact" class="flex-grow-1" nav> </v-list>
<div> <div>
<v-alert type="info" variant="tonal" class="text-sm"> <v-alert type="info" variant="tonal" class="text-sm">
We just released the brand new design system and user interface! We just released the brand new design system and user interface!
@ -28,7 +43,7 @@
<v-app-bar-nav-icon variant="text" @click.stop="toggleDrawer" /> <v-app-bar-nav-icon variant="text" @click.stop="toggleDrawer" />
<router-link :to="{ name: 'explore' }"> <router-link :to="{ name: 'explore' }">
<h2 class="ml-2 text-lg font-500">Goatplaza</h2> <h2 class="ml-2 text-lg font-500">Solarplaza</h2>
</router-link> </router-link>
<v-spacer /> <v-spacer />
@ -54,7 +69,15 @@
transition="scroll-y-reverse-transition" transition="scroll-y-reverse-transition"
> >
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-fab v-bind="props" class="editor-fab" icon="mdi-pencil" color="primary" size="64" appear /> <v-fab
v-bind="props"
appear
class="editor-fab"
icon="mdi-pencil"
color="primary"
size="64"
:active="id.userinfo.isLoggedIn"
/>
</template> </template>
<div class="flex flex-col items-center gap-4 mb-4"> <div class="flex flex-col items-center gap-4 mb-4">
@ -70,6 +93,7 @@
import { computed, ref } from "vue" import { computed, ref } from "vue"
import { useEditor } from "@/stores/editor" import { useEditor } from "@/stores/editor"
import { useUserinfo } from "@/stores/userinfo" import { useUserinfo } from "@/stores/userinfo"
import { useWellKnown } from "@/stores/wellKnown"
import PostAction from "@/components/publish/PostAction.vue" import PostAction from "@/components/publish/PostAction.vue"
const id = useUserinfo() const id = useUserinfo()
@ -93,6 +117,17 @@ const nickname = computed(() => {
id.readProfiles() id.readProfiles()
const meta = useWellKnown()
const signinUrl = computed(() => {
return meta.wellKnown?.components?.identity + `/auth/sign-in?redirect_uri=${encodeURIComponent(location.href)}`
})
const passportUrl = computed(() => {
return meta.wellKnown?.components?.identity
})
meta.readWellKnown()
const drawerOpen = ref(true) const drawerOpen = ref(true)
function toggleDrawer() { function toggleDrawer() {

View File

@ -3,7 +3,7 @@ import { defineStore } from "pinia"
import { ref } from "vue" import { ref } from "vue"
export const useWellKnown = defineStore("well-known", () => { export const useWellKnown = defineStore("well-known", () => {
const wellKnown = ref({}) const wellKnown = ref<any>(null)
async function readWellKnown() { async function readWellKnown() {
const res = await request("/.well-known") const res = await request("/.well-known")

View File

@ -9,7 +9,7 @@
color="grey-lighten-2" color="grey-lighten-2"
icon="mdi-account-circle" icon="mdi-account-circle"
class="rounded-card" class="rounded-card"
:src="post?.author.avatar" :image="post?.author.avatar"
/> />
<div> <div>

View File

@ -1,6 +1,6 @@
debug = true debug = true
name = "Goatplaza" name = "Solarplaza"
maintainer = "SmartSheep Studio" maintainer = "SmartSheep Studio"
bind = "0.0.0.0:8445" bind = "0.0.0.0:8445"
@ -10,7 +10,7 @@ secret = "LtTjzAGFLshwXhN4ZD4nG5KlMv1MWcsvfv03TSZYnT1VhiAnLIZFTnHUwR0XhGgi"
content = "uploads" content = "uploads"
[identity] [identity]
client_id = "goatplaza" client_id = "solarplaza"
client_secret = "Z9k9AFTj^p" client_secret = "Z9k9AFTj^p"
endpoint = "http://localhost:8444" endpoint = "http://localhost:8444"
grpc_endpoint = "127.0.0.1:7444" grpc_endpoint = "127.0.0.1:7444"