feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/foundation/account-ui-adapter/.stylelintrc.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@coze-arch/stylelint-config');
+
+module.exports = defineConfig({
+  extends: [],
+});

frontend/packages/foundation/account-ui-adapter/README.md

@@ -0,0 +1,16 @@
+# @coze-foundation/account-ui-adapter
+
+> Project template for react component with storybook.
+
+## Features
+
+- [x] eslint & ts
+- [x] esm bundle
+- [x] umd bundle
+- [x] storybook
+
+## Commands
+
+- init: `rush update`
+- dev: `npm run dev`
+- build: `npm run build`

frontend/packages/foundation/account-ui-adapter/config/rush-project.json

@@ -0,0 +1,12 @@
+{
+  "operationSettings": [
+    {
+      "operationName": "test:cov",
+      "outputFolderNames": ["coverage"]
+    },
+    {
+      "operationName": "ts-check",
+      "outputFolderNames": ["dist"]
+    }
+  ]
+}

frontend/packages/foundation/account-ui-adapter/eslint.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('@coze-arch/eslint-config');
+
+module.exports = defineConfig({
+  packageRoot: __dirname,
+  preset: 'web',
+  rules: {},
+});

frontend/packages/foundation/account-ui-adapter/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@coze-foundation/account-ui-adapter",
+  "version": "0.0.1",
+  "description": "账号登录 UI 组件",
+  "license": "Apache-2.0",
+  "author": "duwenhan@bytedance.com",
+  "maintainers": [],
+  "exports": {
+    ".": "./src/index.ts",
+    "./login-page": "./src/pages/login-page/index.tsx"
+  },
+  "main": "src/index.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./src/index.ts"
+      ],
+      "login-page": [
+        "./src/pages/login-page/index.tsx"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "exit 0",
+    "lint": "eslint ./ --cache",
+    "test": "vitest --run --passWithNoTests",
+    "test:cov": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@coze-arch/bot-semi": "workspace:*",
+    "@coze-arch/coze-design": "0.0.6-alpha.346d77",
+    "@coze-arch/i18n": "workspace:*",
+    "@coze-foundation/account-adapter": "workspace:*",
+    "@coze-foundation/account-ui-base": "workspace:*",
+    "@coze-studio/api-schema": "workspace:*",
+    "@coze-studio/components": "workspace:*",
+    "ahooks": "^3.7.8",
+    "classnames": "^2.3.2",
+    "react-router-dom": "^6.22.0"
+  },
+  "devDependencies": {
+    "@coze-arch/bot-typings": "workspace:*",
+    "@coze-arch/eslint-config": "workspace:*",
+    "@coze-arch/stylelint-config": "workspace:*",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-arch/vitest-config": "workspace:*",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@vitest/coverage-v8": "~3.0.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "stylelint": "^15.11.0",
+    "vite-plugin-svgr": "~3.3.0",
+    "vitest": "~3.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  }
+}
+

frontend/packages/foundation/account-ui-adapter/src/index.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export {
+  useLogout,
+  RequireAuthContainer,
+} from '@coze-foundation/account-ui-base';
+
+export { LoginPage } from './pages/login-page';

frontend/packages/foundation/account-ui-adapter/src/pages/login-page/favicon.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import FaviconBase from './favicon-base.png';
+import FaviconAddon from './favicon-addon.png';
+
+export const Favicon = () => (
+  <div className="relative flex items-center">
+    <img
+      src={FaviconBase}
+      className="w-[100px] h-[100px] rounded-[21px] border border-solid coz-stroke-plus"
+    />
+    <img
+      src={FaviconAddon}
+      className="absolute left-1/2 translate-x-[34px] top-[40px] w-[51px]"
+    />
+  </div>
+);

frontend/packages/foundation/account-ui-adapter/src/pages/login-page/index.tsx

@@ -0,0 +1,123 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { type FC, useState } from 'react';
+
+import { CozeBrand } from '@coze-studio/components/coze-brand';
+import { I18n } from '@coze-arch/i18n';
+import { Button, Form } from '@coze-arch/coze-design';
+import { SignFrame, SignPanel } from '@coze-arch/bot-semi';
+
+import { useLoginService } from './service';
+import { Favicon } from './favicon';
+
+export const LoginPage: FC = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [hasError, setHasError] = useState(false);
+
+  const { login, register, loginLoading, registerLoading } = useLoginService({
+    email,
+    password,
+  });
+
+  const submitDisabled = !email || !password || hasError;
+
+  return (
+    <SignFrame brandNode={<CozeBrand isOversea={IS_OVERSEA} />}>
+      <SignPanel className="w-[600px] h-[640px] pt-[96px]">
+        <div className="flex flex-col items-center w-full h-full">
+          <Favicon />
+          <div className="text-[24px] font-medium coze-fg-plug leading-[36px] mt-[32px]">
+            {I18n.t('open_source_login_welcome')}
+          </div>
+          <div className="mt-[64px] w-[320px] flex flex-col items-stretch [&_.semi-input-wrapper]:overflow-hidden">
+            <Form
+              onErrorChange={errors => {
+                setHasError(Object.keys(errors).length > 0);
+              }}
+            >
+              <Form.Input
+                data-testid="login.input.email"
+                noLabel
+                type="email"
+                field="email"
+                rules={[
+                  {
+                    required: true,
+                    message: I18n.t('open_source_login_placeholder_email'),
+                  },
+                  {
+                    pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                    message: I18n.t('open_source_login_placeholder_email'),
+                  },
+                ]}
+                onChange={newVal => {
+                  setEmail(newVal);
+                }}
+                placeholder={I18n.t('open_source_login_placeholder_email')}
+              />
+              <Form.Input
+                data-testid="login.input.password"
+                noLabel
+                rules={[
+                  {
+                    required: true,
+                    message: I18n.t('open_source_login_placeholder_password'),
+                  },
+                ]}
+                field="password"
+                type="password"
+                onChange={setPassword}
+                placeholder={I18n.t('open_source_login_placeholder_password')}
+              />
+            </Form>
+            <Button
+              data-testid="login.button.login"
+              className="mt-[12px]"
+              disabled={submitDisabled || registerLoading}
+              onClick={login}
+              loading={loginLoading}
+              color="hgltplus"
+            >
+              {I18n.t('login_button_text')}
+            </Button>
+            <Button
+              data-testid="login.button.signup"
+              className="mt-[20px]"
+              disabled={submitDisabled || loginLoading}
+              onClick={register}
+              loading={registerLoading}
+              color="primary"
+            >
+              {I18n.t('register')}
+            </Button>
+            <div className="mt-[12px] flex justify-center">
+              <a
+                data-testid="login.link.terms"
+                href="https://spdx.org/licenses/Apache-2.0.html"
+                target="_blank"
+                className="no-underline coz-fg-hglt"
+              >
+                {I18n.t('open_source_terms_linkname')}
+              </a>
+            </div>
+          </div>
+        </div>
+      </SignPanel>
+    </SignFrame>
+  );
+};

frontend/packages/foundation/account-ui-adapter/src/pages/login-page/service.ts

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+
+import { useRequest } from 'ahooks';
+import { passport } from '@coze-studio/api-schema';
+import {
+  setUserInfo,
+  useLoginStatus,
+  type UserInfo,
+} from '@coze-foundation/account-adapter';
+
+export const useLoginService = ({
+  email,
+  password,
+}: {
+  email: string;
+  password: string;
+}) => {
+  const loginService = useRequest(
+    async () => {
+      const res = (await passport.PassportWebEmailLoginPost({
+        email,
+        password,
+      })) as unknown as { data: UserInfo };
+      return res.data;
+    },
+    {
+      manual: true,
+      onSuccess: setUserInfo,
+    },
+  );
+
+  const registerService = useRequest(
+    async () => {
+      const res = (await passport.PassportWebEmailRegisterV2Post({
+        email,
+        password,
+      })) as unknown as { data: UserInfo };
+      return res.data;
+    },
+    {
+      manual: true,
+      onSuccess: setUserInfo,
+    },
+  );
+
+  const loginStatus = useLoginStatus();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (loginStatus === 'logined') {
+      navigate('/');
+    }
+  }, [loginStatus]);
+
+  return {
+    login: loginService.run,
+    register: registerService.run,
+    loginLoading: loginService.loading,
+    registerLoading: registerService.loading,
+  };
+};

frontend/packages/foundation/account-ui-adapter/src/typings.d.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />
+
+declare const IS_OVERSEA: boolean;

frontend/packages/foundation/account-ui-adapter/tsconfig.build.json

@@ -0,0 +1,51 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [
+    {
+      "path": "../account-adapter/tsconfig.build.json"
+    },
+    {
+      "path": "../account-ui-base/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/api-schema/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-typings/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/i18n/tsconfig.build.json"
+    },
+    {
+      "path": "../../components/bot-semi/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/eslint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/stylelint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/ts-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/vitest-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../studio/components/tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/foundation/account-ui-adapter/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "exclude": ["**/*"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ]
+}

frontend/packages/foundation/account-ui-adapter/tsconfig.misc.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler"
+  },
+  "include": ["__tests__", "vitest.config.ts", "stories"],
+  "exclude": ["./dist"],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/foundation/account-ui-adapter/vitest.config.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { defineConfig } from '@coze-arch/vitest-config';
+
+export default defineConfig({
+  dirname: __dirname,
+  preset: 'web',
+});