From c6c3105bd9f8945bd2973579adc8711fc787aaa8 Mon Sep 17 00:00:00 2001 From: Guillaume Grossetie Date: Fri, 29 Nov 2024 12:09:30 +0100 Subject: [PATCH 1/3] chore: ajuste le style des formulaires verticaux MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - traduction des libellés dans la page du compte utilisateur - bascule le formulaire d'authentification et de création de compte en vertical - bascule le formulaire du compte utilisateur en vertical ref #1105 --- front/src/components/Credentials.jsx | 3 +- front/src/components/Login.jsx | 6 +- front/src/components/UserInfos.jsx | 185 ++++++++++--------- front/src/components/credentials.module.scss | 29 ++- front/src/components/field.module.scss | 12 +- front/src/components/login.module.scss | 12 +- front/src/locales/en/translation.json | 15 ++ front/src/locales/fr/translation.json | 15 ++ 8 files changed, 165 insertions(+), 112 deletions(-) diff --git a/front/src/components/Credentials.jsx b/front/src/components/Credentials.jsx index f1055c01d..804447b67 100644 --- a/front/src/components/Credentials.jsx +++ b/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')} diff --git a/front/src/components/Login.jsx b/front/src/components/Login.jsx index adf1cbab5..57ed18ce2 100644 --- a/front/src/components/Login.jsx +++ b/front/src/components/Login.jsx @@ -70,8 +70,8 @@ export default function Login () {
-

Welcome to Stylo!

-
+

Welcome to Stylo!

+
Connect with a Huma-Num account (recommended) @@ -82,7 +82,7 @@ export default function Login () { How does it work?

-

+

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 (<> -

-

Account information

- - setDisplayName(etv(e))} - placeholder="Display name" - /> - setFirstName(etv(e))} - placeholder="First name" - /> - setLastName(etv(e))} - placeholder="Last name" - /> - setInstitution(etv(e))} - placeholder="Institution name" - /> - - +

{t('user.account.title')}

+ + setDisplayName(etv(e))} /> - - - <> - {zoteroToken && Linked with {zoteroToken} account.} - {!zoteroToken && No linked account.} - {zoteroToken && ( - - )} - - + setFirstName(etv(e))} + /> + setLastName(etv(e))} + /> + setInstitution(etv(e))} + /> + + + + + <> + {zoteroToken && Linked with {zoteroToken} account.} + {!zoteroToken && No linked account.} + {zoteroToken && ( + + )} + + +
+ +
+ +
-
- +
+
+ + <>{activeUser.email} + + {activeUser.username && <>{activeUser.username} + } + + <>{activeUser.authType === 'oidc' ? 'OpenID (External)' : 'Password'} + + + <> + {sessionToken} + + + + + + + {activeUser._id} + + {activeUser.admin && ✔️} + + + + + +
- -
- -
- - <>{activeUser.email} - - {activeUser.username && <>{activeUser.username}} - - <>{activeUser.authType === 'oidc' ? 'OpenID (External)' : 'Password'} - - - <> - {sessionToken} - - - - - - - {activeUser._id} - - {activeUser.admin && ✔️} - - - - - - -
- +
+ ) } diff --git a/front/src/components/credentials.module.scss b/front/src/components/credentials.module.scss index 82274871f..028b35f35 100644 --- a/front/src/components/credentials.module.scss +++ b/front/src/components/credentials.module.scss @@ -17,9 +17,23 @@ } } +.form { + display: flex; + flex-direction: column; + gap: 0.5rem +} + +.info { + display: flex; + flex-direction: column; + gap: 0.75rem +} + .passwordForm { display: flex; flex-wrap: wrap; + padding-top: 1rem; + padding-bottom: 1rem; } .warningMessage { @@ -31,10 +45,21 @@ gap: .5rem; padding: .5rem; } +.apiKeyField { + :global { + & .control { + border: 1px solid $main-border-color; + display: flex; + align-items: center; + max-width: 50%; + align-self: start; + padding-left: 0.5rem; + } + } +} -.apiKey { +.apiKeyValue { display: inline-block; - max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/front/src/components/field.module.scss b/front/src/components/field.module.scss index df7690830..cbf3ea43b 100644 --- a/front/src/components/field.module.scss +++ b/front/src/components/field.module.scss @@ -28,16 +28,12 @@ .field { display: flex; align-items: flex-start; - - &, & ~ button { - margin-bottom: .5rem; - margin-top: .5rem; - } + flex-direction: column; label { + font-weight: 600; flex-shrink: 0; - margin-right: 1rem; - padding: calc(0.5em - 1px) 0; + padding: 0 0 0.25rem; &[for] { cursor: pointer; @@ -104,7 +100,7 @@ .footer { margin: 1rem 0 0; - padding-left: calc(10rem + 1rem); + align-self: flex-end; } .inlineFields { diff --git a/front/src/components/login.module.scss b/front/src/components/login.module.scss index 5458f20b1..0df9c8a57 100644 --- a/front/src/components/login.module.scss +++ b/front/src/components/login.module.scss @@ -13,7 +13,6 @@ background-color: $extra-background-color; margin: 1rem auto; - :last-child { margin-bottom: 0; } @@ -25,17 +24,22 @@ } form > fieldset { + display: flex; + flex-direction: column; + gap: 1rem; border: 0; margin: 0 0 1em 0; padding: 0; - legend { font-weight: bold; margin: 0 0 1rem; + padding: 0; + font-size: 1.1rem; + .help { margin-top: -1rem; + margin-bottom: 0; } } } @@ -112,10 +116,6 @@ a.humaNumConnectBtn { } } -.authenticationProviderLinks { - margin: 2em 0; -} - .actions { display: flex; align-items: center; diff --git a/front/src/locales/en/translation.json b/front/src/locales/en/translation.json index 496e4ea65..302a26393 100644 --- a/front/src/locales/en/translation.json +++ b/front/src/locales/en/translation.json @@ -1,4 +1,19 @@ { + "user.account.title": "Account information", + "user.account.displayName": "Display name", + "user.account.firstName": "First name", + "user.account.lastName": "Last name", + "user.account.institution": "Institution", + "user.account.id": "Identifier", + "user.account.email": "Email", + "user.account.createdAt": "Account created", + "user.account.updatedAt": "Account updated", + "user.account.apiKey": "API access key", + "user.account.authentication": "Authentication type", + "user.account.copyApiKey": "Copy API key value to clipboard", + "user.account.apiKeyValue": "API key value is: {{token}}", + "credentials.updatePassword.updatingButton": "Updating…", + "credentials.updatePassword.confirmButton": "Update", "workspace.myspace": "My space", "workspace.description.label": "Description", "workspace.createdBy.label": "by", diff --git a/front/src/locales/fr/translation.json b/front/src/locales/fr/translation.json index 872bf50e2..a6fa5bf44 100644 --- a/front/src/locales/fr/translation.json +++ b/front/src/locales/fr/translation.json @@ -1,4 +1,19 @@ { + "user.account.title": "Information du compte", + "user.account.displayName": "Nom d'affichage", + "user.account.firstName": "Prénom", + "user.account.lastName": "Nom", + "user.account.institution": "Institution", + "user.account.id": "Identifiant", + "user.account.email": "Courriel", + "user.account.createdAt": "Compte crée", + "user.account.updatedAt": "Compte mis à jour", + "user.account.apiKey": "Clé d'accès à l'API", + "user.account.authentication": "Type d'authentification", + "user.account.copyApiKey": "Copier la clé d'accès à l'API dans le presse-papier", + "user.account.apiKeyValue": "La valeur de la clé d'API est : {{token}}", + "credentials.updatePassword.updatingButton": "Mise à jour…", + "credentials.updatePassword.confirmButton": "Mettre à jour", "workspace.myspace": "Mon espace", "workspace.description.label": "Description", "workspace.createdBy.label": "par", From c26af97a0be88cf59e8be3c685d4b703c79cd63f Mon Sep 17 00:00:00 2001 From: Guillaume Grossetie Date: Fri, 29 Nov 2024 12:31:56 +0100 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20migre=20les=20formulaire=20des=20?= =?UTF-8?q?=C3=A9tiquettes,=20des=20corpus=20et=20des=20exports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/ArticleCreate.jsx | 2 +- front/src/components/Select.jsx | 8 +---- front/src/components/SelectUser.jsx | 30 ------------------- front/src/components/TagCreate.module.scss | 6 ++++ .../src/components/articleCreate.module.scss | 22 +++++++------- front/src/components/corpus/CorpusCreate.jsx | 2 +- front/src/components/corpus/CorpusUpdate.jsx | 4 +-- .../corpus/corpusCreate.module.scss | 17 ++++++----- ...t.module.scss => corpusUpdate.module.scss} | 17 ++++++----- front/src/components/field.module.scss | 1 - 10 files changed, 40 insertions(+), 69 deletions(-) delete mode 100644 front/src/components/SelectUser.jsx rename front/src/components/corpus/{corpusEdit.module.scss => corpusUpdate.module.scss} (57%) diff --git a/front/src/components/ArticleCreate.jsx b/front/src/components/ArticleCreate.jsx index 5ce791f76..eba807a9a 100644 --- a/front/src/components/ArticleCreate.jsx +++ b/front/src/components/ArticleCreate.jsx @@ -75,7 +75,7 @@ export default function ArticleCreate ({ onSubmit }) { return (
-
+ { - const alignLabel = props.alignLabel !== false return (
- {props.label && } + {props.label && }
diff --git a/front/src/components/SelectUser.jsx b/front/src/components/SelectUser.jsx deleted file mode 100644 index ff98e0ffe..000000000 --- a/front/src/components/SelectUser.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { useCallback } from 'react' -import { useDispatch } from 'react-redux' -import { Users } from 'react-feather' - -import Select from './Select' - -import styles from './articles.module.scss' -import buttonStyles from './button.module.scss' -import clsx from 'clsx' -import { useActiveUserId } from '../hooks/user' - -export default function SelectUser ({ accounts }) { - const dispatch = useDispatch() - - const currentUserId = useActiveUserId() - const setCurrentUserId = useCallback((userId) => dispatch({ type: 'USER_PREFERENCES_TOGGLE', key: 'currentUser', value: userId }), []) - - const handleCurrentUserChange = useCallback((event) => { - setCurrentUserId(event.target.value) - }, [currentUserId]) - - return (
- - -
) -} diff --git a/front/src/components/TagCreate.module.scss b/front/src/components/TagCreate.module.scss index 3265e472d..ecfad16e3 100644 --- a/front/src/components/TagCreate.module.scss +++ b/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; + } } diff --git a/front/src/components/articleCreate.module.scss b/front/src/components/articleCreate.module.scss index 88549a0e6..a0fabe681 100644 --- a/front/src/components/articleCreate.module.scss +++ b/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; } } diff --git a/front/src/components/corpus/CorpusCreate.jsx b/front/src/components/corpus/CorpusCreate.jsx index eb8e50ace..1e379fde5 100644 --- a/front/src/components/corpus/CorpusCreate.jsx +++ b/front/src/components/corpus/CorpusCreate.jsx @@ -58,7 +58,7 @@ export default function CorpusCreate ({onSubmit}) { return (
- + - + Date: Fri, 29 Nov 2024 13:33:39 +0100 Subject: [PATCH 3/3] chore: ajuste l'alignement sur le compte Zotero --- front/src/components/UserInfos.jsx | 4 ++-- front/src/components/credentials.module.scss | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/front/src/components/UserInfos.jsx b/front/src/components/UserInfos.jsx index d9b822b4a..311a54b5d 100644 --- a/front/src/components/UserInfos.jsx +++ b/front/src/components/UserInfos.jsx @@ -95,9 +95,9 @@ export default function UserInfos () { onTextUpdate={handleYamlUpdate} /> - + <> - {zoteroToken && Linked with {zoteroToken} account.} + {zoteroToken && Linked with {zoteroToken} account.} {!zoteroToken && No linked account.} {zoteroToken && (