(wip)(ui) avatar input

app/frontend/src/javascript/components/form/form-input.tsx

@@ -11,7 +11,8 @@ interface FormInputProps<TFieldValues, TInputType> extends FormComponent<TFieldV
   addOn?: ReactNode,
   addOnClassName?: string,
   debounce?: number,
-  type?: 'text' | 'date' | 'password' | 'url' | 'time' | 'tel' | 'search' | 'number' | 'month' | 'email' | 'datetime-local' | 'week' | 'hidden',
+  type?: 'text' | 'date' | 'password' | 'url' | 'time' | 'tel' | 'search' | 'number' | 'month' | 'email' | 'datetime-local' | 'week' | 'hidden' | 'file',
+  accept?: string,
   defaultValue?: TInputType,
   placeholder?: string,
   step?: number | 'any',
@@ -21,7 +22,7 @@ interface FormInputProps<TFieldValues, TInputType> extends FormComponent<TFieldV
 /**
  * This component is a template for an input component to use within React Hook Form
  */
-export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, register, label, tooltip, defaultValue, icon, className, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, warning, formState, step, onChange, debounce }: FormInputProps<TFieldValues, TInputType>) => {
+export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, register, label, tooltip, defaultValue, icon, className, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, warning, formState, step, onChange, debounce, accept }: FormInputProps<TFieldValues, TInputType>) => {
   /**
    * Debounced (ie. temporised) version of the 'on change' callback.
    */
@@ -64,7 +65,8 @@ export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, re
           step={step}
           disabled={disabled}
           readOnly={readOnly}
-          placeholder={placeholder} />
+          placeholder={placeholder}
+          accept={accept} />
         {addOn && <span className={`addon ${addOnClassName || ''}`}>{addOn}</span>}
     </AbstractFormItem>
   );

app/frontend/src/javascript/components/user/avatar-input.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import noAvatar from '../../../../images/no_avatar.png';
+import { FabButton } from '../base/fab-button';
+import { Path, UseFormRegister } from 'react-hook-form';
+import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
+import { FieldPathValue } from 'react-hook-form/dist/types/path';
+import { FieldValues } from 'react-hook-form/dist/types/fields';
+import { FormInput } from '../form/form-input';
+
+interface AvatarInputProps<TFieldValues> {
+  register: UseFormRegister<TFieldValues>,
+  setValue: UseFormSetValue<TFieldValues>,
+}
+
+/**
+ * This component allows to set the user's avatar, in forms managed by react-hook-form.
+ */
+export const AvatarInput: React.FC = <TFieldValues extends FieldValues>({ register, setValue }: AvatarInputProps<FieldValues>) => {
+  /**
+   * Check if the provided user has a configured avatar
+   */
+  const hasAvatar = (): boolean => {
+    return !!user?.profile_attributes?.user_avatar_attributes?.attachment_url;
+  };
+
+  const onAddAvatar = (): void => {
+    setValue(
+      'profile_attributes.user_avatar_attributes._destroy' as Path<TFieldValues>,
+      false as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
+    );
+  };
+
+  return (
+    <div className={`avatar ${className || ''}`}>
+      {!hasAvatar() && <img src={noAvatar} alt="avatar placeholder"/>}
+      {hasAvatar() && <img src={user.profile_attributes.user_avatar_attributes.attachment_url} alt="user's avatar"/>}
+      {mode === 'edit' && <div className="edition">
+        <FabButton onClick={onAddAvatar}>
+          {!hasAvatar() && <span>Add an avatar</span>}
+          {hasAvatar() && <span>Change</span>}
+          <FormInput type="file" accept="image/*" register={register} id="profile_attributes.user_avatar_attributes.attachment"/>
+        </FabButton>
+        {hasAvatar() && <FabButton>Remove</FabButton>}
+      </div>}
+    </div>
+  );
+};
+
+Avatar.defaultProps = {
+  mode: 'display'
+};

app/frontend/src/javascript/components/user/user-profile-form.tsx

@@ -50,7 +50,7 @@ export const UserProfileForm: React.FC<UserProfileFormProps> = ({ action, size,
   return (
     <form className={`user-profile-form user-profile-form--${size} ${className}`} onSubmit={handleSubmit(onSubmit)}>
       <div className="avatar-group">
-        <Avatar user={user}/>
+        <Avatar user={user} />
       </div>
       <div className="fields-group">
         <div className="personnal-data">