色々

packages/frontend/src/Layout.vue

@@ -7,21 +7,42 @@
 
   <div class="modals-container" />
 
-  <main class="layout" v-if="serverInfo.success && account.success">
+  <main class="layout">
     <div class="left-menu">
-      <div :class='$route.path === "/" ? "isActive" : ""'>
-        <img :src="serverInfo.icon" />
-      </div>
+      <RouterLink
+        to="/"
+        :class='$route.path === "/"
+          ? "isActive"
+          : ""'
+      >
+        <img :src='"icon" in serverInfo
+          ? serverInfo.icon
+          : "/assets/lynqchat.svg"'
+        />
+      </RouterLink>
 
-      <div :class='$route.path === "/home" ? "isActive" : ""'>
-        <Icon icon="material-symbols:home-rounded" />
-      </div>
+      <RouterLink
+        v-for="community of communitys"
+        :to="`/community/${community.id}`"
+        :class='$route.path === `/community/${community.id}`
+          ? "isActive"
+          : ""'
+      >
+        <img
+          v-if="community.icon"
+          :src="community.icon"
+        />
+        <Icon
+          v-else
+          icon="material-symbols:groups-rounded"
+        />
+      </RouterLink>
     </div>
 
     <div class="content-main">
       <div class="content-header">
         {{
-          $route.meta.title
+          title
             ?? (serverInfo.success
               ? serverInfo.name
               : null)
@@ -61,7 +82,8 @@ main.layout {
   -webkit-user-select: none;
 }
 
-.left-menu div {
+.left-menu a {
+  display: block;
   position: relative;
   z-index: 0;
   border-radius: 0.5rem;
@@ -71,19 +93,20 @@ main.layout {
   transition: background-color 200ms ease-out;
 }
 
-.left-menu div * {
+.left-menu a * {
   font-size: 3rem;
   padding: 0.25rem;
   border-radius: 0.5rem;
   width: 3rem;
   height: 3rem;
+  color: var(--text-color);
   display: block;
   overflow: hidden;
   object-fit: contain;
   box-sizing: border-box;
 }
 
-.left-menu div.isActive::before {
+.left-menu a.isActive::before {
   content: "";
   display: block;
   position: absolute;
@@ -96,8 +119,8 @@ main.layout {
   background-color: var(--text-color);
 }
 
-.left-menu div:hover,
-.left-menu div.isActive {
+.left-menu a:hover,
+.left-menu a.isActive {
   background-color: var(--border-color);
 }
 
@@ -122,6 +145,7 @@ main.layout {
 }
 
 .route-main {
+  display: flex;
   padding: 1.25rem;
   padding-bottom: 0;
   overflow: scroll;
@@ -156,16 +180,25 @@ main.layout {
 </style>
 
 <script lang="ts" setup>
-import { RouterView, useRouter } from "vue-router";
-import routerStatus from "@/lib/router";
+import { RouterView, RouterLink, useRouter, useRoute } from "vue-router";
+import routerStatus, { title } from "@/lib/router";
 import { Icon } from "@iconify/vue";
 import Progress from "@/components/Progress.vue";
-import { account, serverInfo } from "@/lib/account";
+import { communitys, serverInfo } from "@/lib/account";
+import { onBeforeUnmount, onMounted, watch } from "vue";
+import { createModal } from "@/lib/modal";
+import ErrorModal from "@/components/Modal/Error.vue";
 
 const router = useRouter();
+const route = useRoute();
+
+watch(route, () => {
+  if (typeof route.meta.title === "string")
+    title.value = route.meta.title;
+});
 
 if (!serverInfo.value.success) {
-  throw new Error();
+  throw new Error("サーバー情報の取得に失敗しました。");
 }
 
 if (!serverInfo.value.isInitialized) {
@@ -175,4 +208,45 @@ if (!serverInfo.value.isInitialized) {
 if (!serverInfo.value.isFirstAdminExists) {
   router.replace("/setup/create-admin");
 }
+
+function handleError(event: ErrorEvent | PromiseRejectionEvent) {
+  let content = event instanceof PromiseRejectionEvent
+    ? event.reason
+    : event;
+
+  if (content instanceof Error) {
+    content = content.message;
+  }
+
+  createModal({
+    component: ErrorModal,
+    props: {
+      error: content ?? "不明なエラー",
+      canClose: false,
+    },
+  });
+}
+
+onMounted(async () => {
+  window.addEventListener("error", handleError);
+  window.addEventListener("unhandledrejection", handleError);
+
+  if ("serviceWorker" in navigator) {
+    const swFile = import.meta.env.MODE === "production"
+      ? "/sw.js"
+      : "/dev-sw.js?dev-sw";
+    
+    navigator.serviceWorker.register(swFile, {
+      type: import.meta.env.MODE === "production"
+        ? "classic"
+        : "module",
+      scope: "/",
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("error", handleError);
+  window.removeEventListener("unhandledrejection", handleError);
+});
 </script>

packages/frontend/src/components/Modal/GoHomeError.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="modal">
+    <Icon
+      icon="line-md:close-circle"
+      class="error-badge"
+      width="4rem"
+    />
+
+    <span class="modal-title">問題が発生しました</span>
+
+    <p v-html="error" />
+
+    <Button
+      name="ホームに戻る"
+      color="accent"
+      @click='$emit("PleaseClose")'
+    />
+  </div>
+</template>
+
+<style scoped>
+.modal {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.modal-title {
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.error-badge {
+  color: var(--error-color);
+}
+</style>
+
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+import Button from "@/components/Button.vue";
+
+defineProps<{
+  error: any;
+}>();
+</script>

packages/frontend/src/components/Textarea.vue

@@ -3,6 +3,7 @@
     <label :for="id">{{ label }}</label>
 
     <textarea
+      autocomplete="off"
       v-model="model"
       v-bind="$attrs"
       :class="$attrs.class"

packages/frontend/src/global.css

@@ -66,6 +66,6 @@ label {
   padding: 3rem 6rem;
   width: fit-content;
   height: fit-content;
-  max-width: 90dvw;
+  max-width: 70dvw;
   max-height: 90dvh;
 }

packages/frontend/src/lib/account.ts

@@ -1,18 +1,33 @@
 import client, { initClient } from "@/lib/client";
 import type ApiMap from "lynqchat-js/1.0.0-alpha.0/map";
 import { ref } from "vue";
-/*
-[TODO]
-キャッシュの類を全部account.tsに詰め込むのをやめる
-*/
 
 await initClient();
 
 export let serverInfo = ref<ApiMap["server-info"]["response"]>(await client.value.request("server-info"));
 export let account = ref<ApiMap["me"]["response"]>(await client.value.request("me"));
 
-export let channels = ref<Extract<ApiMap["channel/list"]["response"], { channels: any }>["channels"]>([]);
-export let lastLoadedChannel = ref<string>();
+let communitys = ref<Extract<ApiMap["community/list"]["response"], { communitys: any }>["communitys"]>([]);
+let lastLoadedCommunity = ref<string>();
+export const reloadCommunitys = async () => {
+  lastLoadedCommunity.value = undefined;
+
+  const response = await client.value.request("community/list");
+
+  if (!response.success)
+    return;
+
+  communitys.value = response.communitys;
+  if (response.communitys.length > 0) {
+    lastLoadedCommunity.value = response.communitys[response.communitys.length - 1]?.id;
+  }
+  return;
+}
+await reloadCommunitys();
+export {
+  communitys,
+  lastLoadedCommunity,
+}
 
 export const reloadServerInfo = async () => {
   serverInfo.value = await client.value.request("server-info");
@@ -24,34 +39,18 @@ export const reloadAccount = async () => {
   account.value = await client.value.request("me");
 }
 
-export const initChannels = async () => {
-  lastLoadedChannel.value = undefined;
-
-  const response = await client.value.request("channel/list");
-
-  if (!response.success) {
-    return false;
-  }
-
-  channels.value = response.channels;
-  if (response.channels.length > 0) {
-    lastLoadedChannel.value = response.channels[response.channels.length - 1]?.id;
-  }
-  return true;
-}
-
-export const loadChannels = async () => {
-  const response = await client.value.request("channel/list", lastLoadedChannel.value ? {
-    since: lastLoadedChannel.value,
+export const loadCommunitys = async () => {
+  const response = await client.value.request("community/list", lastLoadedCommunity.value ? {
+    since: lastLoadedCommunity.value,
   } : undefined);
 
   if (!response.success) {
     return false;
   }
 
-  channels.value = channels.value.concat(response.channels);
-  if (response.channels.length > 0) {
-    lastLoadedChannel.value = response.channels[response.channels.length - 1]?.id;
+  communitys.value = communitys.value.concat(response.communitys);
+  if (response.communitys.length > 0) {
+    lastLoadedCommunity.value = response.communitys[response.communitys.length - 1]?.id;
   }
   return true;
 }

packages/frontend/src/lib/db.ts

@@ -1,6 +1,6 @@
 import Dexie, { type EntityTable } from "dexie";
 
-export interface Settings {
+interface Settings {
   id: number;
   name: string;
   value: string;

packages/frontend/src/lib/router.ts

@@ -1,4 +1,4 @@
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 
 const routerStatus = reactive<{
   isLoad: boolean;
@@ -6,4 +6,6 @@ const routerStatus = reactive<{
   isLoad: false,
 });
 
-export default routerStatus;
+export default routerStatus;
+
+export const title = ref<string | undefined>(undefined);

packages/frontend/src/lib/sw.ts

@@ -0,0 +1,27 @@
+const swSelf = globalThis as unknown as ServiceWorkerGlobalScope;
+
+swSelf.addEventListener("install", (event) => {
+  event.waitUntil(swSelf.skipWaiting());
+});
+
+swSelf.addEventListener("activate", (event) => {
+  event.waitUntil(swSelf.clients.claim());
+});
+
+swSelf.addEventListener("fetch", (event) => {
+  const request = event.request;
+
+  if (request.url.indexOf("http") !== 0)
+    return;
+  
+  event.respondWith((async () => {
+    try {
+      const res = await fetch(request);
+      return res;
+    } catch (err) {
+      return new Response("Network error", {
+        status: 504,
+      });
+    }
+  })());
+});

packages/frontend/src/main.ts

@@ -46,6 +46,13 @@ const router = createRouter({
       },
       component: () => import("@/routes/signin.vue"),
     },
+    {
+      path: "/community/:id",
+      meta: {
+        title: "コミュニティ",
+      },
+      component: () => import("@/routes/community/index.vue"),
+    },
     {
       path: "/:NotFound(.*)*",
       meta: {
@@ -55,11 +62,19 @@ const router = createRouter({
     },
   ],
 });
-router.beforeEach(() => {
+router.beforeEach((to, from) => {
+  if (to.path === from.path)
+    return false;
+  
   routerStatus.isLoad = true;
   return;
 });
-router.afterEach((to) => {
+router.afterEach((to, from) => {
+  if (to.path === from.path) {
+    routerStatus.isLoad = false;
+    return false;
+  }
+
   const title = to.meta.title;
 
   let serverName = "LynqChat";

packages/frontend/src/routes/community/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <Progress
+    v-if="isProcessing"
+    :size="24"
+    class="processing-progress"
+  />
+</template>
+
+<style scoped>
+.processing-progress {
+  margin: auto;
+}
+</style>
+
+<script lang="ts" setup>
+import { useRoute, useRouter } from "vue-router";
+import { account, serverInfo } from "@/lib/account";
+import client from "@/lib/client";
+import { createModal } from "@/lib/modal";
+import GoHomeError from "@/components/Modal/GoHomeError.vue";
+import { ref } from "vue";
+import Progress from "@/components/Progress.vue";
+import { title } from "@/lib/router";
+
+const route = useRoute();
+const router = useRouter();
+
+const isProcessing = ref<boolean>(false);
+
+if (!serverInfo.value.success) {
+  throw new Error("サーバー情報の取得に失敗しました。");
+}
+
+if (!serverInfo.value.isInitialized) {
+  router.replace("/setup/initialization");
+}
+
+if (!account.value.success) {
+  switch (account.value.error.bad) {
+    case "client":
+      router.replace("/signin");
+      break;
+    default:
+      throw new Error("アカウント情報の取得に失敗しました。");
+  }
+}
+
+(async () => {
+  isProcessing.value = true;
+
+  if (!serverInfo.value.success) {
+    throw new Error("サーバー情報の取得に失敗しました。");
+  }
+
+  const communityId = route.params.id;
+  if (typeof communityId !== "string") {
+    isProcessing.value = false;
+    createModal({
+      component: GoHomeError,
+      onClose: async () => await router.push("/"),
+      props: {
+        error: "不正なアクセスです。",
+      },
+    });
+    return;
+  }
+
+  const community = await client.value.request("community/get", {
+    id: communityId,
+  });
+
+  if (!community.success) {
+    isProcessing.value = false;
+    createModal({
+      component: GoHomeError,
+      onClose: async () => await router.push("/"),
+      props: {
+        error: "コミュニティが取得できませんでした。",
+      },
+    });
+    return;
+  }
+
+  document.title = `${community.community.name} | ${serverInfo.value.name}`;
+  title.value = community.community.name;
+
+  isProcessing.value = false;
+})();
+</script>

packages/frontend/src/routes/index.vue

@@ -8,6 +8,12 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 if (!account.value.success) {
-  router.replace("/signin");
+  switch (account.value.error.bad) {
+    case "client":
+      router.replace("/signin");
+      break;
+    default:
+      throw new Error("アカウント情報の取得に失敗しました。");
+  }
 }
 </script>

packages/frontend/src/routes/setup/create-admin.vue

@@ -10,7 +10,7 @@
   <form novalidate @submit="submit">
     <Input
       label="ユーザーID"
-      autocomplete="off"
+      autocomplete="userid"
       v-model="userid"
     >
       <span
@@ -48,6 +48,13 @@
         <Icon icon="material-symbols:error-outline-rounded" />
         {{ passwordIssue.message }}
       </span>
+
+      <span
+        class="password-strength"
+        v-if="passwordStrength.message"
+      >
+        {{ passwordStrength.message }}
+      </span>
     </InputPassword>
 
     <Button
@@ -71,6 +78,7 @@ form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  max-width: 30rem;
 }
 
 .input-issue {
@@ -96,9 +104,10 @@ import Button from "@/components/Button.vue";
 import { ref } from "vue";
 import z from "zod/v3";
 import { computed } from "vue";
+import zxcvbn from "zxcvbn";
 import { createModal } from "@/lib/modal";
 import Loading from "@/components/Modal/Loading.vue";
-import Error from "@/components/Modal/Error.vue";
+import ErrorModal from "@/components/Modal/Error.vue";
 import Success from "@/components/Modal/Success.vue";
 import InputPassword from "@/components/InputPassword.vue";
 import client from "@/lib/client";
@@ -109,7 +118,7 @@ const router = useRouter();
 const isProcessing = ref<boolean>(false);
 
 if (!serverInfo.value.success) {
-  throw new Error();
+  throw new Error("サーバー情報の取得に失敗しました。");
 }
 
 if (serverInfo.value.isFirstAdminExists) {
@@ -127,6 +136,21 @@ const useridIssue = computed(() => getIssueFromPath("userid", result.value));
 const emailIssue = computed(() => getIssueFromPath("email", result.value));
 const passwordIssue = computed(() => getIssueFromPath("password", result.value));
 
+const passwordScores = [
+  "危険なパスワード",
+  "推測可能なパスワード",
+  "推測しやすいパスワード",
+  "安全なパスワード",
+  "強力なパスワード",
+];
+const passwordStrength = computed(() => {
+  const evaluation = zxcvbn(password.value);
+  return {
+    message: passwordScores[evaluation.score],
+    score: evaluation.score,
+  }
+});
+
 const EmailRegex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:([0-9]{1,3}\.){3}[0-9]{1,3})\])$/i;
 const schema = z.object({
   userid: z.string({ message: "文字列で入力してください。" })
@@ -160,7 +184,7 @@ const submit = async (e: Event) => {
     closeLoadingModal();
 
     return createModal({
-      component: Error,
+      component: ErrorModal,
       onClose: () => isProcessing.value = false,
       props: {
         error: `不正な入力です。<br>${messages.join("<br>")}`,
@@ -175,7 +199,7 @@ const submit = async (e: Event) => {
     closeLoadingModal();
 
     return createModal({
-      component: Error,
+      component: ErrorModal,
       onClose: () => isProcessing.value = false,
       props: {
         error: response.error.message,

packages/frontend/src/routes/setup/initialization.vue

@@ -28,7 +28,6 @@
 
     <Textarea
       label="サーバー説明"
-      autocomplete="on"
       v-model="description"
     >
       <span
@@ -97,7 +96,7 @@ import z from "zod/v3";
 import { computed } from "vue";
 import { createModal } from "@/lib/modal";
 import Loading from "@/components/Modal/Loading.vue";
-import Error from "@/components/Modal/Error.vue";
+import ErrorModal from "@/components/Modal/Error.vue";
 import Success from "@/components/Modal/Success.vue";
 import client from "@/lib/client";
 import { getIssueFromPath } from "@/lib/validation";
@@ -108,7 +107,7 @@ const router = useRouter();
 const isProcessing = ref<boolean>(false);
 
 if (!serverInfo.value.success) {
-  throw new Error();
+  throw new Error("サーバー情報の取得に失敗しました。");
 }
 
 if (serverInfo.value.isInitialized) {
@@ -154,7 +153,7 @@ const submit = async (e: Event) => {
     closeLoadingModal();
 
     return createModal({
-      component: Error,
+      component: ErrorModal,
       onClose: () => isProcessing.value = false,
       props: {
         error: `不正な入力です。<br>${messages.join("<br>")}`,
@@ -169,7 +168,7 @@ const submit = async (e: Event) => {
     closeLoadingModal();
 
     return createModal({
-      component: Error,
+      component: ErrorModal,
       onClose: () => isProcessing.value = false,
       props: {
         error: response.error.message,

packages/frontend/src/routes/signin.vue

@@ -62,11 +62,12 @@ form {
 import Button from "@/components/Button.vue";
 import Input from "@/components/Input.vue";
 import InputPassword from "@/components/InputPassword.vue";
+import ErrorModal from "@/components/Modal/Error.vue";
 import Loading from "@/components/Modal/Loading.vue";
 import Success from "@/components/Modal/Success.vue";
-import { account, reloadAccount, serverInfo } from "@/lib/account";
+import { account, reloadAccount, reloadCommunitys, serverInfo } from "@/lib/account";
 import client from "@/lib/client";
-import Database from "@/lib/db";
+import Database, { getByIndex } from "@/lib/db";
 import { createModal } from "@/lib/modal";
 import { getIssueFromPath } from "@/lib/validation";
 import { Icon } from "@iconify/vue";
@@ -82,13 +83,21 @@ if (account.value.success) {
 }
 
 if (!serverInfo.value.success) {
-  throw new Error();
+  throw new Error("サーバー情報の取得に失敗しました。");
 }
 
 if (!serverInfo.value.isInitialized) {
   router.replace("/setup/initialization");
 }
 
+(async () => {
+  const db = new Database();
+  const tokenRow = await getByIndex(db.settings, "name", "token");
+  if (tokenRow) {
+    await db.settings.delete(tokenRow.id);
+  }
+})();
+
 const userid = ref<string>("");
 const password = ref<string>("");
 const useridIssue = computed(() => getIssueFromPath("userid", result.value));
@@ -121,7 +130,7 @@ const submit = async (e: Event) => {
     closeLoadingModal();
 
     return createModal({
-      component: Error,
+      component: ErrorModal,
       onClose: () => isProcessing.value = false,
       props: {
         error: `不正な入力です。<br>${messages.join("<br>")}`,
@@ -136,7 +145,7 @@ const submit = async (e: Event) => {
     closeLoadingModal();
 
     return createModal({
-      component: Error,
+      component: ErrorModal,
       onClose: () => isProcessing.value = false,
       props: {
         error: response.error.message,
@@ -150,7 +159,9 @@ const submit = async (e: Event) => {
     name: "token",
     value: response.token,
   });
+
   await reloadAccount();
+  await reloadCommunitys();
 
   closeLoadingModal();