:construction: add router & layout demo

dashboard/src/App.css

@@ -1,38 +1,7 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
+@import "~antd/dist/antd.min.css";
+@import "~react-quill/dist/quill.snow.css";
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+body {
+  margin: 0;
+  padding: 0;
 }

dashboard/src/App.tsx

@@ -1,34 +1,16 @@
 import React from "react";
-import logo from "./logo.svg";
-import "./App.css";
+import { BrowserRouter } from "react-router-dom";
 
-function demo_1(i: number, s: string): string {
-  console.log();
-  const str = `hello, react!(i = "${i}" s = "${s}")`;
-  return str;
-}
+import Router from "./Router";
+
+import "./App.css";
 
-function App() {
-  const demo_s = demo_1(123, "mint");
+function Widget() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <h1>{demo_s}</h1>
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <BrowserRouter basename={process.env.PUBLIC_URL}>
+      <Router />
+    </BrowserRouter>
   );
 }
 
-export default App;
+export default Widget;

dashboard/src/Router.tsx

@@ -0,0 +1,58 @@
+import { Route, Routes } from "react-router-dom";
+
+import Anonymous from "./layouts/anonymous";
+import Dashboard from "./layouts/dashboard";
+
+import NutUsersSignIn from "./pages/nut/users/sign-in";
+import NutUsersSignUp from "./pages/nut/users/sign-up";
+import NutUsersUnlockNew from "./pages/nut/users/unlock/new";
+import NutUsersUnlockVerify from "./pages/nut/users/unlock/verify";
+import NutUsersResetPassword from "./pages/nut/users/reset-password";
+import NutUsersForgotPassword from "./pages/nut/users/forgot-password";
+import NutUsersChangePassword from "./pages/nut/users/change-password";
+import NutUsersAccountInfo from "./pages/nut/users/account-info";
+import NutUsersLogs from "./pages/nut/users/logs";
+import NutForbidden from "./pages/nut/forbidden";
+import NutNotFound from "./pages/nut/not-found";
+import NutSwitchLanguage from "./pages/nut/switch-languages";
+import NutHome from "./pages/nut";
+
+const Widget = () => {
+  return (
+    <Routes>
+      <Route path="anonymous" element={<Anonymous />}>
+        <Route path="users">
+          <Route path="sign-in" element={<NutUsersSignIn />} />
+          <Route path="sign-up" element={<NutUsersSignUp />} />
+
+          <Route path="unlock">
+            <Route path="new" element={<NutUsersUnlockNew />} />
+            <Route path="verify/:token" element={<NutUsersUnlockVerify />} />
+          </Route>
+          <Route
+            path="reset-password/:token"
+            element={<NutUsersResetPassword />}
+          />
+          <Route path="forgot-password" element={<NutUsersForgotPassword />} />
+        </Route>
+
+        <Route path="dashboard" element={<Dashboard />}>
+          <Route path="users">
+            <Route
+              path="change-password"
+              element={<NutUsersChangePassword />}
+            />
+            <Route path="logs" element={<NutUsersLogs />} />
+            <Route path="account-info" element={<NutUsersAccountInfo />} />
+          </Route>
+        </Route>
+        <Route path="switch-language" element={<NutSwitchLanguage />} />
+      </Route>
+      <Route path="forbidden" element={<NutForbidden />} />
+      <Route path="" element={<NutHome />} />
+      <Route path="*" element={<NutNotFound />} />
+    </Routes>
+  );
+};
+
+export default Widget;

dashboard/src/components/nut/users/change-password.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>change password</div>;
+};
+
+export default Widget;

dashboard/src/components/nut/users/profile.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>user profile</div>;
+};
+
+export default Widget;

dashboard/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

dashboard/src/index.tsx

@@ -1,17 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  document.getElementById("root") as HTMLElement
 );
+root.render(<App />);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

dashboard/src/layouts/anonymous/index.tsx

@@ -0,0 +1,23 @@
+import { Outlet, Link } from "react-router-dom";
+import { Space } from "antd";
+
+const Widget = () => {
+  return (
+    <div>
+      <div>anonymous layout header</div>
+      <div>
+        <Outlet />
+        <div>
+          <Space>
+            <Link to="/anonymous/users/sign-in">Sign in</Link>
+            <Link to="/anonymous/users/sign-up">Sign up</Link>
+            <Link to="/anonymous/users/forgot-password">Forgot password</Link>
+          </Space>
+        </div>
+      </div>
+      <div>anonymous layout footer</div>
+    </div>
+  );
+};
+
+export default Widget;

dashboard/src/layouts/dashboard/index.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+
+const Widget = () => {
+  return (
+    <div>
+      <div>dashboard layout header</div>
+      <div>
+        <Outlet />
+      </div>
+      <div>dashboard layout footer</div>
+    </div>
+  );
+};
+
+export default Widget;

dashboard/src/pages/nut/forbidden.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>forbidden</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/index.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>Home Page</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/not-found.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>not found</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/switch-languages.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>switch language</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/users/account-info.tsx

@@ -0,0 +1,14 @@
+import ChangePassword from "../../../components/nut/users/change-password";
+import Profile from "../../../components/nut/users/profile";
+
+const Widget = () => {
+  return (
+    <div>
+      <h3> account info</h3>
+      <ChangePassword />
+      <Profile />
+    </div>
+  );
+};
+
+export default Widget;

dashboard/src/pages/nut/users/change-password.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>change password</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/users/forgot-password.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>forgot password</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/users/logs.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>logs</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/users/reset-password.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>reset password</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/users/sign-in.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>sign in</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/users/sign-up.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>sign up</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/users/unlock/new.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>request an unlock email</div>;
+};
+
+export default Widget;

dashboard/src/pages/nut/users/unlock/verify.tsx

@@ -0,0 +1,5 @@
+const Widget = () => {
+  return <div>verify unlock token by email</div>;
+};
+
+export default Widget;

documents/development/README.md

@@ -42,9 +42,19 @@ cd ~/workspace
 
 - PostgreSql
 
-  ```bash
-  psql -h 127.0.0.1 -p 5432 -U postgres
-  ```
+  - 连接
+
+    ```bash
+    psql -h 127.0.0.1 -p 5432 -U postgres
+    ```
+
+  - 创建数据库和用户
+
+    ```sql
+    CREATE DATABASE db-name WITH ENCODING = 'UTF8';
+    CREATE USER user-name WITH PASSWORD 'change-me';
+    GRANT ALL PRIVILEGES ON DATABASE db-name TO user-name;
+    ```
 
 - MySql