Add agreement page

Author: zxdong262

bin/build-all.js

@@ -37,6 +37,22 @@ async function main () {
     keywords: 'electerm, electerm-cloud',
     siteName: 'electerm cloud admin'
   })
+
+  const from2 = resolve(cwd, 'src/server/views/agreement.pug')
+  const to2 = resolve(cwd, 'public/agreement/index.html')
+  mkdirSync(
+    resolve(cwd, 'public/agreement'),
+    { recursive: true }
+  )
+
+  await buildPug(from2, to2, {
+    dev: false,
+    cssUrl: '/css/style.css',
+    jsUrl: '/js/agreement.bundle.js',
+    desc: 'electerm cloud agreement: sync your electerm data to cloud',
+    keywords: 'electerm, electerm-cloud',
+    siteName: 'electerm cloud agreement'
+  })
 }
 
 main()

bin/vite/conf.ts

@@ -20,7 +20,8 @@ export default defineConfig({
     rollupOptions: {
       input: {
         app: resolve(cwd, 'src/client/entry/app.tsx'),
-        admin: resolve(cwd, 'src/client/entry/admin.tsx')
+        admin: resolve(cwd, 'src/client/entry/admin.tsx'),
+        agreement: resolve(cwd, 'src/client/entry/agreement.tsx')
       },
       external: [
         'universe-bg',

bin/vite/dev-server.ts

@@ -46,6 +46,17 @@ function handleAdmin (req: express.Request, res: express.Response) {
   })
 }
 
+function handleAgreement (req: express.Request, res: express.Response) {
+  res.render('agreement', {
+    dev: true,
+    cssUrl: '/agreement.bundle.css',
+    jsUrl: '/src/client/entry/agreement.tsx',
+    desc: 'electerm cloud agreement',
+    keywords: 'electerm, electerm-cloud',
+    siteName: 'electerm cloud agreement'
+  })
+}
+
 
 async function createServer(): Promise<void> {
   const app: express.Application = express()
@@ -68,6 +79,7 @@ async function createServer(): Promise<void> {
 
   app.get('/', handleIndex)
   app.get('/admin', handleAdmin)
+  app.get('/agreement', handleAgreement)
   route(app)
   app.use(vite.middlewares)
 

src/client/agreement/agreement.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react'
+import { t } from '../locales/lang'
+import Links from '../common/links'
+import Footer from '../common/footer'
+import LangSelect from '../locales/lang-select'
+import Logo from '../common/logo'
+
+export default function Agreement (): JSX.Element {
+  useEffect(() => {
+    document.getElementById('content-loading')?.remove()
+  }, [])
+
+  return (
+    <div className='wrap'>
+      <div className='pd1y'>
+        <LangSelect />
+      </div>
+      <Logo />
+      <div className='pd2y'>
+        <a href='/'>← {t('backToHome')}</a>
+      </div>
+      <h1>{t('agreement')}</h1>
+      <div className='pd2y'>
+        {
+          t('agreementContent').split('\n').map((line, i) => (
+            <p key={i}>{line}</p>
+          ))
+        }
+      </div>
+      <Links />
+      <Footer />
+    </div>
+  )
+}

src/client/common/footer.tsx

@@ -5,14 +5,29 @@ export default function Footer (): JSX.Element {
     {
       url: 'https://github.com/zxdong262',
       title: '@ZHAO Xudong'
+    },
+    {
+      url: '/agreement',
+      title: 'Agreement'
     }
   ]
   return (
     <div className='footer pd2y'>
       {
-        links.map(item => (
-          <a target='_blank' rel='noreferrer' href={item.url} key={item.url}>{item.title}</a>
-        ))
+        links.map((item, i) => {
+          const cls = i === 0 ? '' : 'mg2l'
+          return (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              href={item.url}
+              key={item.url}
+              className={cls}
+            >
+              {item.title}
+            </a>
+          )
+        })
       }
     </div>
   )

src/client/common/logo.tsx

@@ -1,13 +1,17 @@
 import React from 'react'
+import { t } from '../locales/lang'
 
-export default function Logout (): JSX.Element {
+export default function Logo (): JSX.Element {
   return (
     <div className='pd3y'>
       <img
         src='https://electerm.html5beta.com/electerm.png'
         alt=''
         className='logo iblock'
       />
+      <p className='pd1y'>
+        {t('electermCloud')}
+      </p>
     </div>
   )
 }

src/client/entry/agreement.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client'
+import React from 'react'
+import App from '../agreement/agreement'
+import './app.styl'
+
+const root = createRoot(document.getElementById('container') as HTMLElement)
+root.render(<App />)

src/client/locales/cn.ts

@@ -37,5 +37,6 @@ export const cn: Lang = {
   tokens: '访问令牌',
   email: '电子邮件',
   name: '姓名',
+  backToHome: '返回首页',
   download: '下载'
 }

src/client/locales/en.ts

@@ -33,5 +33,6 @@ If you do not agree with these terms, please do not use this application. By cli
   tokens: 'Tokens',
   email: 'Email',
   name: 'Name',
+  backToHome: 'Back to Home',
   download: 'Download'
 }

src/client/login/login.tsx

@@ -14,6 +14,7 @@ import AgreeMent from './agreement'
 import Links from '../common/links'
 import Footer from '../common/footer'
 import LangSelect from '../locales/lang-select'
+import Logo from '../common/logo'
 import { t } from '../locales/lang'
 
 declare global {
@@ -93,15 +94,7 @@ export default function Login (): JSX.Element {
       <div className='pd1y'>
         <LangSelect />
       </div>
-      <div className='pd3y'>
-        <img
-          src='https://electerm.html5beta.com/electerm.png'
-          alt=''
-        />
-        <p className='pd1y'>
-          {t('electermCloud')}
-        </p>
-      </div>
+      <Logo />
       <Spin spinning={loading}>
         <div className='pd3y'>
           <Button