use tpk-form

TRIPTYK · May 30, 2024 · 949a2f1 · 949a2f1
1 parent 85c5bbe
commit 949a2f1
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 180 deletions.
diff --git a/app/components/forms/forgot-password.gts b/app/components/forms/forgot-password.gts
@@ -2,8 +2,7 @@ import { LinkTo } from '@ember/routing';
 
 import InputsValidationComponent from 'ember-boilerplate/components/inputs/input-validation';
 import t from 'ember-intl/helpers/t';
-
-import YupForm from './yup-form';
+import TpkForm from '@triptyk/ember-input-validation/components/tpk-form';
 
 import type { TOC } from '@ember/component/template-only';
 import type { ForgotPasswordChangeset } from 'ember-boilerplate/changesets/forgot-password';
@@ -22,18 +21,18 @@ export interface FormsForgotPasswordSignature {
 }
 
 const FormsForgotPassword: TOC<FormsForgotPasswordSignature> = <template>
-  <YupForm
+  <TpkForm
     class="px-4 py-8 mt-8 bg-white shadow space-y-6 sm:rounded-lg sm:px-10 sm:mx-auto sm:w-full sm:max-w-md"
     data-test-form="forgot-password"
     @onSubmit={{@saveFunction}}
     @changeset={{@changeset}}
     @validationSchema={{@validationSchema}}
     ...attributes
+    as |F|
   >
-    <InputsValidationComponent
+    <F.TpkInput
       class="input_block"
       @label={{t "components.forms.forgot-password.email"}}
-      @changeset={{@changeset}}
       @validationField="email"
       data-test-input="email"
     />
@@ -47,7 +46,7 @@ const FormsForgotPassword: TOC<FormsForgotPasswordSignature> = <template>
         <span>{{t "components.forms.forgot-password.cancel"}}</span>
       </LinkTo>
     </div>
-  </YupForm>
+  </TpkForm>
 </template>;
 
 export default FormsForgotPassword;
diff --git a/app/components/forms/login.gts b/app/components/forms/login.gts
@@ -1,13 +1,9 @@
-import { LinkTo } from '@ember/routing';
-
-import InputsValidationComponent from 'ember-boilerplate/components/inputs/input-validation';
-import t from 'ember-intl/helpers/t';
-
-import YupForm from './yup-form';
-
+import TpkForm from '@triptyk/ember-input-validation/components/tpk-form';
 import type { TOC } from '@ember/component/template-only';
 import type { LoginChangeset } from 'ember-boilerplate/changesets/login';
 import type { Schema } from 'yup';
+import t from 'ember-intl/helpers/t';
+import { LinkTo } from '@ember/routing';
 
 export interface FormsLoginSignature {
   Args: {
@@ -22,23 +18,22 @@ export interface FormsLoginSignature {
 }
 
 const FormsLogin: TOC<FormsLoginSignature> = <template>
-  <YupForm
+  <TpkForm
     class="space-y-6 bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10 mt-8 sm:mx-auto sm:w-full sm:max-w-md"
     @onSubmit={{@saveFunction}}
     @changeset={{@changeset}}
     @validationSchema={{@validationSchema}}
     data-test-form-login
+    as |F|
   >
-    <InputsValidationComponent
+    <F.TpkInput
       @label={{t "components.forms.login.email"}}
-      @changeset={{@changeset}}
       @validationField="email"
       class="input_block"
       data-test-input="email"
     />
-    <InputsValidationComponent
+    <F.TpkInput
       @label={{t "components.forms.login.password"}}
-      @changeset={{@changeset}}
       @validationField="password"
       @type="password"
       class="input_block"
@@ -58,7 +53,7 @@ const FormsLogin: TOC<FormsLoginSignature> = <template>
         </span>
       </button>
     </div>
-  </YupForm>
+  </TpkForm>
 </template>;
 
 export default FormsLogin;
diff --git a/app/components/forms/password-recovery.gts b/app/components/forms/password-recovery.gts
@@ -1,11 +1,8 @@
-import InputsValidationComponent from 'ember-boilerplate/components/inputs/input-validation';
-import t from 'ember-intl/helpers/t';
-
-import YupForm from './yup-form';
-
 import type { TOC } from '@ember/component/template-only';
 import type { ResetPasswordChangeset } from 'ember-boilerplate/changesets/reset-password';
 import type { Schema } from 'yup';
+import TpkForm from '@triptyk/ember-input-validation/components/tpk-form';
+import t from 'ember-intl/helpers/t';
 
 export interface FormsPasswordRecoveryComponentSignature {
   Args: {
@@ -20,24 +17,23 @@ export interface FormsPasswordRecoveryComponentSignature {
 }
 
 const FormsPasswordRecovery: TOC<FormsPasswordRecoveryComponentSignature> = <template>
-  <YupForm
+  <TpkForm
     class="px-4 py-8 mt-8 bg-white rounded-lg shadow space-y-6 sm:px-10 sm:mx-auto sm:w-full sm:max-w-md"
     @onSubmit={{@saveFunction}}
     @changeset={{@changeset}}
     @validationSchema={{@validationSchema}}
     ...attributes
+    as |F|
   >
-    <InputsValidationComponent
+    <F.TpkInput
       class="input_block"
       @label={{t "components.forms.reset-password.new_password"}}
-      @changeset={{@changeset}}
       @validationField="password"
       data-test-input="password"
     />
-    <InputsValidationComponent
+    <F.TpkInput
       class="input_block"
       @label={{t "components.forms.reset-password.confirm_new_password"}}
-      @changeset={{@changeset}}
       @validationField="confirmPassword"
       data-test-input="confirmPassword"
     />
@@ -46,7 +42,7 @@ const FormsPasswordRecovery: TOC<FormsPasswordRecoveryComponentSignature> = <tem
         components.forms.reset-password.validate
       </span>
     </button>
-  </YupForm>
+  </TpkForm>
 </template>;
 
 export default FormsPasswordRecovery;
diff --git a/app/components/forms/register.gts b/app/components/forms/register.gts
@@ -1,13 +1,10 @@
 import Component from '@glimmer/component';
 import { hash } from '@ember/helper';
-
-import InputsValidationComponent from 'ember-boilerplate/components/inputs/input-validation';
 import t from 'ember-intl/helpers/t';
 
-import YupForm from './yup-form';
-
 import type { RegisterChangeset } from 'ember-boilerplate/changesets/register';
 import type { Schema } from 'yup';
+import TpkForm from '@triptyk/ember-input-validation/components/tpk-form';
 
 export interface FormsRegisterSignature {
   Args: {
@@ -38,62 +35,56 @@ export default class RegisterForm extends Component<FormsRegisterSignature> {
   };
 
   <template>
-    <YupForm
+    <TpkForm
       @changeset={{@changeset}}
       @onSubmit={{@saveFunction}}
       @validationSchema={{@validationSchema}}
       data-test-form="register"
       class="px-4 py-8 mt-8 bg-white rounded-lg shadow space-y-6 sm:px-10 sm:mx-auto sm:w-full sm:max-w-xl grid grid-cols-12 gap-x-6 gap-y-4"
       ...attributes
+      as |I|
     >
-      <InputsValidationComponent
+      <I.TpkInput
         class="input_block col-span-12"
         @label={{t "components.forms.register.last_name"}}
-        @changeset={{@changeset}}
         @validationField="lastName"
         data-test-input="lastName"
       />
-      <InputsValidationComponent
+      <I.TpkInput
         class="input_block col-span-12"
         @label={{t "components.forms.register.first_name"}}
-        @changeset={{@changeset}}
         @validationField="firstName"
         data-test-input="firstName"
       />
-      <InputsValidationComponent
+      <I.TpkInput
         class="input_block col-span-12"
         @label={{t "components.forms.register.email"}}
-        @changeset={{@changeset}}
         @validationField="email"
         data-test-input="email"
       />
-      <InputsValidationComponent
+      <I.TpkInput
         class="input_block col-span-12"
         @label={{t "components.forms.register.phone"}}
-        @changeset={{@changeset}}
         @validationField="phone"
         @mask="+30 000000000"
         @maskOptions={{hash lazy=false}}
         data-test-input="phone"
       />
-      <InputsValidationComponent
+      <I.TpkInput
         class="input_block col-span-12"
         @label={{t "components.forms.register.password"}}
-        @changeset={{@changeset}}
         @validationField="password"
         data-test-input="password"
       />
-      <InputsValidationComponent
+      <I.TpkInput
         class="input_block col-span-12"
         @label={{t "components.forms.register.confirm_password"}}
-        @changeset={{@changeset}}
         @validationField="confirmPassword"
         data-test-input="confirmPassword"
       />
-      <InputsValidationComponent
+      <I.TpkInput
         class="input_block col-span-6"
         @label={{t "components.forms.register.gift"}}
-        @changeset={{@changeset}}
         @validationField="gift"
         @mask="Number €"
         @maskOptions={{this.maskForEuro}}
@@ -105,6 +96,6 @@ export default class RegisterForm extends Component<FormsRegisterSignature> {
           {{t "global.submit"}}
         </span>
       </button>
-    </YupForm>
+    </TpkForm>
   </template>
 }
diff --git a/app/components/forms/yup-form.gts b/app/components/forms/yup-form.gts
diff --git a/app/handlers/users.ts b/app/handlers/users.ts
@@ -14,11 +14,14 @@ export const usersHandlers= [
     return HttpResponse.json({
         data: {
           id: '1',
-          email: '',
-          firstName: '',
-          lastName: '',
-          phone: '',
-          role: '',
+          type: 'user',
+          attributes: {
+            email: '',
+            firstName: '',
+            lastName: '',
+            phone: '',
+            role: '',
+          }
         },
       });
   }),

diff --git a/app/routes/application.ts b/app/routes/application.ts
@@ -1,6 +1,11 @@
 import { registerDestructor } from '@ember/destroyable';
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
+import TpkValidationCheckboxComponent from '@triptyk/ember-input-validation/components/tpk-validation-checkbox';
+import TpkValidationDatepickerComponent from '@triptyk/ember-input-validation/components/tpk-validation-datepicker';
+import TpkValidationFileComponent from '@triptyk/ember-input-validation/components/tpk-validation-file';
+import type TpkFormService from '@triptyk/ember-input-validation/services/tpk-form';
+import InputsValidationComponent from 'ember-boilerplate/components/inputs/input-validation';
 import config from 'ember-boilerplate/config/environment';
 
 import { usersHandlers } from 'ember-boilerplate/handlers/users';
@@ -14,8 +19,12 @@ export default class Application extends Route {
   @service declare session: SessionService;
   @service declare currentUser: CurrentUserService;
   @service declare intl: IntlService;
+  @service declare tpkForm: TpkFormService;
 
   async beforeModel() {
+
+    this.tpkForm.TpkInput = InputsValidationComponent as never;
+
     await this.setupMSWForDevelopment();
     this.intl.setLocale(['fr-fr']);
     await this.session.setup();