feat(website): logout

packages/website/e2e/logout.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+import { testAsUser } from './common/login';
+
+testAsUser('treeholechan');
+test('current user should log out on logout page', async ({ page }) => {
+  await page.goto('/logout');
+  await page.waitForURL('/');
+
+  await expect(page.getByText('登录')).toBeVisible();
+});

packages/website/e2e/specs/group.spec.ts

@@ -17,13 +17,8 @@ test.describe('已登录用户', () => {
   test('登录用户', async ({ page }) => {
     test.slow();
     await page.goto('/group/sandbox');
-    await page.pause();
 
-    await expect(
-      page.getByRole('link', {
-        name: '发表新主题',
-      }),
-    ).toBeVisible();
+    await expect(page.getByText('发表新主题')).toBeVisible();
     await expect(page.getByText('退出该小组')).toBeVisible();
 
     await page.getByPlaceholder('给新帖取一个标题').click();

packages/website/src/pages/index/group/components/GroupActions.tsx

@@ -13,6 +13,7 @@ export interface GroupActionsProps {
 
 const GroupActions = memo(({ groupProfile, className, size }: GroupActionsProps) => {
   const { user } = useUser();
+  console.log('🚀 ~ file: GroupActions.tsx:16 ~ GroupActions ~ user:', user);
   if (!user) {
     return null;
   }

packages/website/src/pages/index/logout/index.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { useDidMount } from 'rooks';
+
+import { ozaClient } from '@bangumi/client';
+import { Button, toast } from '@bangumi/design';
+
+import styles from './style.module.less';
+
+const SUCCESS_REDIRECT_DELAY = 5000;
+
+const Logout = () => {
+  const [isLogoutSuccess, setIsLogoutSuccess] = useState(false);
+
+  useDidMount(() => {
+    ozaClient.logout({}).then(({ status, data }) => {
+      if (status !== 200) {
+        toast(data.message);
+        return;
+      }
+
+      setIsLogoutSuccess(true);
+    });
+  });
+
+  React.useEffect(() => {
+    if (!isLogoutSuccess) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      // 顺便刷新页面，去掉登陆态
+      window.location.href = '/';
+    }, SUCCESS_REDIRECT_DELAY);
+  }, [isLogoutSuccess]);
+
+  if (!isLogoutSuccess) {
+    // TODO: 载入态
+    return;
+  }
+
+  return (
+    <div className={styles.notice}>
+      <h2 className={styles.noticeTitle}>Bangumi 提示信息</h2>
+      <div>您已成功登出，我们随时欢迎您回来。</div>
+      <Button type='secondary' size='medium'>
+        点此手动跳转
+      </Button>
+    </div>
+  );
+};
+
+export default Logout;

packages/website/src/pages/index/logout/style.module.less

@@ -0,0 +1,20 @@
+@import '@bangumi/design/theme/base';
+
+.notice {
+  position: absolute;
+  top: 361px;
+  left: 230px;
+  font-size: 16px;
+  font-weight: 400;
+  color: @gray-80;
+
+  > * + * {
+    margin-top: 12px;
+  }
+}
+
+.notice-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: @primary-color;
+}