feat: new login ui

client/public/locales/en/translation.json

@@ -1,5 +1,8 @@
 {
-  "about": "About",
+  "about": {
+    "notfound": "Set the article alias to `about` to create an about page",
+    "title": "About"
+  },
   "alert": "Alert",
   "alias": "Alias",
   "article": {
@@ -70,6 +73,11 @@
   "draft": "Draft",
   "draft_bin": "Draft Bin",
   "edit": "Edit",
+  "error": {
+    "api_url": "API_URL in Pages environment variables should be the Worker address. Please check if API_URL in Pages environment variables is correct.",
+    "api_url_slash": "API_URL in Pages environment variables should be the Worker address. Please check if API_URL in Pages environment variables is correct and ensure API_URL does not end with a slash (/).",
+    "github_callback": "GitHub OAuth callback URL should be `https://<Worker address>/user/github/callback`. Please check if the GitHub OAuth callback URL is correct."
+  },
   "feed_card": {
     "published$time": "Published at {{time}}",
     "updated$time": "Updated at {{time}}"
@@ -101,9 +109,16 @@
   },
   "listed": "Listed in articles",
   "login": {
-    "required": "Login required"
+    "oauth_only": "Please log in to continue",
+    "password": {
+      "placeholder": "Please enter your password"
+    },
+    "required": "Please log in to continue",
+    "title": "Login",
+    "username": {
+      "placeholder": "Please enter your username"
+    }
   },
-  "logout": "Logout",
   "next": "Next Page",
   "preview": "Preview",
   "previous": "Previous Page",
@@ -206,4 +221,4 @@
   },
   "writing": "Writing",
   "year$year": "{{year}}"
-}
+}

client/public/locales/ja/translation.json

@@ -1,5 +1,8 @@
 {
-  "about": "概要",
+  "about": {
+    "notfound": "About ページを作成するには、記事のエイリアスを about に設定します",
+    "title": "概要"
+  },
   "alert": "警告",
   "alias": "エイリアス",
   "article": {
@@ -70,6 +73,11 @@
   "draft": "下書き",
   "draft_bin": "下書き",
   "edit": "編集",
+  "error": {
+    "api_url": "Pages 環境変数のAPI_URLはWorkerアドレスである必要があります。Pages環境変数のAPI_URLが正しいか確認してください。",
+    "api_url_slash": "Pages 環境変数のAPI_URLはWorkerアドレスである必要があります。Pages環境変数のAPI_URLが正しいか、またAPI_URLの末尾にスラッシュ（/）がないか確認してください。",
+    "github_callback": "GitHub OAuthコールバックURLは`https://<Workerアドレス>/user/github/callback`である必要があります。GitHub OAuthコールバックURLが正しいか確認してください。"
+  },
   "feed_card": {
     "published$time": "{{time}} に公開",
     "updated$time": "{{time}} に更新"
@@ -101,9 +109,16 @@
   },
   "listed": "記事にリスト",
   "login": {
-    "required": "ログインが必要です"
+    "oauth_only": "続行するにはログインしてください",
+    "password": {
+      "placeholder": "パスワードを入力してください"
+    },
+    "required": "続行するにはログインしてください",
+    "title": "ログイン",
+    "username": {
+      "placeholder": "ユーザー名を入力してください"
+    }
   },
-  "logout": "ログアウト",
   "next": "次のページ",
   "preview": "プレビュー",
   "previous": "前のページ",
@@ -206,4 +221,4 @@
   },
   "writing": "執筆",
   "year$year": "{{year}} 年"
-}
+}

client/public/locales/zh/translation.json

@@ -1,5 +1,8 @@
 {
-  "about": "关于",
+  "about": {
+    "notfound": "将文章别名设置为 about 可以创建关于页面",
+    "title": "关于"
+  },
   "alert": "提示",
   "alias": "别名",
   "article": {
@@ -70,6 +73,11 @@
   "draft": "草稿",
   "draft_bin": "草稿箱",
   "edit": "编辑",
+  "error": {
+    "api_url": "Pages 环境变量中 API_URL 应为 Worker 地址，请检查 Pages 环境变量中 API_URL 是否正确",
+    "api_url_slash": "Pages 环境变量中 API_URL 应为 Worker 地址，请检查 Pages 环境变量中 API_URL 是否正确，且 API_URL 末尾不能有 /",
+    "github_callback": "GitHub OAuth 回调地址应为 `https://<Worker 地址>/user/github/callback，请检查 GitHub OAuth 回调地址是否正确"
+  },
   "feed_card": {
     "published$time": "{{time}} 发布",
     "updated$time": "{{time}} 更新"
@@ -101,9 +109,16 @@
   },
   "listed": "列出在文章中",
   "login": {
-    "required": "需要登录"
+    "oauth_only": "请登录后继续",
+    "password": {
+      "placeholder": "请输入密码"
+    },
+    "required": "请登录后继续",
+    "title": "登录",
+    "username": {
+      "placeholder": "请输入用户名"
+    }
   },
-  "logout": "退出登录",
   "next": "下一页",
   "preview": "预览",
   "previous": "上一页",

client/src/App.tsx

@@ -21,9 +21,12 @@ import { Profile, ProfileContext } from './state/profile'
 import { headersWithAuth } from './utils/auth'
 import { tryInt } from './utils/int'
 import { SearchPage } from './page/search.tsx'
+import { Tips, TipsPage } from './components/tips.tsx'
+import { useTranslation } from 'react-i18next'
 
 function App() {
   const ref = useRef(false)
+  const { t } = useTranslation()
   const [profile, setProfile] = useState<Profile | undefined>()
   const [config, setConfig] = useState<ConfigWrapper>(new ConfigWrapper({}, new Map()))
   useEffect(() => {
@@ -133,6 +136,30 @@ function App() {
               }}
             </RouteWithIndex>
 
+            <RouteMe path="/user/github">
+              {_ => (
+                <TipsPage>
+                  <Tips value={t('error.api_url')} type='error' />
+                </TipsPage>
+              )}
+            </RouteMe>
+
+            <RouteMe path="/*/user/github">
+              {_ => (
+                <TipsPage>
+                  <Tips value={t('error.api_url_slash')} type='error' />
+                </TipsPage>
+              )}
+            </RouteMe>
+
+            <RouteMe path="/user/github/callback">
+              {_ => (
+                <TipsPage>
+                  <Tips value={t('error.github_callback')} type='error' />
+                </TipsPage>
+              )}
+            </RouteMe>
+
             {/* Default route in a switch */}
             <Route>404: No such page!</Route>
           </Switch>

client/src/base.css

@@ -10,8 +10,8 @@
       @apply bg-neutral-100 dark:bg-neutral-700;
     }
 
-    .bg-active {
-      @apply active:bg-neutral-200 dark:active:bg-neutral-600;
+    .bg-button {
+      @apply hover:bg-neutral-200 dark:hover:bg-neutral-600 active:bg-neutral-300 dark:active:bg-neutral-500;
     }
 
     .bg-hover {

client/src/components/button.tsx

@@ -2,15 +2,15 @@ import ReactLoading from "react-loading";
 
 export function Button({ title, onClick, secondary = false }: { title: string, secondary?: boolean, onClick: () => void }) {
     return (
-        <button onClick={onClick} className={`${secondary ? "bg-secondary t-primary" : "bg-theme text-white"} text-nowrap rounded-full px-4 py-2 h-min`}>
+        <button onClick={onClick} className={`${secondary ? "bg-secondary t-primary bg-button" : "bg-theme text-white active:bg-theme-active hover:bg-theme-hover"} text-nowrap rounded-full px-4 py-2 h-min`}>
             {title}
         </button>
     );
 }
 
 export function ButtonWithLoading({ title, onClick, loading, secondary = false }: { title: string, secondary?: boolean, loading: boolean, onClick: () => void }) {
     return (
-        <button onClick={onClick} className={`${secondary ? "bg-secondary t-primary" : "bg-theme text-white"} text-nowrap rounded-full px-4 py-2 h-min space-x-2 flex flex-row items-center`}>
+        <button onClick={onClick} className={`${secondary ? "bg-secondary t-primary bg-button" : "bg-theme text-white active:bg-theme-active hover:bg-theme-hover"} text-nowrap rounded-full px-4 py-2 h-min space-x-2 flex flex-row items-center`}>
             {loading && <ReactLoading width="1em" height="1em" type="spin" color="#FFF" />}
             <span>
                 {title}

client/src/components/feed_card.tsx

@@ -2,6 +2,7 @@ import { Link } from "wouter";
 import { useTranslation } from "react-i18next";
 import { timeago } from "../utils/timeago";
 import { HashTag } from "./hashtag";
+import { useMemo } from "react";
 export function FeedCard({ id, title, avatar, draft, listed, top, summary, hashtags, createdAt, updatedAt }:
     {
         id: string, avatar?: string,
@@ -11,9 +12,9 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht
         createdAt: Date, updatedAt: Date
     }) {
     const { t } = useTranslation()
-    return (
+    return useMemo(() => (
         <>
-            <Link href={`/feed/${id}`} target="_blank" className="w-full rounded-2xl bg-w my-2 p-6 duration-300 ani-show bg-active">
+            <Link href={`/feed/${id}`} target="_blank" className="w-full rounded-2xl bg-w my-2 p-6 duration-300 ani-show bg-button">
                 {avatar &&
                     <div className="flex flex-row items-center mb-2 rounded-xl overflow-clip">
                         <img src={avatar} alt=""
@@ -22,7 +23,7 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht
                 <h1 className="text-xl font-bold text-gray-700 dark:text-white text-pretty overflow-hidden">
                     {title}
                 </h1>
-                <div className="gap-x-2">
+                <p className="space-x-2">
                     <span className="text-gray-400 text-sm" title={new Date(createdAt).toLocaleString()}>
                         {createdAt === updatedAt ? timeago(createdAt) : t('feed_card.published$time', { time: timeago(createdAt) })}
                     </span>
@@ -31,14 +32,14 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht
                             {t('feed_card.updated$time', { time: timeago(updatedAt) })}
                         </span>
                     }
-                    <p className="gap-4">
-                        {draft === 1 && <span className="text-gray-400 text-sm">草稿</span>}
-                        {listed === 0 && <span className="text-gray-400 text-sm">未列出</span>}
-                        {top === 1 && <span className="text-theme text-sm">
-                            置顶
-                        </span>}
-                    </p>
-                </div>
+                </p>
+                <p className="space-x-2">
+                    {draft === 1 && <span className="text-gray-400 text-sm">草稿</span>}
+                    {listed === 0 && <span className="text-gray-400 text-sm">未列出</span>}
+                    {top === 1 && <span className="text-theme text-sm">
+                        置顶
+                    </span>}
+                </p>
                 <p className="text-pretty overflow-hidden dark:text-neutral-500">
                     {summary}
                 </p>
@@ -52,5 +53,5 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht
 
             </Link>
         </>
-    )
+    ), [id, title, avatar, draft, listed, top, summary, hashtags, createdAt, updatedAt])
 }