feat(user): connexion/déconnexion Zotero depuis les préférences

EcrituresNumeriques · Feb 18, 2025 · c21d1b5 · c21d1b5
1 parent db90080
commit c21d1b5
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 29 deletions.
diff --git a/front/src/components/UserInfos.jsx b/front/src/components/UserInfos.jsx
@@ -6,6 +6,9 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'
 
 import { useGraphQL } from '../helpers/graphQL'
 import { updateUser } from './Credentials.graphql'
+
+import { useSetAuthToken } from '../hooks/user.js'
+
 import etv from '../helpers/eventTargetValue'
 import styles from './credentials.module.scss'
 import formStyles from './field.module.scss'
@@ -34,19 +37,9 @@ export default function UserInfos() {
       }),
     []
   )
-  const clearZoteroToken = useCallback(
-    () => dispatch({ type: 'CLEAR_ZOTERO_TOKEN' }),
-    []
-  )
-
-  const unlinkZoteroAccount = useCallback(async (event) => {
-    event.preventDefault()
 
-    const variables = { user: activeUser._id, details: { zoteroToken: null } }
-    await runQuery({ query: updateUser, variables })
-    clearZoteroToken()
-    setIsSaving(false)
-  }, [])
+  const { link: linkZoteroAccount, unlink: unlinkZoteroAccount } =
+    useSetAuthToken('zotero')
 
   const updateInfo = useCallback(
     async (e) => {
@@ -103,18 +96,42 @@ export default function UserInfos() {
             <>
               {zoteroToken && (
                 <div className={styles.zotero}>
-                  <div>
-                    Linked with <code>{zoteroToken}</code> account.
-                  </div>
+                  <p>
+                    {t('credentials.authentication.linkedService.description', {
+                      service: 'Zotero',
+                      token: zoteroToken,
+                    })}
+                  </p>
                   <Button
-                    title="Unlink this Zotero account"
                     onClick={unlinkZoteroAccount}
+                    type="button"
+                    aria-label={t('credentials.authentication.unlinkLabel', {
+                      service: 'zotero',
+                    })}
+                  >
+                    {t('credentials.authentication.unlinkButton')}
+                  </Button>
+                </div>
+              )}
+              {!zoteroToken && (
+                <div className={styles.zotero}>
+                  <p>
+                    {t(
+                      'credentials.authentication.unlinkedService.description'
+                    )}
+                  </p>
+
+                  <Button
+                    onClick={linkZoteroAccount}
+                    type="button"
+                    aria-label={t('credentials.authentication.linkLabel', {
+                      service: 'zotero',
+                    })}
                   >
-                    Unlink
+                    {t('credentials.authentication.linkButton')}
                   </Button>
                 </div>
               )}
-              {!zoteroToken && <span>No linked account.</span>}
             </>
           </Field>
           <div className={formStyles.footer}>

diff --git a/front/src/createReduxStore.js b/front/src/createReduxStore.js
@@ -90,7 +90,6 @@ export const initialState = {
 function createRootReducer(state) {
   return createReducer(state, {
     PROFILE: setProfile,
-    CLEAR_ZOTERO_TOKEN: clearZoteroToken,
     SET_AUTH_TOKEN: setAuthToken,
     LOGIN: loginUser,
     UPDATE_SESSION_TOKEN: setSessionToken,
@@ -306,16 +305,6 @@ function setProfile(state, action) {
   }
 }
 
-function clearZoteroToken(state) {
-  return {
-    ...state,
-    activeUser: {
-      ...state.activeUser,
-      zoteroToken: null,
-    },
-  }
-}
-
 function setAuthToken(state, { service, token = null }) {
   if (service === 'zotero') {
     return {

diff --git a/front/src/locales/en/translation.json b/front/src/locales/en/translation.json
@@ -31,6 +31,17 @@
   "credentials.logout.confirmButton": "Logout",
   "credentials.updatePassword.updatingButton": "Updating…",
   "credentials.updatePassword.confirmButton": "Update",
+  "credentials.authentication.success.title": "Authentication success",
+  "credentials.authentication.success.description": "Stylo account has been linked to {{ service }}.",
+  "credentials.authentication.error.description": "We did not manage to link {{ service }} service : {{ message }}.",
+  "credentials.authentication.error.title": "Authentication failure",
+  "credentials.authentication.back": "Back to Stylo",
+  "credentials.authentication.linkedService.description": "Stylo account linked to {{ service }} ({{ token }}).",
+  "credentials.authentication.unlinkedService.description": "No linked account.",
+  "credentials.authentication.linkButton": "Link",
+  "credentials.authentication.linkLabel": "Link your Stylo account to {{ service }} service.",
+  "credentials.authentication.unlinkButton": "Unlink",
+  "credentials.authentication.unlinkLabel": "Unlink your Stylo account from {{ service }} service.",
   "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
@@ -31,6 +31,17 @@
   "credentials.logout.confirmButton": "Se déconnecter",
   "credentials.updatePassword.updatingButton": "Mise à jour…",
   "credentials.updatePassword.confirmButton": "Mettre à jour",
+  "credentials.authentication.success.title": "Authentification réussie",
+  "credentials.authentication.success.description": "Votre compte Stylo a bien été relié au service {{ service }}.",
+  "credentials.authentication.error.description": "Nous n'avons pas réussi à connecter le service {{ service }} : {{ message }}.",
+  "credentials.authentication.error.title": "Échec de l'authentification",
+  "credentials.authentication.back": "Revenir à Stylo",
+  "credentials.authentication.linkedService.description": "Compte Stylo connecté à {{ service }} ({{ token }}).",
+  "credentials.authentication.unlinkedService.description": "Pas de compte connecté.",
+  "credentials.authentication.linkButton": "Connecter",
+  "credentials.authentication.linkLabel": "Connecter votre compte Stylo au service {{ service }}.",
+  "credentials.authentication.unlinkButton": "Déconnecter",
+  "credentials.authentication.unlinkLabel": "Déconnecter votre compte Stylo au service {{ service }}.",
   "workspace.myspace": "Mon espace",
   "workspace.description.label": "Description",
   "workspace.createdBy.label": "par",