(wip) rhf select

app/frontend/src/javascript/components/authentication-provider/provider-form.tsx

@@ -5,17 +5,20 @@ import { AuthenticationProvider } from '../../models/authentication-provider';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';
 import { RHFInput } from '../base/rhf-input';
+import { useTranslation } from 'react-i18next';
 
 declare const Application: IApplication;
 
 interface ProviderFormProps {
+  action: 'create' | 'update',
   provider?: AuthenticationProvider,
   onError: (message: string) => void,
   onSuccess: (message: string) => void,
 }
 
-export const ProviderForm: React.FC<ProviderFormProps> = ({ provider, onError, onSuccess }) => {
+export const ProviderForm: React.FC<ProviderFormProps> = ({ action, provider, onError, onSuccess }) => {
   const { handleSubmit, register } = useForm<AuthenticationProvider>({ defaultValues: { ...provider } });
+  const { t } = useTranslation('shared');
 
   const onSubmit: SubmitHandler<AuthenticationProvider> = (data: AuthenticationProvider) => {
     if (data) {
@@ -27,17 +30,17 @@ export const ProviderForm: React.FC<ProviderFormProps> = ({ provider, onError, o
 
   return (
     <form className="provider-form" onSubmit={handleSubmit(onSubmit)}>
-      <RHFInput id="provider_name" register={register} />
+      <RHFInput id="name" register={register} readOnly={action === 'update'} rules={{ required: true }} label={t('app.shared.authentication.name')} />
     </form>
   );
 };
 
-const ProviderFormWrapper: React.FC<ProviderFormProps> = ({ provider, onError, onSuccess }) => {
+const ProviderFormWrapper: React.FC<ProviderFormProps> = ({ action, provider, onError, onSuccess }) => {
   return (
     <Loader>
-      <ProviderForm provider={provider} onError={onError} onSuccess={onSuccess} />
+      <ProviderForm action={action} provider={provider} onError={onError} onSuccess={onSuccess} />
     </Loader>
   );
 };
 
-Application.Components.component('providerForm', react2angular(ProviderFormWrapper, ['provider', 'onSuccess', 'onError']));
+Application.Components.component('providerForm', react2angular(ProviderFormWrapper, ['action', 'provider', 'onSuccess', 'onError']));

app/frontend/src/javascript/components/base/fab-select.tsx

@@ -0,0 +1,20 @@
+import React, { SelectHTMLAttributes } from 'react';
+import Select from 'react-select';
+import { Controller } from 'react-hook-form';
+
+interface FabSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  className?: string
+}
+
+export const FabSelect: React.FC<FabSelectProps> = ({ className }) => {
+  return (
+    <div className={`fab-select ${className || ''}`}>
+      <Controller name="description" control={control} render={({ field: { onChange, value } }) =>
+        <Select defaultValue={defaultValues()}
+                placeholder={t('app.shared.event.select_theme')}
+                options={buildOptions()}
+                isMulti />
+      } />
+    </div>
+  );
+};

app/frontend/src/javascript/components/base/rhf-input.tsx

@@ -7,8 +7,8 @@ type inputType = string|number|readonly string [];
 type ruleTypes<TFieldValues> = {
   required?: boolean | string,
   pattern?: RegExp | {value: RegExp, message: string},
-  minLenght?: number,
-  maxLenght?: number,
+  minLength?: number,
+  maxLength?: number,
   min?: number,
   max?: number,
   validate?: Validate<TFieldValues>;

app/frontend/src/javascript/controllers/admin/authentications.js

@@ -233,6 +233,20 @@ Application.Controllers.controller('NewAuthenticationController', ['$scope', '$s
   function ($scope, $state, $rootScope, $uibModal, dialogs, growl, mappingFieldsPromise, authProvidersPromise, AuthProvider, _t) {
     $scope.mode = 'creation';
 
+    /**
+     * Shows a success message forwarded from a child react component
+     */
+    $scope.onSuccess = function (message) {
+      growl.success(message);
+    };
+
+    /**
+     * Callback triggered by react components
+     */
+    $scope.onError = function (message) {
+      growl.error(message);
+    };
+
     // default parameters for the new authentication provider
     $scope.provider = {
       name: '',

app/frontend/templates/admin/authentications/new.html

@@ -36,6 +36,8 @@
                 <section class="panel panel-default bg-light m-lg">
                     <div class="panel-body m-r">
 
+                        <provider-form action="'create'" on-success="onSuccess" on-error="onError"></provider-form>
+
                         <ng-include src="'/admin/authentications/_form.html'"></ng-include>
                         <ng-include src="'/admin/authentications/_oauth2.html'" ng-if="provider.providable_type == 'OAuth2Provider'"></ng-include>
                     </div>   <!-- ./panel-body  -->