куча говна

client/app/app.vue

@@ -5,3 +5,9 @@
 
   <PrimeToast position="bottom-center" />
 </template>
+
+<script setup lang="ts">
+console.group('Build Info')
+console.log(`COMMIT_SHA: ${__COMMIT_SHA__}`)
+console.groupEnd()
+</script>

client/app/components.d.ts

@@ -17,6 +17,8 @@ declare module 'vue' {
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimeMenu: typeof import('primevue/menu')['default']
+    PrimePassword: typeof import('primevue/password')['default']
+    PrimeSelectButton: typeof import('primevue/selectbutton')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
     PrimeToast: typeof import('primevue/toast')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

client/app/components/ClientRow.vue

@@ -8,17 +8,17 @@
 
       <div class="flex-1">
         <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
-          {{ client.username }}
+          {{ client.displayName }}
         </div>
-        <div class="mt-1 text-xs leading-5 text-muted-color">
-          {{ client.id }}
+        <div v-if="client.username !== client.displayName" class="mt-1 text-xs leading-5 text-muted-color">
+          {{ client.username }}
         </div>
       </div>
 
-      <PrimeBadge v-if="client.isMe && inputMuted" severity="info" value="Muted" />
-      <PrimeBadge v-if="client.isMe" severity="secondary" value="You" />
+      <PrimeBadge v-if="client.inputMuted" severity="info" value="Muted" />
+      <PrimeBadge v-if="isMe" severity="secondary" value="You" />
 
-      <template v-if="!client.isMe">
+      <template v-if="!isMe">
         <PrimeButton icon="pi pi-ellipsis-h" text size="small" severity="contrast" @click="menuRef?.toggle" />
 
         <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
@@ -47,6 +47,7 @@ const props = defineProps<{
 
 const { inputMuted, outputMuted } = useApp()
 const { getClientConsumers } = useMediasoup()
+const { me } = useClients()
 
 const menuRef = useTemplateRef<HTMLAudioElement>('menu')
 
@@ -64,6 +65,10 @@ const menuItems: MenuItem[] = [
   },
 ]
 
+const isMe = computed(() => {
+  return me.value && props.client.userId === me.value.userId
+})
+
 const audioConsumer = computed(() => {
   const consumers = getClientConsumers(props.client.id)
 

client/app/composables/use-app.ts

@@ -11,8 +11,6 @@ export const useApp = createGlobalState(() => {
 
   const previousInputMuted = ref(inputMuted.value)
 
-  const me = computed(() => clients.value.find(client => client.isMe))
-
   function muteInput() {
     inputMuted.value = true
   }
@@ -73,7 +71,6 @@ export const useApp = createGlobalState(() => {
 
   return {
     clients,
-    me,
     inputMuted,
     muteInput,
     unmuteInput,

client/app/composables/use-auth.ts

@@ -0,0 +1,69 @@
+import chadApi from '#shared/chad-api'
+import { createGlobalState } from '@vueuse/core'
+
+interface Me {
+  id: string
+  username: string
+  displayName: string
+}
+
+export const useAuth = createGlobalState(() => {
+  const me = shallowRef<Me>()
+
+  function setMe(value: Me | undefined): void {
+    me.value = value
+  }
+
+  async function login(username: string, password: string): Promise<void> {
+    try {
+      const result = await chadApi('/login', {
+        method: 'POST',
+        body: {
+          username,
+          password,
+        },
+      })
+
+      setMe(result)
+
+      await navigateTo('/')
+    }
+    catch {}
+  }
+
+  async function register(username: string, password: string): Promise<void> {
+    try {
+      const result = await chadApi('/register', {
+        method: 'POST',
+        body: {
+          username,
+          password,
+        },
+      })
+
+      setMe(result)
+
+      await navigateTo('/')
+    }
+    catch {}
+  }
+
+  async function logout(): Promise<void> {
+    try {
+      await chadApi('/logout', { method: 'POST' })
+
+      setMe(undefined)
+
+      await navigateTo({ name: 'Login' })
+    }
+    catch {}
+  }
+
+  return {
+    me: readonly(me),
+    setMe,
+    login,
+    register,
+    logout,
+  }
+})

client/app/composables/use-clients.ts

@@ -2,26 +2,33 @@ import type { ChadClient, UpdatedClient } from '#shared/types'
 import { createGlobalState } from '@vueuse/core'
 
 export const useClients = createGlobalState(() => {
+  const auth = useAuth()
   const signaling = useSignaling()
   const toast = useToast()
 
   const clients = shallowRef<ChadClient[]>([])
 
+  const me = computed(() => clients.value.find(client => client.userId === auth.me.value?.id))
+
   watch(signaling.socket, (socket) => {
     if (!socket)
       return
 
-    socket.on('clientChanged', (clientId: ChadClient['id'], updatedClient: UpdatedClient) => {
+    socket.on('clientChanged', (clientId: ChadClient['socketId'], updatedClient: UpdatedClient) => {
       const client = getClient(clientId)
       updateClient(clientId, updatedClient)
 
-      if (updatedClient.username)
-        toast.add({ severity: 'info', summary: `${client?.username} is now ${updatedClient.username}`, closable: false, life: 1000 })
+      if (client && client.displayName !== updatedClient.displayName)
+        toast.add({ severity: 'info', summary: `${client.displayName} is now ${updatedClient.displayName}`, closable: false, life: 1000 })
+    })
+
+    socket.on('disconnect', () => {
+      clients.value = []
     })
   })
 
-  function getClient(clientId: ChadClient['id']) {
-    return clients.value.find(client => client.id === clientId)
+  function getClient(clientId: ChadClient['socketId']) {
+    return clients.value.find(client => client.socketId === clientId)
   }
 
   function addClient(...client: ChadClient[]) {
@@ -30,12 +37,12 @@ export const useClients = createGlobalState(() => {
     triggerRef(clients)
   }
 
-  function removeClient(clientId: ChadClient['id']) {
-    clients.value = clients.value.filter(client => client.id !== clientId)
+  function removeClient(clientId: ChadClient['socketId']) {
+    clients.value = clients.value.filter(client => client.socketId !== clientId)
   }
 
-  function updateClient(clientId: ChadClient['id'], updatedClient: UpdatedClient) {
-    const clientIdx = clients.value.findIndex(client => client.id === clientId)
+  function updateClient(clientId: ChadClient['socketId'], updatedClient: UpdatedClient) {
+    const clientIdx = clients.value.findIndex(client => client.socketId === clientId)
 
     if (clientIdx === -1)
       return
@@ -49,6 +56,7 @@ export const useClients = createGlobalState(() => {
   }
 
   return {
+    me,
     clients,
     getClient,
     addClient,

client/app/composables/use-mediasoup.ts

@@ -1,4 +1,4 @@
-import type { ChadClient, RemoteClient } from '#shared/types'
+import type { ChadClient } from '#shared/types'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
 import { usePreferences } from '~/composables/use-preferences'
@@ -23,6 +23,7 @@ export const useMediasoup = createSharedComposable(() => {
   const signaling = useSignaling()
   const { addClient, removeClient } = useClients()
   const preferences = usePreferences()
+  const { me } = useAuth()
 
   const device = shallowRef<mediasoupClient.Device>()
   const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
@@ -40,7 +41,7 @@ export const useMediasoup = createSharedComposable(() => {
     if (!socket)
       return
 
-    socket.on('connect', async () => {
+    socket.on('authenticated', async () => {
       if (!signaling.socket.value)
         return
 
@@ -123,9 +124,8 @@ export const useMediasoup = createSharedComposable(() => {
       }
 
       const joinedClients = (await signaling.socket.value.emitWithAck('join', {
-        username: preferences.username.value,
         rtpCapabilities: rtpCapabilities.value,
-      })).map(transformClient)
+      }))
 
       addClient(...joinedClients)
 
@@ -135,7 +135,7 @@ export const useMediasoup = createSharedComposable(() => {
     })
 
     socket.on('newPeer', (client) => {
-      addClient(transformClient(client))
+      addClient(client)
     })
 
     socket.on('peerClosed', (id) => {
@@ -188,15 +188,25 @@ export const useMediasoup = createSharedComposable(() => {
     )
 
     socket.on('disconnect', () => {
+      device.value = undefined
+      rtpCapabilities.value = undefined
+
       sendTransport.value?.close()
       sendTransport.value = undefined
 
       recvTransport.value?.close()
       recvTransport.value = undefined
+
+      micProducer.value = undefined
+      webcamProducer.value = undefined
+      shareProducer.value = undefined
+
+      consumers.value = new Map()
+      producers.value = new Map()
     })
   }, { immediate: true, flush: 'sync' })
 
-  function getClientConsumers(clientId: ChadClient['id']) {
+  function getClientConsumers(clientId: ChadClient['socketId']) {
     return consumers.value.values().filter(consumer => consumer.appData.clientId === clientId)
   }
 
@@ -298,27 +308,6 @@ export const useMediasoup = createSharedComposable(() => {
     signaling.connect()
   }
 
-  function transformClient(client: RemoteClient): ChadClient {
-    return {
-      ...client,
-      isMe: client.id === signaling.socket.value!.id,
-    }
-  }
-
-  function dispose() {
-    device.value = undefined
-    rtpCapabilities.value = undefined
-    sendTransport.value = undefined
-    recvTransport.value = undefined
-
-    micProducer.value = undefined
-    webcamProducer.value = undefined
-    shareProducer.value = undefined
-
-    consumers.value = new Map()
-    producers.value = new Map()
-  }
-
   return {
     init,
     consumers,

client/app/composables/use-preferences.ts

@@ -1,13 +1,10 @@
-import { createGlobalState, useLocalStorage } from '@vueuse/core'
+import { createGlobalState } from '@vueuse/core'
 
 export const usePreferences = createGlobalState(() => {
-  const username = useLocalStorage<string>('username', '')
-
   const audioDevice = shallowRef()
   const videoDevice = shallowRef()
 
   return {
-    username,
     audioDevice,
     videoDevice,
   }

client/app/composables/use-signaling.ts

@@ -4,6 +4,7 @@ import { io } from 'socket.io-client'
 
 export const useSignaling = createSharedComposable(() => {
   const toast = useToast()
+  const { me } = useAuth()
 
   const socket = shallowRef<Socket>()
 
@@ -44,8 +45,16 @@ export const useSignaling = createSharedComposable(() => {
       toast.add({ severity: 'error', summary: 'Disconnected', closable: false, life: 1000 })
   }, { immediate: true })
 
+  watch(me, (me) => {
+    if (!me) {
+      socket.value?.close()
+      socket.value = undefined
+    }
+  })
+
   onScopeDispose(() => {
     socket.value?.close()
+    socket.value = undefined
   })
 
   function connect() {
@@ -53,9 +62,13 @@ export const useSignaling = createSharedComposable(() => {
       return
 
     socket.value = io('https://api.koptilnya.xyz/webrtc', {
-      // socket.value = io('http://127.0.0.1:4000/webrtc', {
+    // socket.value = io('http://localhost:4000/webrtc', {
       path: '/chad/ws',
       transports: ['websocket'],
+      withCredentials: true,
+      auth: {
+        userId: me.value!.id,
+      },
     })
   }
 

client/app/index.d.ts

@@ -0,0 +1,7 @@
+declare module '#app' {
+  interface PageMeta {
+    auth?: boolean | 'guest'
+  }
+}
+
+export {}

client/app/layouts/auth.vue

@@ -1,5 +1,40 @@
 <template>
-  <div class="w-full h-full flex justify-center items-center p-3">
-    <slot />
+  <div class="w-full h-full flex p-3">
+    <img src="/chad-bg.webp" alt="Background" draggable="false" class="pointer-events-none absolute opacity-3 -z-1 block inset-0 object-contain w-full h-full">
+
+    <div v-auto-animate class="w-1/2 m-auto">
+      <div class="text-center">
+        <PrimeSelectButton v-model="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" />
+      </div>
+
+      <slot />
+    </div>
   </div>
 </template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+const options = computed(() => {
+  return [
+    {
+      label: 'Login',
+      routeName: 'Login',
+    },
+    {
+      label: 'Register',
+      routeName: 'Register',
+
+    },
+  ]
+})
+
+const tab = shallowRef(options.value.find(option => route.name === option.routeName))
+
+watch(tab, (tab) => {
+  if (!tab)
+    return
+
+  navigateTo({ name: tab.routeName })
+})
+</script>

client/app/layouts/default.vue

@@ -30,9 +30,8 @@
 </template>
 
 <script setup lang="ts">
-import { vAutoAnimate } from '@formkit/auto-animate'
-
 const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
+const { connect } = useSignaling()
 
 const route = useRoute()
 
@@ -43,4 +42,6 @@ const inPreferences = computed(() => {
 function onClickPreferences() {
   navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
 }
+
+connect()
 </script>

client/app/layouts/updater.vue

@@ -0,0 +1,3 @@
+<template>
+  UPDATER
+</template>

client/app/middleware/00.updater.global.ts

@@ -0,0 +1,41 @@
+import { relaunch } from '@tauri-apps/plugin-process'
+import { check } from '@tauri-apps/plugin-updater'
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  if (from?.name)
+    return
+
+  const update = await check()
+
+  console.log(update)
+
+  if (import.meta.dev)
+    return
+
+  if (update) {
+    console.log(
+      `found update ${update.version} from ${update.date} with notes ${update.body}`,
+    )
+    let downloaded = 0
+    let contentLength = 0
+    // alternatively we could also call update.download() and update.install() separately
+    await update.downloadAndInstall((event) => {
+      switch (event.event) {
+        case 'Started':
+          contentLength = event.data.contentLength ?? 0
+          console.log(`started downloading ${event.data.contentLength} bytes`)
+          break
+        case 'Progress':
+          downloaded += event.data.chunkLength
+          console.log(`downloaded ${downloaded} from ${contentLength}`)
+          break
+        case 'Finished':
+          console.log('download finished')
+          break
+      }
+    })
+
+    console.log('update installed')
+    await relaunch()
+  }
+})

client/app/middleware/01.auth.global.ts

@@ -0,0 +1,20 @@
+import chadApi from '#shared/chad-api'
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  const { me, setMe } = useAuth()
+
+  if (!me.value && !from?.name) {
+    try {
+      setMe(await chadApi('/me'))
+    }
+    catch {
+      if (to.meta.auth !== 'guest') {
+        return navigateTo({ name: 'Login' })
+      }
+    }
+  }
+
+  if (me.value && to.meta.auth === 'guest') {
+    return navigateTo('/')
+  }
+})

client/app/middleware/01.build-info.global.ts

@@ -1,5 +0,0 @@
-export default defineNuxtRouteMiddleware((to, from) => {
-  console.group('Build Info')
-  console.log(`COMMIT_SHA: ${__COMMIT_SHA__}`)
-  console.groupEnd()
-})

client/app/middleware/02.auth.global.ts

@@ -1,18 +0,0 @@
-export default defineNuxtRouteMiddleware((to, from) => {
-  const { username } = usePreferences()
-
-  if (!username.value && to.name !== 'Login') {
-    return navigateTo({ name: 'Login' })
-  }
-
-  if (!username.value)
-    return
-
-  const { init } = useMediasoup()
-
-  init()
-
-  if (to.path === 'Login') {
-    return navigateTo('/')
-  }
-})

client/app/pages/login.vue

@@ -1,13 +1,30 @@
 <template>
-  <PrimeCard class="w-2/5">
+  <PrimeCard>
     <template #content>
-      <form class="flex flex-col gap-3" @submit.prevent="submit">
-        <PrimeFloatLabel variant="on">
-          <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
-          <label for="username">Username</label>
-        </PrimeFloatLabel>
+      <form @submit.prevent="submit">
+        <div class="flex flex-col gap-3">
+          <PrimeFloatLabel variant="on">
+            <PrimeInputText id="username" v-model="username" size="large" autocomplete="off" fluid autofocus />
+            <label for="username">Username</label>
+          </PrimeFloatLabel>
 
-        <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!localUsername" type="submit" />
+          <PrimeFloatLabel variant="on">
+            <PrimePassword id="password" v-model="password" size="large" autocomplete="off" toggle-mask fluid :feedback="false" />
+            <label for="password">Password</label>
+          </PrimeFloatLabel>
+        </div>
+
+        <PrimeButton
+          class="mt-6"
+          size="large"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          label="Let's go"
+          :loading="submitting"
+          :disabled="!valid"
+          type="submit"
+          fluid
+        />
       </form>
     </template>
   </PrimeCard>
@@ -17,18 +34,34 @@
 definePageMeta({
   name: 'Login',
   layout: 'auth',
+  auth: 'guest',
 })
 
-const { username } = usePreferences()
+const { login } = useAuth()
 
-const localUsername = ref<typeof username.value>()
+const submitting = ref(false)
+
+const username = ref<string>()
+const password = ref<string>()
+
+const valid = computed(() => {
+  if (!username.value)
+    return false
+
+  if (!password.value)
+    return false
+
+  return true
+})
 
 async function submit() {
-  if (!localUsername.value)
+  if (!valid.value)
     return
 
-  username.value = localUsername.value
+  submitting.value = true
 
-  await navigateTo('/')
+  await login(username.value!, password.value!)
+
+  submitting.value = false
 }
 </script>

client/app/pages/preferences.vue

@@ -4,12 +4,16 @@
 
     <form class="flex flex-col gap-3 p-3" @submit.prevent="save">
       <PrimeFloatLabel variant="on">
-        <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
+        <PrimeInputText id="username" v-model="displayName" size="large" fluid autocomplete="off" />
         <label for="username">Username</label>
       </PrimeFloatLabel>
 
-      <PrimeButton label="Save" type="submit" :disabled="!localUsername || localUsername === username" />
+      <PrimeButton label="Save" type="submit" :disabled="!valid" />
     </form>
+
+    <div class="p-3">
+      <PrimeButton label="Logout" fluid severity="danger" @click="logout" />
+    </div>
   </div>
 </template>
 
@@ -18,22 +22,33 @@ definePageMeta({
   name: 'Preferences',
 })
 
+const { me, setMe, logout } = useAuth()
+
 const signaling = useSignaling()
-const { username } = usePreferences()
 const toast = useToast()
 
-const localUsername = ref(username.value)
+const displayName = ref(me.value?.displayName || '')
+
+const valid = computed(() => {
+  if (!displayName.value || !me.value)
+    return false
+
+  if (displayName.value === me.value.displayName)
+    return false
+
+  return true
+})
 
 async function save() {
-  if (!localUsername.value || localUsername.value === username.value)
+  if (!valid.value)
     return
 
-  username.value = localUsername.value
-
-  await signaling.socket.value?.emitWithAck('updateClient', {
-    username: username.value,
+  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
+    displayName: displayName.value,
   })
 
+  setMe({ ...me.value, displayName: updatedMe.displayName })
+
   toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
 }
 </script>

client/app/pages/register.vue

@@ -0,0 +1,74 @@
+<template>
+  <PrimeCard>
+    <template #content>
+      <form @submit.prevent="submit">
+        <div class="flex flex-col gap-3">
+          <PrimeFloatLabel variant="on">
+            <PrimeInputText id="username" v-model="username" size="large" autocomplete="off" fluid autofocus />
+            <label for="username">Username</label>
+          </PrimeFloatLabel>
+
+          <PrimeFloatLabel variant="on">
+            <PrimePassword id="password" v-model="password" size="large" autocomplete="off" toggle-mask fluid :feedback="false" />
+            <label for="password">Password</label>
+          </PrimeFloatLabel>
+
+          <PrimeFloatLabel variant="on">
+            <PrimePassword id="repeatPassword" v-model="repeatPassword" size="large" autocomplete="off" toggle-mask fluid :feedback="false" />
+            <label for="repeatPassword">Repeat password</label>
+          </PrimeFloatLabel>
+        </div>
+
+        <PrimeButton
+          class="mt-6"
+          size="large"
+          label="Register"
+          :loading="submitting"
+          :disabled="!valid"
+          type="submit"
+          fluid
+        />
+      </form>
+    </template>
+  </PrimeCard>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Register',
+  layout: 'auth',
+  auth: 'guest',
+})
+
+const { register } = useAuth()
+
+const submitting = ref(false)
+
+const username = ref<string>()
+const password = ref<string>()
+const repeatPassword = ref<string>()
+
+const valid = computed(() => {
+  if (!username.value)
+    return false
+
+  if (!password.value)
+    return false
+
+  if (repeatPassword.value !== password.value)
+    return false
+
+  return true
+})
+
+async function submit() {
+  if (!valid.value)
+    return
+
+  submitting.value = true
+
+  await register(username.value!, password.value!)
+
+  submitting.value = false
+}
+</script>