Merge pull request #1233 from AtCoder-NoviSteps/#1232

✨ Ensure easy access to guest account (#1232)

Author: KATO-Hiro

README.md

@@ -70,7 +70,7 @@
 ## 使い方
 
 1. (初回のみ) ユーザ名とパスワードを入力して、アカウントを作成します。
-2. ログインします。お試し用のアカウント (ユーザ名: guest、パスワード: HelloGuest) を利用することもできます。
+2. ログインします。お試し用のアカウント (ユーザ名: guest、パスワード: Hell0Guest) を利用することもできます。
 3. 問題一覧で、グレードおよび問題を選び、回答欄の「更新」をクリックもしくはタップします。
 4. 該当する回答状況 (デフォルトは「未挑戦」)を選択し、「回答を更新」ボタンを押します。
 

src/lib/components/AuthForm.svelte

@@ -2,17 +2,20 @@
   import { Card, Button, Label, Input } from 'flowbite-svelte';
 
   // 必要なコンポーネントだけを読み込んで、コンパイルを時間を短縮
-  // モジュールは読み込めているのに以下のエラーが発生するため、やむなく@ts-ignoreを使用
-  // Cannot find module 'flowbite-svelte-icons/xxx.svelte' or its corresponding type declarations.ts(2307)
-  // @ts-ignore
+  import Checkbox from 'flowbite-svelte/Checkbox.svelte';
   import UserOutlineSolid from 'flowbite-svelte-icons/UserCircleSolid.svelte';
-  // @ts-ignore
   import EyeOutline from 'flowbite-svelte-icons/EyeOutline.svelte';
-  // @ts-ignore
   import EyeSlashOutline from 'flowbite-svelte-icons/EyeSlashOutline.svelte';
 
   import MessageHelperWrapper from '$lib/components/MessageHelperWrapper.svelte';
 
+  import {
+    GUEST_USER_NAME,
+    GUEST_USER_PASSWORD,
+    // GUEST_USER_PASSWORD_FOR_LOCAL,
+    LOGIN_LABEL,
+  } from '$lib/constants/forms';
+
   // FIXME: 構造体に相当するものを利用した方が拡張・修正がしやすくなるかもしれせまん
   export let formProperties;
   export let title: string;
@@ -23,11 +26,26 @@
 
   const { form, message, errors, submitting, enhance } = formProperties;
 
+  let isGuest: boolean = false;
+
+  $: if (isGuest) {
+    $form.username = GUEST_USER_NAME;
+
+    // HACK: ローカル環境のパスワードは一時的に書き換えて対応している
+    //
+    // See:
+    // src/lib/constants/forms.ts
+    // $form.password = GUEST_USER_PASSWORD_FOR_LOCAL;
+    $form.password = GUEST_USER_PASSWORD;
+  } else {
+    $form.username = '';
+    $form.password = '';
+  }
+
   const UNFOCUSABLE = -1;
   let showPassword = false;
 </script>
 
-<!-- TODO: ゲストユーザ(お試し用)としてログインできるようにする -->
 <!-- FIXME: コンポーネントが巨大になってきたと思われるので、分割しましょう -->
 <!-- TODO: containerのデフォルト値を設定できないか? -->
 <!-- See: -->
@@ -40,6 +58,10 @@
 
       <MessageHelperWrapper message={$message} />
 
+      {#if title === LOGIN_LABEL}
+        <Checkbox bind:checked={isGuest}>お試し用のアカウントを使う</Checkbox>
+      {/if}
+
       <!-- User name -->
       <div class="space-y-2">
         <Label for="username-in-auth-form">

src/lib/constants/forms.ts

@@ -1,2 +1,10 @@
 export const CREATE_ACCOUNT_LABEL: string = 'アカウントを作成';
 export const LOGIN_LABEL: string = 'ログイン';
+
+export const GUEST_USER_NAME: string = 'guest';
+
+// Note: 2024年9月時点では、staging環境、production環境を優先
+//       ローカル環境では書き換えて対応
+// TODO: ローカル環境とstaging環境、production環境では値が異なるため、切り替えられるようにする
+export const GUEST_USER_PASSWORD_FOR_LOCAL: string = 'Ch0kuda1';
+export const GUEST_USER_PASSWORD: string = 'Hell0Guest';

src/routes/about/+page.svelte

@@ -87,7 +87,7 @@
     <List tag="ol" class="text-gray-800 dark:text-gray-300 ml-6 space-y-1">
       <Li>(初回のみ) ユーザ名とパスワードを入力して、アカウントを作成します。</Li>
       <Li>
-        ログインします。お試し用のアカウント (ユーザ名: guest、パスワード: HelloGuest)
+        ログインします。お試し用のアカウント (ユーザ名: guest、パスワード: Hell0Guest)
         を利用することもできます。
       </Li>
       <Li>