🎉 Initial Commit for the Sphere webpage

DysonNetwork.Sphere/Client/src/assets/main.css

@@ -0,0 +1,10 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@layer theme, base, components, utilities;
+
+@layer base {
+  body {
+    font-family: 'Nunito Variable', sans-serif;
+  }
+}

DysonNetwork.Sphere/Client/src/components/AttachmentItem.vue

@@ -0,0 +1,18 @@
+<template>
+  <n-image v-if="itemType == 'image'" :src="remoteSource" class="rounded-md">
+    <template #error>
+      <img src="/image-broken.jpg" class="w-32 h-32 rounded-md" />
+    </template>
+  </n-image>
+</template>
+
+<script lang="ts" setup>
+import { NImage } from 'naive-ui'
+import { computed } from 'vue'
+
+const props = defineProps<{ item: any }>()
+
+const itemType = computed(() => props.item.mime_type.split('/')[0] ?? 'unknown')
+
+const remoteSource = computed(() => `/cgi/drive/files/${props.item.id}`)
+</script>

DysonNetwork.Sphere/Client/src/components/PostHeader.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex gap-3 items-center">
+    <n-avatar round :size="40" :src="publisherAvatar" />
+    <div class="flex-grow-1 flex flex-col">
+      <p class="flex gap-1 items-baseline">
+        <span class="font-bold">{{ props.item.publisher.nick }}</span>
+        <span class="text-xs">@{{ props.item.publisher.name }}</span>
+      </p>
+      <p class="text-xs flex gap-1">
+        <span>{{ dayjs(props.item.created_at).utc().fromNow() }}</span>
+        <span class="font-bold">·</span>
+        <span>{{ new Date(props.item.created_at).toLocaleString() }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NAvatar } from 'naive-ui'
+import { computed } from 'vue'
+
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import utc from 'dayjs/plugin/utc'
+
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+
+const props = defineProps<{ item: any }>()
+
+const publisherAvatar = computed(() =>
+  props.item.publisher.picture ? `/cgi/drive/files/${props.item.publisher.picture.id}` : undefined,
+)
+</script>

DysonNetwork.Sphere/Client/src/components/PostItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <n-card>
+    <div class="flex flex-col gap-3">
+      <post-header :item="props.item" />
+
+      <div v-if="props.item.title || props.item.description">
+        <h2 class="text-lg" v-if="props.item.title">{{ props.item.title }}</h2>
+        <p class="text-sm" v-if="props.item.description">
+          {{ props.item.description }}
+        </p>
+      </div>
+
+      <article v-if="htmlContent" class="prose prose-sm dark:prose-invert prose-slate prose-p:m-0">
+        <div v-html="htmlContent"></div>
+      </article>
+
+      <div v-if="props.item.attachments">
+        <n-image-group>
+          <n-space>
+            <attachment-item
+              v-for="attachment in props.item.attachments"
+              :key="attachment.id"
+              :item="attachment"
+            />
+          </n-space>
+        </n-image-group>
+      </div>
+    </div>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { NCard, NImageGroup, NSpace } from 'naive-ui'
+import { ref, watch } from 'vue'
+import { Marked } from 'marked'
+
+import PostHeader from './PostHeader.vue'
+import AttachmentItem from './AttachmentItem.vue'
+
+const props = defineProps<{ item: any }>()
+
+const marked = new Marked()
+
+const htmlContent = ref<string>('')
+
+watch(
+  props.item,
+  async (value) => {
+    if (value.content) htmlContent.value = await marked.parse(value.content)
+  },
+  { immediate: true, deep: true },
+)
+</script>

DysonNetwork.Sphere/Client/src/layouts/default.vue

@@ -0,0 +1,115 @@
+<template>
+  <n-layout>
+    <n-layout-header class="border-b-1 flex justify-between items-center">
+      <router-link to="/" class="text-lg font-bold">Solar Network</router-link>
+      <div v-if="!hideUserMenu">
+        <n-dropdown
+          v-if="!userStore.isAuthenticated"
+          :options="guestOptions"
+          @select="handleGuestMenuSelect"
+        >
+          <n-button>Account</n-button>
+        </n-dropdown>
+        <n-dropdown v-else :options="userOptions" @select="handleUserMenuSelect" type="primary">
+          <n-button>{{ userStore.user.nick }}</n-button>
+        </n-dropdown>
+      </div>
+    </n-layout-header>
+    <n-layout-content embedded>
+      <router-view />
+    </n-layout-content>
+  </n-layout>
+</template>
+
+<script lang="ts" setup>
+import { computed, h } from 'vue'
+import { NLayout, NLayoutHeader, NLayoutContent, NButton, NDropdown, NIcon } from 'naive-ui'
+import {
+  LogInOutlined,
+  PersonAddAlt1Outlined,
+  PersonOutlineRound,
+  DataUsageRound,
+} from '@vicons/material'
+import { useUserStore } from '@/stores/user'
+import { useRoute, useRouter } from 'vue-router'
+import { useServicesStore } from '@/stores/services'
+
+const userStore = useUserStore()
+
+const router = useRouter()
+const route = useRoute()
+
+const hideUserMenu = computed(() => {
+  return ['captcha', 'spells', 'login', 'create-account'].includes(route.name as string)
+})
+
+const guestOptions = [
+  {
+    label: 'Login',
+    key: 'login',
+    icon: () =>
+      h(NIcon, null, {
+        default: () => h(LogInOutlined),
+      }),
+  },
+  {
+    label: 'Create Account',
+    key: 'create-account',
+    icon: () =>
+      h(NIcon, null, {
+        default: () => h(PersonAddAlt1Outlined),
+      }),
+  },
+]
+
+const userOptions = computed(() => [
+  {
+    label: 'Dashboard',
+    key: 'dashboardUsage',
+    icon: () =>
+      h(NIcon, null, {
+        default: () => h(DataUsageRound),
+      }),
+  },
+  {
+    label: 'Profile',
+    key: 'profile',
+    icon: () =>
+      h(NIcon, null, {
+        default: () => h(PersonOutlineRound),
+      }),
+  },
+])
+
+const servicesStore = useServicesStore()
+
+function handleGuestMenuSelect(key: string) {
+  if (key === 'login') {
+    window.open(servicesStore.getSerivceUrl('DysonNetwork.Pass', 'login')!, '_blank')
+  } else if (key === 'create-account') {
+    window.open(servicesStore.getSerivceUrl('DysonNetwork.Pass', 'create-account')!, '_blank')
+  }
+}
+
+function handleUserMenuSelect(key: string) {
+  if (key === 'profile') {
+    window.open(servicesStore.getSerivceUrl('DysonNetwork.Pass', 'accounts/me')!, '_blank')
+  } else {
+    router.push({ name: key })
+  }
+}
+</script>
+
+<style scoped>
+.n-layout-header {
+  padding: 8px 24px;
+  border-color: var(--n-border-color);
+  height: 57px; /* Fixed height */
+  display: flex;
+  align-items: center;
+}
+
+.n-layout-content {
+  height: calc(100vh - 57px); /* Adjust based on header height */
+}
+</style>

DysonNetwork.Sphere/Client/src/main.ts

@@ -0,0 +1,16 @@
+import '@fontsource-variable/nunito';
+
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import Root from './root.vue'
+import router from './router'
+
+const app = createApp(Root)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

DysonNetwork.Sphere/Client/src/root.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import LayoutDefault from './layouts/default.vue'
+
+import { RouterView } from 'vue-router'
+import {
+  NGlobalStyle,
+  NConfigProvider,
+  NMessageProvider,
+  NDialogProvider,
+  NLoadingBarProvider,
+  lightTheme,
+  darkTheme,
+} from 'naive-ui'
+import { usePreferredDark } from '@vueuse/core'
+import { useUserStore } from './stores/user'
+import { onMounted } from 'vue'
+import { useServicesStore } from './stores/services'
+
+const themeOverrides = {
+  common: {
+    fontFamily: 'Nunito Variable, v-sans, ui-system, -apple-system, sans-serif',
+    primaryColor: '#7D80BAFF',
+    primaryColorHover: '#9294C5FF',
+    primaryColorPressed: '#575B9DFF',
+    primaryColorSuppl: '#6B6FC1FF',
+  },
+}
+
+const isDark = usePreferredDark()
+
+const userStore = useUserStore()
+const servicesStore = useServicesStore()
+
+onMounted(() => {
+  userStore.initialize()
+
+  userStore.fetchUser()
+  servicesStore.fetchServices()
+})
+</script>
+
+<template>
+  <n-config-provider :theme-overrides="themeOverrides" :theme="isDark ? darkTheme : lightTheme">
+    <n-global-style />
+    <n-loading-bar-provider>
+      <n-dialog-provider>
+        <n-message-provider placement="bottom">
+          <layout-default>
+            <router-view />
+          </layout-default>
+        </n-message-provider>
+      </n-dialog-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>

DysonNetwork.Sphere/Client/src/router/index.ts

@@ -0,0 +1,39 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { useServicesStore } from '@/stores/services'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      component: () => import('../views/index.vue'),
+    },
+  ],
+})
+
+router.beforeEach(async (to, from, next) => {
+  const userStore = useUserStore()
+  const servicesStore = useServicesStore()
+
+  // Initialize user state if not already initialized
+  if (!userStore.user) {
+    await userStore.fetchUser()
+  }
+
+  if (to.matched.some((record) => record.meta.requiresAuth) && !userStore.isAuthenticated) {
+    window.open(
+      servicesStore.getSerivceUrl(
+        'DysonNetwork.Pass',
+        'login?redirect=' + encodeURIComponent(window.location.href),
+      )!,
+      '_blank',
+    )
+    next('/')
+  } else {
+    next()
+  }
+})
+
+export default router

DysonNetwork.Sphere/Client/src/stores/services.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useServicesStore = defineStore('services', () => {
+  const services = ref<Record<string, string>>({})
+
+  async function fetchServices() {
+    try {
+      const response = await fetch('/cgi/.well-known/services')
+      if (!response.ok) {
+        throw new Error('Network response was not ok')
+      }
+      const data = await response.json()
+      services.value = data
+    } catch (error) {
+      console.error('Failed to fetch services:', error)
+      services.value = {}
+    }
+  }
+
+  function getSerivceUrl(serviceName: string, ...parts: string[]): string | null {
+    const baseUrl = services.value[serviceName] || null
+    return baseUrl ? `${baseUrl}/${parts.join('/')}` : null
+  }
+
+  return { services, fetchServices, getSerivceUrl }
+})

DysonNetwork.Sphere/Client/src/stores/user.ts

@@ -0,0 +1,65 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useUserStore = defineStore('user', () => {
+  // State
+  const user = ref<any>(null)
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  // Getters
+  const isAuthenticated = computed(() => !!user.value)
+
+  // Actions
+  async function fetchUser(reload = true) {
+    if (!reload && user.value) return
+    isLoading.value = true
+    error.value = null
+    try {
+      const response = await fetch('/cgi/id/accounts/me', {
+        credentials: 'include',
+      })
+
+      if (!response.ok) {
+        // If the token is invalid, clear it and the user state
+        throw new Error('Failed to fetch user information.')
+      }
+
+      user.value = await response.json()
+    } catch (e: any) {
+      error.value = e.message
+      user.value = null // Clear user data on error
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  function initialize() {
+    const allowedOrigin = import.meta.env.DEV ? window.location.origin : 'https://id.solian.app'
+    window.addEventListener('message', (event) => {
+      // IMPORTANT: Always check the origin of the message for security!
+      // This prevents malicious scripts from sending fake login status updates.
+      // Ensure event.origin exactly matches your identity service's origin.
+      if (event.origin !== allowedOrigin) {
+        console.warn(`[SYNC] Message received from unexpected origin: ${event.origin}. Ignoring.`)
+        return // Ignore messages from unknown origins
+      }
+
+      // Check if the message is the type we're expecting
+      if (event.data && event.data.type === 'DY:LOGIN_STATUS_CHANGE') {
+        const { loggedIn } = event.data
+        console.log(`[SYNC] Received login status change: ${loggedIn}`)
+        fetchUser() // Re-fetch user data on login status change
+      }
+    })
+  }
+
+  return {
+    user,
+    isLoading,
+    error,
+    isAuthenticated,
+    fetchUser,
+    initialize,
+  }
+})

DysonNetwork.Sphere/Client/src/views/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="h-full max-w-5xl container mx-auto px-8">
+    <n-grid cols="1 l:5" responsive="screen" :x-gap="16">
+      <n-gi span="3">
+        <n-infinite-scroll style="height: calc(100vh - 57px)" :distance="10" @load="fetchActivites">
+          <div v-for="activity in activites" :key="activity.id" class="mt-4">
+            <post-item v-if="activity.type == 'posts.new'" :item="activity.data" />
+          </div>
+        </n-infinite-scroll>
+      </n-gi>
+      <n-gi span="2" class="max-lg:order-first">
+        <n-card class="w-full mt-4" title="About">
+          <p>Welcome to the <b>Solar Network</b></p>
+          <p>The open social network. Friendly to everyone.</p>
+
+          <p class="mt-4 opacity-75 text-xs">
+            <span v-if="version == null">Loading...</span>
+            <span v-else>
+              v{{ version.version }} @
+              {{ version.commit.substring(0, 6) }}
+              {{ version.updatedAt }}
+            </span>
+          </p>
+        </n-card>
+      </n-gi>
+    </n-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NInfiniteScroll, NGrid, NGi } from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+import { useUserStore } from '@/stores/user'
+
+import PostItem from '@/components/PostItem.vue'
+
+const userStore = useUserStore()
+
+const version = ref<any>(null)
+async function fetchVersion() {
+  const resp = await fetch('/api/version')
+  version.value = await resp.json()
+}
+onMounted(() => fetchVersion())
+
+const loading = ref(false)
+
+const activites = ref<any[]>([])
+const activitesLast = computed(
+  () =>
+    activites.value.sort(
+      (a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+    )[0],
+)
+
+async function fetchActivites() {
+  loading.value = true
+  const resp = await fetch(
+    activitesLast.value == null
+      ? '/api/activities'
+      : `/api/activities?cursor=${new Date(activitesLast.value.created_at).toISOString()}`,
+  )
+  activites.value.push(...(await resp.json()))
+  loading.value = false
+}
+onMounted(() => fetchActivites())
+</script>

DysonNetwork.Sphere/Client/src/views/not-found.vue

@@ -0,0 +1,16 @@
+<template>
+  <section class="h-full flex items-center justify-center">
+    <n-result status="404" title="404" description="Page not found">
+      <template #footer>
+        <n-button @click="router.push('/')">Go to Home</n-button>
+      </template>
+    </n-result>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { NResult, NButton } from 'naive-ui'
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+</script>

DysonNetwork.Sphere/Client/src/views/secure.ts

@@ -0,0 +1,94 @@
+export async function downloadAndDecryptFile(
+  url: string,
+  password: string,
+  fileName: string,
+  onProgress?: (progress: number) => void,
+): Promise<void> {
+  const response = await fetch(url)
+  if (!response.ok) throw new Error(`Failed to fetch: ${response.status}`)
+
+  const contentLength = +(response.headers.get('Content-Length') || 0)
+  const reader = response.body!.getReader()
+  const chunks: Uint8Array[] = []
+  let received = 0
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    if (value) {
+      chunks.push(value)
+      received += value.length
+      if (contentLength && onProgress) {
+        onProgress(received / contentLength)
+      }
+    }
+  }
+
+  const fullBuffer = new Uint8Array(received)
+  let offset = 0
+  for (const chunk of chunks) {
+    fullBuffer.set(chunk, offset)
+    offset += chunk.length
+  }
+
+  const decryptedBytes = await decryptFile(fullBuffer, password)
+
+  // Create a blob and trigger a download
+  const blob = new Blob([decryptedBytes])
+  const downloadUrl = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = downloadUrl
+  a.download = fileName
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  URL.revokeObjectURL(downloadUrl)
+}
+
+export async function decryptFile(fileBuffer: Uint8Array, password: string): Promise<Uint8Array> {
+  const salt = fileBuffer.slice(0, 16)
+  const nonce = fileBuffer.slice(16, 28)
+  const tag = fileBuffer.slice(28, 44)
+  const ciphertext = fileBuffer.slice(44)
+
+  const enc = new TextEncoder()
+  const keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    enc.encode(password),
+    { name: 'PBKDF2' },
+    false,
+    ['deriveKey'],
+  )
+  const key = await crypto.subtle.deriveKey(
+    { name: 'PBKDF2', salt, iterations: 100000, hash: 'SHA-256' },
+    keyMaterial,
+    { name: 'AES-GCM', length: 256 },
+    false,
+    ['decrypt'],
+  )
+
+  const fullCiphertext = new Uint8Array(ciphertext.length + tag.length)
+  fullCiphertext.set(ciphertext)
+  fullCiphertext.set(tag, ciphertext.length)
+
+  let decrypted: ArrayBuffer
+  try {
+    decrypted = await crypto.subtle.decrypt(
+      { name: 'AES-GCM', iv: nonce, tagLength: 128 },
+      key,
+      fullCiphertext,
+    )
+  } catch {
+    throw new Error('Incorrect password or corrupted file.')
+  }
+
+  const magic = new TextEncoder().encode('DYSON1')
+  const decryptedBytes = new Uint8Array(decrypted)
+  for (let i = 0; i < magic.length; i++) {
+    if (decryptedBytes[i] !== magic[i]) {
+      throw new Error('Incorrect password or corrupted file.')
+    }
+  }
+
+  return decryptedBytes.slice(magic.length)
+}