diff --git a/src/components/ContentComponents/Konnector/KonnectorForm.tsx b/src/components/ContentComponents/Konnector/KonnectorForm.tsx
index 3faeff9ed0139e0a2b913313934ec9d147d1eb23..e735794f42cbea3e846a5f80acfe2f25d82ce0ce 100644
--- a/src/components/ContentComponents/Konnector/KonnectorForm.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorForm.tsx
@@ -12,6 +12,7 @@ interface KonnectorFormProps {
account: Account | null
trigger: Trigger | null
handleSuccessForm: Function
+ t: Function
}
const KonnectorForm: React.FC<KonnectorFormProps> = ({
@@ -20,6 +21,7 @@ const KonnectorForm: React.FC<KonnectorFormProps> = ({
account,
trigger,
handleSuccessForm,
+ t,
}: KonnectorFormProps) => {
const oAuth: boolean = fluidConfig.konnectorConfig.oauth
@@ -38,6 +40,7 @@ const KonnectorForm: React.FC<KonnectorFormProps> = ({
/>
) : (
<KonnectorOAuthForm
+ fluidConfig={fluidConfig}
konnector={konnector}
siteLink={fluidConfig.siteLink}
onSuccess={handleSuccess}
diff --git a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
index 80b296cb3c64fd1f02139263d4e79cbc067d0f04..c2777f9d365f88c4fc54c6ffbbecf1aebae7da85 100644
--- a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
@@ -32,7 +32,7 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
client,
t,
}: KonnectorLoginFormProps) => {
- const konnectorName: string = fluidConfig.konnectorConfig.name
+ const konnectorSlug: string = fluidConfig.konnectorConfig.slug
const konnectorType: string = fluidConfig.konnectorConfig.type
const siteLink: string = fluidConfig.siteLink
@@ -145,7 +145,10 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
className="form"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleSubmit(e)}
>
- {t('KONNECTORCONFIG.LABEL_FILLIN')} {konnectorName}
+ <p className="info-provider text-16-normal">
+ {t('auth.' + `${konnectorSlug}` + '.connect.info')}
+ </p>
+
<div className="form-group">
<input
id={'idFieldLogin' + konnectorType}
diff --git a/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx b/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx
index 89d918c9848188d8024aff3fd6e75650dc9f8308..9294521020794401ec0141226ab33429385633d8 100644
--- a/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx
@@ -2,13 +2,14 @@ import React from 'react'
import { Client, withClient } from 'cozy-client'
import { translate } from 'cozy-ui/react/I18n'
-import { Konnector, Trigger } from 'models'
+import { Konnector, Trigger, FluidConfig } from 'models'
import OAuthForm from 'components/ContentComponents/OAuth/OAuthForm'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import AccountService from 'services/account.service'
import TriggerService from 'services/triggers.service'
interface KonnectorOAuthFormProps {
+ fluidConfig: FluidConfig
konnector: Konnector
siteLink: string
onSuccess: Function
@@ -18,6 +19,7 @@ interface KonnectorOAuthFormProps {
}
const KonnectorOAuthForm: React.FC<KonnectorOAuthFormProps> = ({
+ fluidConfig,
konnector,
siteLink,
onSuccess,
@@ -25,6 +27,8 @@ const KonnectorOAuthForm: React.FC<KonnectorOAuthFormProps> = ({
client,
t,
}: KonnectorOAuthFormProps) => {
+ const konnectorSlug: string = fluidConfig.konnectorConfig.slug
+
const handleSuccess = async (accountId: string) => {
const accountService = new AccountService(client)
const account = await accountService.getAccount(accountId)
@@ -40,9 +44,9 @@ const KonnectorOAuthForm: React.FC<KonnectorOAuthFormProps> = ({
}
return (
<div className="koauthform">
- <div className="koauthform-text text-16-normal">
- {t('auth.' + konnector.slug + '.connect.info')}
- </div>
+ <p className="info-provider text-16-normal">
+ {t('auth.' + `${konnectorSlug}` + '.connect.info')}
+ </p>
<div className="koauthform-button">
<OAuthForm konnector={konnector} onSuccess={handleSuccess} />
</div>
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3359efb4672d5372bab8ebcf7358685555fa9bcf..d95ff9e32bbfc2154dca33bf8e4e6c73fe302fac 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -126,7 +126,6 @@
"LABEL_PASSWORD": "password",
"LABEL_UPDATEDAT": "dernière mise-à-jour le",
"LABEL_FREQUENCY": "fréquence",
- "LABEL_FILLIN": "Renseignez vos identifiants",
"LABEL_CONNECTTO_ELECTRICITY": "Se connecter à l'électricité",
"LABEL_CONNECTTO_WATER": "Se connecter à l'eau",
"LABEL_CONNECTTO_GAS": "Se connecter au gaz",
@@ -182,7 +181,10 @@
"BACK": "I'll be back",
"ECOGESTURE": "Voir l'écogeste",
"LINKED_ECOGESTURES": "Écogestes associés",
- "VIEW_START": {"PART1": "Revenez dans ", "PART2": " jours pour voir l'évolution de vos données et découvrir votre objectif"},
+ "VIEW_START": {
+ "PART1": "Revenez dans ",
+ "PART2": " jours pour voir l'évolution de vos données et découvrir votre objectif"
+ },
"VIEW_RESULT": "Résultats le ",
"PERIOD": "Période de defi",
"OK": "Ok",
@@ -217,9 +219,9 @@
"enedisgrandlyon": {
"connect": {
"placeholder": "Adresse mail",
- "info": "En cliquant sur ce bouton, vous accéderez à votre compte Enedis. Vous pourrez donner votre accord pour récupérer vos données de consommation électriques dans votre cloud personnel",
"label1": "J'accède à mon",
- "label2": "espace client Enedis"
+ "label2": "espace client Enedis",
+ "info": "Pour accéder à vos données de consommation électrique, connectez-vous à votre compte Enedis via le bouton ci-dessous. Enedis, gestionnaire du réseau de distribution d’électricité, est responsable de votre compteur Linky et en charge de relever vos consommations pour votre fournisseur d’électricité."
},
"no_account": {
"title": "Pas de compte Enedis ?",
@@ -231,11 +233,13 @@
"connect": {
"placeholder": "Adresse email",
"label1": "Je me connecte à",
- "label2": "mon compte GRDF"
+ "label2": "mon compte GRDF",
+ "info": "Pour accéder à vos données de consommation gaz, connectez-vous à votre compte GRDF. GRDF, gestionnaire du réseau de distribution de gaz, est responsable de votre compteur Gazpar et en charge de relever vos consommations pour votre fournisseur de gaz."
},
"no_account": {
"title": "Pas de compte GRDF ?",
- "text": "Vous pouvez le créer en vous munissant d'une facture de gaz."
+ "text": "Vous pouvez le créer en vous munissant d'une facture de gaz.",
+ "info": "Pour accéder à vos données de consommation d’eau, renseignez vos identifiants Eau du Grand Lyon."
},
"create_account": "Je crée mon compte GRDF"
},
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
index b423f68ab9d0c739a8348368ac5b697a1d40dd6d..127bb35d9eb36f2a79af4475ca36afbaa034589a 100644
--- a/src/styles/components/_konnector.scss
+++ b/src/styles/components/_konnector.scss
@@ -84,6 +84,11 @@
.accordion-content {
overflow: hidden;
transition: max-height 0.6s ease;
+ .info-provider {
+ padding: 0;
+ color: $grey-bright;
+ margin-bottom: 0;
+ }
}
.inline-buttons {
display: flex;