cabloy 5.1.136 → 5.1.138

package/zova/src/suite/a-home/modules/home-layoutweb/src/component/layoutWeb/render.tsx

@@ -7,6 +7,7 @@ import { RenderHeader } from './render.header.jsx';
 import { RenderLocale } from './render.locale.jsx';
 import { RenderTabs } from './render.tabs.jsx';
 import { RenderTheme } from './render.theme.jsx';
+import { RenderUser } from './render.user.jsx';
 
 @Render()
 export class RenderLayoutWeb extends BeanRenderBase {
@@ -19,6 +20,9 @@ export class RenderLayoutWeb extends BeanRenderBase {
   @Use()
   $$renderTabs: RenderTabs;
 
+  @Use()
+  $$renderUser: RenderUser;
+
   @Use()
   $$renderContent: RenderContent;
 

package/zova/src/suite/a-home/modules/home-layoutweb/src/component/layoutWeb/render.user.tsx

@@ -0,0 +1,68 @@
+import { BeanRenderBase, ClientOnly } from 'zova';
+import { Render } from 'zova-module-a-bean';
+import { resolveImagePreviewUrl } from 'zova-module-basic-image';
+import { closeNearestDetails } from 'zova-module-home-base';
+
+@Render()
+export class RenderUser extends BeanRenderBase {
+  public render() {
+    return (
+      <ClientOnly>
+        <li>
+          <details>
+            <summary>
+              <img
+                class="h-6 w-6 rounded-full object-cover"
+                alt="avatar"
+                src={
+                  resolveImagePreviewUrl(
+                    this.$passport.user?.avatar,
+                    this.sys.config.api.baseURL,
+                  ) || this.$scopeBase.config.avatar.empty
+                }
+              />
+              {this.$passport.user?.name || this.scope.locale.NotLoggedIn()}
+            </summary>
+            <ul class="bg-base-100 rounded-t-none p-2 w-40">
+              {this.$passport.isAuthenticated ? (
+                <>
+                  <li>
+                    <a
+                      onClick={event => {
+                        this.app.$gotoPage('/home/user/account');
+                        closeNearestDetails(event);
+                      }}
+                    >
+                      {this.scope.locale['Account Settings']()}
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      onClick={event => {
+                        this.$passport.logout().mutate();
+                        closeNearestDetails(event);
+                      }}
+                    >
+                      {this.scope.locale.Logout()}
+                    </a>
+                  </li>
+                </>
+              ) : (
+                <li>
+                  <a
+                    onClick={event => {
+                      this.app.$gotoLogin(true);
+                      closeNearestDetails(event);
+                    }}
+                  >
+                    {this.scope.locale.Login()}
+                  </a>
+                </li>
+              )}
+            </ul>
+          </details>
+        </li>
+      </ClientOnly>
+    );
+  }
+}

package/zova/src/suite/a-home/modules/home-layoutweb/src/config/locale/en-us.ts

@@ -1,10 +1,13 @@
 export default {
-  Home: 'Home',
-  Logout: 'Logout',
-  ThemeLight: 'Light',
-  ThemeDark: 'Dark',
-  ThemeAuto: 'Auto',
-  ThemeDefault: 'Default',
-  ThemeOrange: 'Orange',
-  ThemeBlue: 'Blue',
+  'Home': 'Home',
+  'Logout': 'Logout',
+  'Login': 'Login',
+  'NotLoggedIn': 'Not logged in',
+  'Account Settings': 'Account Settings',
+  'ThemeLight': 'Light',
+  'ThemeDark': 'Dark',
+  'ThemeAuto': 'Auto',
+  'ThemeDefault': 'Default',
+  'ThemeOrange': 'Orange',
+  'ThemeBlue': 'Blue',
 };

package/zova/src/suite/a-home/modules/home-layoutweb/src/config/locale/zh-cn.ts

@@ -1,10 +1,13 @@
 export default {
-  Home: '首页',
-  Logout: '退出登录',
-  ThemeLight: '亮色',
-  ThemeDark: '暗色',
-  ThemeAuto: '自动',
-  ThemeDefault: '默认',
-  ThemeOrange: '橘色',
-  ThemeBlue: '蓝色',
+  'Home': '首页',
+  'Logout': '退出登录',
+  'Login': '登录',
+  'NotLoggedIn': '未登录',
+  'Account Settings': '账户设置',
+  'ThemeLight': '亮色',
+  'ThemeDark': '暗色',
+  'ThemeAuto': '自动',
+  'ThemeDefault': '默认',
+  'ThemeOrange': '橘色',
+  'ThemeBlue': '蓝色',
 };

package/zova/src/suite/a-home/modules/home-login/src/.metadata/index.ts

@@ -1,40 +1,60 @@
 // eslint-disable
 /** controller: begin */
 export * from '../page/login/controller.jsx';
+export * from '../page/passwordResetRequest/controller.jsx';
+export * from '../page/register/controller.jsx';
 
 import 'zova';
 declare module 'zova' {
-  
-  
+
+
 }
 declare module 'zova-module-home-login' {
-  
+
         export interface ControllerPageLogin {
           /** @internal */
           get scope(): ScopeModuleHomeLogin;
-        } 
+        }
+
+        export interface ControllerPagePasswordResetRequest {
+          /** @internal */
+          get scope(): ScopeModuleHomeLogin;
+        }
+
+        export interface ControllerPageRegister {
+          /** @internal */
+          get scope(): ScopeModuleHomeLogin;
+        }
 }
 /** controller: end */
 /** controller: begin */
 import { ControllerPageLogin } from '../page/login/controller.jsx';
+import { ControllerPagePasswordResetRequest } from '../page/passwordResetRequest/controller.jsx';
+import { ControllerPageRegister } from '../page/register/controller.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordLocal {
     'home-login.controller.pageLogin': ControllerPageLogin;
+'home-login.controller.pagePasswordResetRequest': ControllerPagePasswordResetRequest;
+'home-login.controller.pageRegister': ControllerPageRegister;
   }
 }
 /** controller: end */
 /** pages: begin */
 export * from './page/login.js';
+export * from './page/passwordResetRequest.js';
+export * from './page/register.js';
 export * from '../routes.js';
 import { TypePagePathSchema } from 'zova-module-a-router';
 import 'zova';
 declare module 'zova-module-a-router' {
 export interface IPagePathRecord {
   '/home/login': TypePagePathSchema<undefined,undefined>;
+'/home/login/password-reset': TypePagePathSchema<undefined,undefined>;
+'/home/login/register': TypePagePathSchema<undefined,undefined>;
 }
 export interface IPageNameRecord {
-  
+
 }
 }
 export const pagePathSchemas = {
@@ -44,7 +64,7 @@ export const pageNameSchemas = {
 
 };
 declare module 'zova-module-home-login' {
-  
+
 }
 /** pages: end */
 
@@ -53,15 +73,15 @@ export * from '../page/login/render.jsx';
 
 import 'zova';
 declare module 'zova' {
-  
-  
+
+
 }
 declare module 'zova-module-home-login' {
-  
+
         export interface RenderPageLogin {
           /** @internal */
           get scope(): ScopeModuleHomeLogin;
-        } 
+        }
 }
 /** render: end */
 /** render: begin */
@@ -78,15 +98,15 @@ export * from '../bean/behavior.formFieldLayoutLogin.jsx';
 import { IBehaviorOptionsFormFieldLayoutLogin } from '../bean/behavior.formFieldLayoutLogin.jsx';
 import 'zova-module-a-behavior';
 declare module 'zova-module-a-behavior' {
-  
+
     export interface IBehaviorRecord {
       'home-login:formFieldLayoutLogin': IBehaviorOptionsFormFieldLayoutLogin;
     }
 
-  
+
 }
 declare module 'zova-module-home-login' {
-  
+
         export interface BehaviorFormFieldLayoutLogin {
           /** @internal */
           get scope(): ScopeModuleHomeLogin;
@@ -96,7 +116,7 @@ declare module 'zova-module-home-login' {
           get $beanFullName(): 'home-login.behavior.formFieldLayoutLogin';
           get $onionName(): 'home-login:formFieldLayoutLogin';
           get $onionOptions(): IBehaviorOptionsFormFieldLayoutLogin;
-        } 
+        }
 }
 /** behavior: end */
 /** behavior: begin */
@@ -147,17 +167,17 @@ declare module 'zova' {
   export interface IBeanScopeRecord {
     'home-login': ScopeModuleHomeLogin;
   }
-  
-  
+
+
 
   export interface IBeanScopeLocale {
     'home-login': (typeof locales)[TypeLocaleBase];
   }
 
-  
+
 }
 
 export function locale<K extends keyof (typeof locales)[TypeLocaleBase]>(key: K): `home-login::${K}` {
   return `home-login::${key}`;
-}  
+}
 /** scope: end */

package/zova/src/suite/a-home/modules/home-login/src/.metadata/page/passwordResetRequest.ts

@@ -0,0 +1,9 @@
+import { createZovaComponentPage } from 'zova';
+
+import { ControllerPagePasswordResetRequest } from '../../page/passwordResetRequest/controller.jsx';
+
+export const ZPagePasswordResetRequest = createZovaComponentPage(
+  ControllerPagePasswordResetRequest,
+  undefined,
+  undefined,
+);

package/zova/src/suite/a-home/modules/home-login/src/.metadata/page/register.ts

@@ -0,0 +1,5 @@
+import { createZovaComponentPage } from 'zova';
+
+import { ControllerPageRegister } from '../../page/register/controller.jsx';
+
+export const ZPageRegister = createZovaComponentPage(ControllerPageRegister, undefined, undefined);

package/zova/src/suite/a-home/modules/home-login/src/config/locale/en-us.ts

@@ -1,6 +1,20 @@
 export default {
   YourUsername: 'Your Username',
   YourPassword: 'Your Password',
+  YourEmail: 'Your email address',
+  PasswordConfirm: 'Confirm password',
   Login: 'Login',
   LoginGitHub: 'Sign in with GitHub',
+  CreateAccount: 'Create account',
+  ForgotPassword: 'Forgot password?',
+  Register: 'Create account',
+  RegisterHelp: 'Create an account to get started.',
+  RegisterActivationPending: 'Check your email to activate your account before signing in.',
+  AlreadyHaveAccount: 'Already have an account?',
+  PasswordReset: 'Reset password',
+  PasswordResetHelp:
+    'Enter your email address and we will send a reset link if your account is eligible.',
+  PasswordResetRequestAccepted:
+    'If an eligible account matches that address, a reset link will be sent shortly.',
+  BackToLogin: 'Back to login',
 };

package/zova/src/suite/a-home/modules/home-login/src/config/locale/zh-cn.ts

@@ -1,6 +1,18 @@
 export default {
   YourUsername: '您的用户名',
   YourPassword: '您的密码',
+  YourEmail: '您的邮箱地址',
+  PasswordConfirm: '确认密码',
   Login: '登录',
   LoginGitHub: '使用GitHub登录',
+  CreateAccount: '注册新用户',
+  ForgotPassword: '忘记密码？',
+  Register: '注册新用户',
+  RegisterHelp: '创建账户以开始使用。',
+  RegisterActivationPending: '请先查收邮件并激活账户，然后再登录。',
+  AlreadyHaveAccount: '已有账户？',
+  PasswordReset: '重置密码',
+  PasswordResetHelp: '请输入邮箱地址；如果账户符合条件，我们将发送重置链接。',
+  PasswordResetRequestAccepted: '如果该地址对应符合条件的账户，重置链接将很快发送。',
+  BackToLogin: '返回登录',
 };

package/zova/src/suite/a-home/modules/home-login/src/page/login/controller.tsx

@@ -35,4 +35,14 @@ export class ControllerPageLogin extends BeanControllerPageBase {
     const apiUrl = this.$passport.getOauthLoginUrl('auth-oauth', 'oauth', 'github');
     window.location.assign(apiUrl);
   }
+
+  gotoRegister() {
+    return this.app.$gotoPage('/home/login/register', {
+      query: { [this.sys.env.ROUTER_KEY_RETURNTO]: this.app.$getReturnTo() },
+    });
+  }
+
+  gotoPasswordResetRequest() {
+    return this.app.$gotoPage('/home/login/password-reset');
+  }
 }

package/zova/src/suite/a-home/modules/home-login/src/page/login/render.tsx

@@ -15,6 +15,7 @@ export class RenderPageLogin extends BeanRenderBase {
               <h2 class="text-2xl font-semibold mb-2 text-center">{this.scope.locale.Login()}</h2>
               <div class="mb-4">
                 {this._renderForm()}
+                {this._renderRecoveryActions()}
                 <div class="divider">OR</div>
                 {this._renderGithub()}
               </div>
@@ -91,6 +92,19 @@ export class RenderPageLogin extends BeanRenderBase {
     );
   }
 
+  _renderRecoveryActions() {
+    return (
+      <div class="mt-4 flex items-center justify-between text-sm">
+        <button class="link link-primary" type="button" onClick={() => this.gotoRegister()}>
+          {this.scope.locale.CreateAccount()}
+        </button>
+        <button class="link" type="button" onClick={() => this.gotoPasswordResetRequest()}>
+          {this.scope.locale.ForgotPassword()}
+        </button>
+      </div>
+    );
+  }
+
   _renderGithub() {
     return (
       <button

package/zova/src/suite/a-home/modules/home-login/src/page/passwordResetRequest/controller.tsx

@@ -0,0 +1,130 @@
+import type { ApiApiHomeUserAccountrequestPasswordResetRequestBody } from 'zova-module-home-api';
+
+import { SchemaObject } from 'openapi3-ts/oas31';
+import { BeanControllerPageBase, Use } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+import { ZForm, ZFormFieldBlank, ZFormFieldPreset, TypeFormOnSubmitData } from 'zova-module-a-form';
+import { $QueryEnsureLoaded } from 'zova-module-a-model';
+import { ModelAccount } from 'zova-module-home-user';
+
+@Controller()
+export class ControllerPagePasswordResetRequest extends BeanControllerPageBase {
+  @Use()
+  $$modelAccount: ModelAccount;
+
+  submitted = false;
+  schema?: SchemaObject;
+  request: Omit<ApiApiHomeUserAccountrequestPasswordResetRequestBody, 'consumerUrl'> = {
+    email: '',
+    captcha: {
+      id: '',
+      token: '',
+    },
+  };
+
+  get apiSchemasPasswordResetRequest() {
+    return this.$apiSchema.homeUserAccount.requestPasswordReset({ authToken: false });
+  }
+
+  protected async __init__() {
+    await $QueryEnsureLoaded(() => this.apiSchemasPasswordResetRequest.sdk);
+    this.schema = this.$computed(() => {
+      return omitSchemaProperty(this.apiSchemasPasswordResetRequest.requestBody, 'consumerUrl');
+    });
+  }
+
+  async submitPasswordResetRequest(
+    data: TypeFormOnSubmitData<
+      Omit<ApiApiHomeUserAccountrequestPasswordResetRequestBody, 'consumerUrl'>
+    >,
+  ) {
+    const consumerUrl = this.$router.getPagePath('/home/user/password-reset', undefined, true);
+    if (!consumerUrl) throw new Error('password-reset consumer route is unavailable');
+    await this.$$modelAccount.requestPasswordReset().mutateAsync({ ...data.value, consumerUrl });
+    this.submitted = true;
+  }
+
+  gotoLogin() {
+    return this.app.$gotoPage('/home/login');
+  }
+
+  protected render() {
+    return (
+      <div class="min-h-screen bg-base-200 flex items-center p-6">
+        <section class="card mx-auto w-full max-w-md bg-base-100 shadow-xl">
+          <div class="card-body gap-4">
+            <div>
+              <h1 class="card-title text-2xl">{this.scope.locale.PasswordReset()}</h1>
+              <p class="mt-1 text-sm text-base-content/70">
+                {this.scope.locale.PasswordResetHelp()}
+              </p>
+            </div>
+            {this.submitted ? (
+              <>
+                <p class="text-sm text-base-content/70">
+                  {this.scope.locale.PasswordResetRequestAccepted()}
+                </p>
+                <button class="btn btn-primary" type="button" onClick={() => this.gotoLogin()}>
+                  {this.scope.locale.BackToLogin()}
+                </button>
+              </>
+            ) : (
+              <ZForm
+                data={this.request}
+                schema={this.schema}
+                formProvider={{ behaviors: { FormFieldLayout: 'home-login:formFieldLayoutLogin' } }}
+                onSubmitData={data => this.submitPasswordResetRequest(data)}
+                onShowError={async ({ error }) => {
+                  await this.$performCommand('basic-commands:alert', {
+                    type: 'error',
+                    text: error.message,
+                  });
+                }}
+              >
+                <ZFormFieldPreset
+                  name="email"
+                  render="basic-input:formFieldInput"
+                  options={{ type: 'email', placeholder: this.scope.locale.YourEmail() }}
+                  layout={{ iconPrefix: ':daisy:person' }}
+                ></ZFormFieldPreset>
+                <ZFormFieldPreset
+                  name="captcha"
+                  render="basic-captcha:formFieldCaptcha"
+                  layout={{ iconPrefix: ':editor:code-block' }}
+                ></ZFormFieldPreset>
+                <ZFormFieldBlank
+                  slotDefault={$$form => {
+                    return (
+                      <button
+                        disabled={$$form.formState.isSubmitting}
+                        type="submit"
+                        class="btn btn-primary w-full"
+                      >
+                        {this.scope.locale.PasswordReset()}
+                      </button>
+                    );
+                  }}
+                ></ZFormFieldBlank>
+              </ZForm>
+            )}
+            {!this.submitted && (
+              <button class="link text-sm" type="button" onClick={() => this.gotoLogin()}>
+                {this.scope.locale.BackToLogin()}
+              </button>
+            )}
+          </div>
+        </section>
+      </div>
+    );
+  }
+}
+
+function omitSchemaProperty(schema: SchemaObject | undefined, property: string) {
+  if (!schema) return;
+  const { [property]: _, ...properties } = schema.properties ?? {};
+  return {
+    ...schema,
+    properties,
+    required: schema.required?.filter(item => item !== property),
+  };
+}

package/zova/src/suite/a-home/modules/home-login/src/page/register/controller.tsx

@@ -0,0 +1,124 @@
+import { SchemaObject } from 'openapi3-ts/oas31';
+import { BeanControllerPageBase } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+import { TypeFormOnSubmitData, ZForm } from 'zova-module-a-form';
+import { $QueryEnsureLoaded } from 'zova-module-a-model';
+import { ApiApiHomeUserPassportregisterRequestBody } from 'zova-module-home-api';
+
+@Controller()
+export class ControllerPageRegister extends BeanControllerPageBase {
+  submitted = false;
+  schemaRegister?: SchemaObject;
+  user: ApiApiHomeUserPassportregisterRequestBody = {
+    username: '',
+    email: '',
+    password: '',
+    passwordConfirm: '',
+    captcha: {
+      id: '',
+      token: '',
+    },
+    consumerUrl: '',
+  };
+
+  get apiSchemasRegister() {
+    return this.$apiSchema.homeUserPassport.register({ authToken: false });
+  }
+
+  protected async __init__() {
+    await $QueryEnsureLoaded(() => this.apiSchemasRegister.sdk);
+    this.schemaRegister = this.$computed(() => {
+      return omitSchemaProperty(this.apiSchemasRegister.requestBody, 'consumerUrl');
+    });
+  }
+
+  async submitRegister(data: TypeFormOnSubmitData<ApiApiHomeUserPassportregisterRequestBody>) {
+    const consumerUrl = this.$router.getPagePath('/home/user/activation', undefined, true);
+    if (!consumerUrl) throw new Error('activation consumer route is unavailable');
+    const result = await this.$api.homeUserPassport.register(
+      { ...data.value, consumerUrl },
+      { authToken: false },
+    );
+    if (this.$passport.isPassportSiteAdmitted(result.passport)) {
+      this.$passport.afterLogin(result);
+      return;
+    }
+    this.submitted = true;
+  }
+
+  gotoLogin() {
+    return this.app.$gotoPage('/home/login', {
+      query: { [this.sys.env.ROUTER_KEY_RETURNTO]: this.app.$getReturnTo() },
+    });
+  }
+
+  protected render() {
+    return (
+      <div class="min-h-screen bg-base-200 flex items-center p-6">
+        <section class="card mx-auto w-full max-w-md bg-base-100 shadow-xl">
+          <div class="card-body gap-4">
+            <div>
+              <h1 class="card-title text-2xl">{this.scope.locale.Register()}</h1>
+              <p class="mt-1 text-sm text-base-content/70">{this.scope.locale.RegisterHelp()}</p>
+            </div>
+            {this.submitted ? (
+              <>
+                <p class="text-sm text-base-content/70">
+                  {this.scope.locale.RegisterActivationPending()}
+                </p>
+                <button
+                  class="btn btn-primary w-full"
+                  type="button"
+                  onClick={() => this.gotoLogin()}
+                >
+                  {this.scope.locale.BackToLogin()}
+                </button>
+              </>
+            ) : (
+              <>
+                <ZForm
+                  data={this.user}
+                  schema={this.schemaRegister}
+                  onSubmitData={data => this.submitRegister(data)}
+                  onShowError={async ({ error }) => {
+                    await this.$performCommand('basic-commands:alert', {
+                      type: 'error',
+                      text: error.message,
+                    });
+                  }}
+                  slotFooter={$$form => {
+                    return (
+                      <button
+                        disabled={$$form.formState.isSubmitting}
+                        type="submit"
+                        class="btn btn-primary w-full"
+                      >
+                        {this.scope.locale.Register()}
+                      </button>
+                    );
+                  }}
+                ></ZForm>
+                <p class="text-center text-sm text-base-content/70">
+                  {this.scope.locale.AlreadyHaveAccount()}{' '}
+                  <button class="link link-primary" type="button" onClick={() => this.gotoLogin()}>
+                    {this.scope.locale.Login()}
+                  </button>
+                </p>
+              </>
+            )}
+          </div>
+        </section>
+      </div>
+    );
+  }
+}
+
+function omitSchemaProperty(schema: SchemaObject | undefined, property: string) {
+  if (!schema) return;
+  const { [property]: _, ...properties } = schema.properties ?? {};
+  return {
+    ...schema,
+    properties,
+    required: schema.required?.filter(item => item !== property),
+  };
+}

package/zova/src/suite/a-home/modules/home-login/src/routes.ts

@@ -1,6 +1,8 @@
 import type { IModuleRoute } from 'zova-module-a-router';
 
 import { ZPageLogin } from './.metadata/page/login.js';
+import { ZPagePasswordResetRequest } from './.metadata/page/passwordResetRequest.js';
+import { ZPageRegister } from './.metadata/page/register.js';
 
 export const routes: IModuleRoute[] = [
   //
@@ -13,4 +15,22 @@ export const routes: IModuleRoute[] = [
       ssrProfile: 'public',
     },
   },
+  {
+    path: 'register',
+    component: ZPageRegister,
+    meta: {
+      layout: 'empty',
+      requiresAuth: false,
+      ssrProfile: 'public',
+    },
+  },
+  {
+    path: 'password-reset',
+    component: ZPagePasswordResetRequest,
+    meta: {
+      layout: 'empty',
+      requiresAuth: false,
+      ssrProfile: 'public',
+    },
+  },
 ];