From 1a8dc390f3b76c97cffea3b3ba6ba871ba8665ea Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Mon, 4 Apr 2022 11:55:14 +0200
Subject: [PATCH] (front) export form component to angular

---
 .../authentication-provider/provider-form.tsx | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx b/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
index 3bbd9c5a8..55bdd18a1 100644
--- a/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
+import { react2angular } from 'react2angular';
 import { AuthenticationProvider } from '../../models/authentication-provider';
+import { Loader } from '../base/loader';
+import { IApplication } from '../../models/application';
+import { RHFInput } from '../base/rhf-input';
+
+declare const Application: IApplication;
 
 interface ProviderFormProps {
   provider?: AuthenticationProvider,
@@ -9,7 +15,7 @@ interface ProviderFormProps {
 }
 
 export const ProviderForm: React.FC<ProviderFormProps> = ({ provider, onError, onSuccess }) => {
-  const { handleSubmit } = useForm<AuthenticationProvider>({ defaultValues: { ...provider } });
+  const { handleSubmit, register } = useForm<AuthenticationProvider>({ defaultValues: { ...provider } });
 
   const onSubmit: SubmitHandler<AuthenticationProvider> = (data: AuthenticationProvider) => {
     if (data) {
@@ -21,7 +27,17 @@ export const ProviderForm: React.FC<ProviderFormProps> = ({ provider, onError, o
 
   return (
     <form className="provider-form" onSubmit={handleSubmit(onSubmit)}>
-
+      <RHFInput id="provider_name" register={register} />
     </form>
   );
 };
+
+const ProviderFormWrapper: React.FC<ProviderFormProps> = ({ provider, onError, onSuccess }) => {
+  return (
+    <Loader>
+      <ProviderForm provider={provider} onError={onError} onSuccess={onSuccess} />
+    </Loader>
+  );
+};
+
+Application.Components.component('providerForm', react2angular(ProviderFormWrapper, ['provider', 'onSuccess', 'onError']));