chore: ajuste le style des formulaires verticaux

front/src/components/ArticleCreate.jsx

@@ -75,7 +75,7 @@ export default function ArticleCreate ({ onSubmit }) {
 
   return (
     <section>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className={styles.form}>
         <Field
           ref={titleInputRef}
           {...titleBindings}

front/src/components/Credentials.jsx

@@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
-
 import { useGraphQL } from '../helpers/graphQL'
 import { changePassword as query } from './Credentials.graphql'
 import styles from './credentials.module.scss'
@@ -92,7 +91,7 @@ export default function Credentials () {
           disabled={!canSubmit}
           primary={true}
         >
-          {isUpdating ? 'Updating…' : 'Change'}
+          {isUpdating ? t('credentials.updatePassword.updatingButton') : t('credentials.updatePassword.confirmButton')}
         </Button>
       </form>
     </section>

front/src/components/Login.jsx

@@ -70,8 +70,8 @@ export default function Login () {
       </section>
 
       <section className={styles.box}>
-        <h1 className={styles.loginTitle}>Welcome to Stylo!</h1>
-        <form onSubmit={handleSubmit}>
+        <h1>Welcome to Stylo!</h1>
+        <form onSubmit={handleSubmit} className={styles.loginForm}>
           <fieldset>
             <legend>
               Connect with a Huma-Num account <small>(recommended)</small>
@@ -82,7 +82,7 @@ export default function Login () {
               <a href="https://humanum.hypotheses.org/5754#content">How does it work?</a>
             </p>
 
-            <p className={styles.authenticationProviderLinks}>
+            <p>
               <a
                 className={styles.humaNumConnectBtn}
                 href={backendEndpoint + '/login/openid'}

front/src/components/Select.jsx

@@ -4,14 +4,8 @@ import fieldStyles from './field.module.scss'
 import { clsx } from 'clsx'
 
 const Select = forwardRef((props, forwardedRef) => {
-  const alignLabel = props.alignLabel !== false
   return (<div className={clsx(fieldStyles.field, 'control-field')} ref={forwardedRef}>
-    {props.label && <label htmlFor={props.id} style={
-      alignLabel ? {
-        flexBasis: "10rem",
-        textAlign: "end"
-      } : {}
-    }>{props.label}</label>}
+    {props.label && <label htmlFor={props.id}>{props.label}</label>}
     <div className={styles.selectContainer}>
       <select className={props.className || styles.select} {...props}>{props.children}</select>
     </div>

front/src/components/TagCreate.module.scss

@@ -21,4 +21,10 @@ fieldset {
 
 .create {
   margin: 2rem 0 1rem;
+
+  > form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
 }

front/src/components/UserInfos.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react'
 import { Check, Clipboard, Loader } from 'react-feather'
+import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch, shallowEqual } from 'react-redux'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 
@@ -15,6 +16,7 @@ import MonacoYamlEditor from './Write/providers/monaco/YamlEditor'
 
 export default function UserInfos () {
   const dispatch = useDispatch()
+  const { t } = useTranslation()
   const runQuery = useGraphQL()
   const activeUser = useSelector(state => state.activeUser, shallowEqual)
   const zoteroToken = useSelector(state => state.activeUser.zoteroToken)
@@ -26,7 +28,10 @@ export default function UserInfos () {
   const [yaml, setYaml] = useState(activeUser.yaml)
   const [isSaving, setIsSaving] = useState(false)
 
-  const updateActiveUserDetails = useCallback((payload) => dispatch({ type: `UPDATE_ACTIVE_USER_DETAILS`, payload }), [])
+  const updateActiveUserDetails = useCallback((payload) => dispatch({
+    type: `UPDATE_ACTIVE_USER_DETAILS`,
+    payload
+  }), [])
   const clearZoteroToken = useCallback(() => dispatch({ type: 'CLEAR_ZOTERO_TOKEN' }), [])
   const handleYamlUpdate = useCallback((yaml) => setYaml(yaml), [])
 
@@ -52,98 +57,96 @@ export default function UserInfos () {
   }, [activeUser._id, yaml, displayName, firstName, lastName, institution])
 
   return (<>
-    <section className={styles.section}>
-      <h2>Account information</h2>
-      <form onSubmit={updateInfo}>
-        <Field
-          id="displayNameField"
-          label="Display name"
-          type="text"
-          value={displayName}
-          onChange={(e) => setDisplayName(etv(e))}
-          placeholder="Display name"
-        />
-        <Field
-          id="firstNameField"
-          label="First Name"
-          type="text"
-          value={firstName}
-          onChange={(e) => setFirstName(etv(e))}
-          placeholder="First name"
-        />
-        <Field
-          id="lastNameField"
-          label="Last Name"
-          type="text"
-          value={lastName}
-          onChange={(e) => setLastName(etv(e))}
-          placeholder="Last name"
-        />
-        <Field
-          id="institutionField"
-          label="Institution"
-          type="text"
-          value={institution}
-          onChange={(e) => setInstitution(etv(e))}
-          placeholder="Institution name"
-        />
-        <Field id="yamlField" label="Default YAML">
-          <MonacoYamlEditor
-            id="yamlField"
-            text={activeUser.yaml}
-            onTextUpdate={handleYamlUpdate}
+      <section className={styles.section}>
+        <h2>{t('user.account.title')}</h2>
+        <form onSubmit={updateInfo} className={styles.form}>
+          <Field
+            id="displayNameField"
+            label={t('user.account.displayName')}
+            type="text"
+            value={displayName}
+            onChange={(e) => setDisplayName(etv(e))}
           />
-        </Field>
-        <Field  label="Zotero">
-          <>
-            {zoteroToken && <span>Linked with <b>{zoteroToken}</b> account.</span>}
-            {!zoteroToken && <span>No linked account.</span>}
-            {zoteroToken && (
-              <Button title="Unlink this Zotero account" onClick={unlinkZoteroAccount}>
-                Unlink
-              </Button>
-            )}
-          </>
-        </Field>
+          <Field
+            id="firstNameField"
+            label={t('user.account.firstName')}
+            type="text"
+            value={firstName}
+            onChange={(e) => setFirstName(etv(e))}
+          />
+          <Field
+            id="lastNameField"
+            label={t('user.account.lastName')}
+            type="text"
+            value={lastName}
+            onChange={(e) => setLastName(etv(e))}
+          />
+          <Field
+            id="institutionField"
+            label={t('user.account.institution')}
+            type="text"
+            value={institution}
+            onChange={(e) => setInstitution(etv(e))}
+          />
+          <Field id="yamlField" label="Default YAML">
+            <MonacoYamlEditor
+              id="yamlField"
+              text={activeUser.yaml}
+              onTextUpdate={handleYamlUpdate}
+            />
+          </Field>
+          <Field label="Zotero" className={styles.zotero}>
+            <>
+              {zoteroToken && <span>Linked with <code>{zoteroToken}</code> account.</span>}
+              {!zoteroToken && <span>No linked account.</span>}
+              {zoteroToken && (
+                <Button title="Unlink this Zotero account" onClick={unlinkZoteroAccount}>
+                  Unlink
+                </Button>
+              )}
+            </>
+          </Field>
+          <div className={formStyles.footer}>
+            <Button primary={true} disabled={isSaving}>
+              {isSaving ? <Loader/> : <Check/>}
+              Save changes
+            </Button>
+          </div>
+        </form>
+      </section>
 
-        <div className={formStyles.footer}>
-          <Button primary={true} disabled={isSaving}>
-            {isSaving ? <Loader /> : <Check />}
-            Save changes
-          </Button>
+      <section className={styles.section}>
+        <div className={styles.info}>
+          <Field label={t("user.account.email")}>
+            <>{activeUser.email}</>
+          </Field>
+          {activeUser.username && <Field label="Username"><>{activeUser.username}</>
+          </Field>}
+          <Field label={t("user.account.authentication")}>
+            <>{activeUser.authType === 'oidc' ? 'OpenID (External)' : 'Password'}</>
+          </Field>
+          <Field label={t("user.account.apiKey")} className={styles.apiKeyField}>
+            <>
+              <code className={styles.apiKeyValue} title={t("user.account.apiKeyValue", {token: sessionToken})}>{sessionToken}</code>
+              <CopyToClipboard text={sessionToken}>
+                <Button title={t("user.account.copyApiKey")} icon={true}>
+                  <Clipboard/>
+                </Button>
+              </CopyToClipboard>
+            </>
+          </Field>
+          <Field label={t("user.account.id")}>
+            <code>{activeUser._id}</code>
+          </Field>
+          {activeUser.admin && <Field label="Admin">✔️</Field>}
+          <Field label={t("user.account.createdAt")}>
+            <TimeAgo date={activeUser.createdAt}/>
+          </Field>
+          <Field label={t("user.account.updatedAt")}>
+            <TimeAgo date={activeUser.updatedAt}/>
+          </Field>
         </div>
-      </form>
-    </section>
-
-    <section className={styles.section}>
-      <Field label="Email">
-        <>{activeUser.email}</>
-      </Field>
-      {activeUser.username && <Field label="Username"><>{activeUser.username}</></Field>}
-      <Field label="Authentication">
-        <>{activeUser.authType === 'oidc' ? 'OpenID (External)' : 'Password'}</>
-      </Field>
-      <Field label="API Key">
-        <>
-          <code className={styles.apiKey} title={`API Key value is ${sessionToken}`}>{sessionToken}</code>
-          <CopyToClipboard text={sessionToken}>
-            <Button title="Copy API Key value to clipboard" icon={true}>
-              <Clipboard />
-            </Button>
-          </CopyToClipboard>
-        </>
-      </Field>
-      <Field label="Identifier">
-        <code>{activeUser._id}</code>
-      </Field>
-      {activeUser.admin && <Field label="Admin">✔️</Field>}
-      <Field label="Created">
-        <TimeAgo date={activeUser.createdAt}/>
-      </Field>
-      <Field label="Updated">
-        <TimeAgo date={activeUser.updatedAt}/>
-      </Field>
-    </section>
-  </>
+      </section>
+    </>
   )
 }

front/src/components/articleCreate.module.scss

@@ -2,9 +2,6 @@
 @use '../styles/variables' as *;
 
 .titleField {
-  label {
-    flex-basis: 5rem;
-  }
   input {
     width: 100%;
   }
@@ -25,16 +22,19 @@
   }
 }
 
-.field {
+.form {
   display: flex;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
+  flex-direction: column;
+  gap: 1rem;
+}
 
+.field {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0 0.25rem;
+
   > label {
-    flex-shrink: 0;
-    margin-right: 1rem;
-    padding: calc(0.5em - 1px) 0;
-    flex-basis: 5rem;
-    text-align: end;
+    font-weight: 600;
+    padding: 0 0 0.25rem;
   }
 }

front/src/components/corpus/CorpusCreate.jsx

@@ -58,7 +58,7 @@ export default function CorpusCreate ({onSubmit}) {
 
   return (
     <section>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className={styles.form}>
         <Field
           ref={titleInputRef}
           {...titleBindings}

front/src/components/corpus/CorpusUpdate.jsx

@@ -7,7 +7,7 @@ import Field from '../Field.jsx'
 
 import { updateCorpus } from "./Corpus.graphql"
 
-import styles from './corpusEdit.module.scss'
+import styles from './corpusUpdate.module.scss'
 
 
 export default function CorpusUpdate ({corpus, onSubmit}) {
@@ -53,7 +53,7 @@ export default function CorpusUpdate ({corpus, onSubmit}) {
 
   return (
     <section>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className={styles.form}>
         <Field
           ref={titleInputRef}
           {...titleBindings}