diff --git a/config.json b/config.json index dba7af10a2ab8143cafeab7484aa8988e6268b9c..c4e1421d114e38ecf39d4a8bdf1abfd0567771ba 100644 --- a/config.json +++ b/config.json @@ -11,7 +11,8 @@ "oauth": true, "slug": "enedis", "id": "io.cozy.konnectors/enedis" - } + }, + "siteLink": "https://mon-compte-client.enedis.fr/" }, { "fluidTypeId": 1, @@ -24,7 +25,8 @@ "oauth": false, "slug": "egl", "id": "io.cozy.konnectors/egl" - } + }, + "siteLink": "https://agence.eaudugrandlyon.com/inscription.aspx" }, { "fluidTypeId": 2, @@ -37,7 +39,8 @@ "oauth": false, "slug": "grdf", "id": "io.cozy.konnectors/grdf" - } + }, + "siteLink": "https://monespace.grdf.fr/monespace/connexion" } ] } diff --git a/src/components/ContentComponents/Konnector/KonnectorForm.tsx b/src/components/ContentComponents/Konnector/KonnectorForm.tsx index ac3455632e6aecd4f5035c6c33802d00a4f6dcf1..9a36bc472d656e6586f03dc195583147f6204ff6 100644 --- a/src/components/ContentComponents/Konnector/KonnectorForm.tsx +++ b/src/components/ContentComponents/Konnector/KonnectorForm.tsx @@ -32,6 +32,7 @@ const KonnectorForm: React.FC<KonnectorFormProps> = ({ }: KonnectorFormProps) => { const konnectorName: string = fluidConfig.konnectorConfig.name const konnectorType: string = fluidConfig.konnectorConfig.type + const siteLink: string = fluidConfig.siteLink function revealPassword(idInput: string) { const input = document.getElementById(idInput) @@ -91,7 +92,12 @@ const KonnectorForm: React.FC<KonnectorFormProps> = ({ <StyledButton type="submit" color="primary" disabled={loading}> {t('KONNECTORCONFIG.BTN_CONNECTION')} </StyledButton> - <StyledButton type="button" color="secondary" disabled={loading}> + <StyledButton + type="button" + color="secondary" + disabled={loading} + onClick={() => window.open(siteLink, '_blank')} + > {t('KONNECTORCONFIG.BTN_NOACCOUNT')} </StyledButton> </form> diff --git a/src/components/ContentComponents/Konnector/KonnectorLoading.tsx b/src/components/ContentComponents/Konnector/KonnectorLoading.tsx index 4df37acf2141d6a2d1d9fcbead68cf9b811d6eb9..e502a959adf95d7626d29dad1a0c217b69925a6e 100644 --- a/src/components/ContentComponents/Konnector/KonnectorLoading.tsx +++ b/src/components/ContentComponents/Konnector/KonnectorLoading.tsx @@ -23,7 +23,7 @@ const KonnectorLoading: React.FC<KonnectorLoadingProps> = ({ return ( <div className="kload-content"> <Lottie options={loadingOptions} height={50} width={50} /> - <div className="kload-content-text text-16-normal"> + <div className="kload-content-text kload-content-text-center text-16-normal"> <div>{t('KONNECTORCONFIG.PLZ_WAIT')}</div> </div> <div className="kload-content-text text-16-normal"> diff --git a/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx b/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx index 598d7a0a559fd3f9d43501dbbe39bb4f2a2ad7dc..19381bb90596d91d588578eb669002210338c0b9 100644 --- a/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx +++ b/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx @@ -7,6 +7,7 @@ import StyledButton from 'components/CommonKit/Button/StyledButton' interface KonnectorOAuthFormProps { konnector: Konnector + siteLink: string onSuccess: Function loading: boolean t: Function @@ -14,6 +15,7 @@ interface KonnectorOAuthFormProps { const KonnectorOAuthForm: React.FC<KonnectorOAuthFormProps> = ({ konnector, + siteLink, onSuccess, loading, t, @@ -35,7 +37,12 @@ const KonnectorOAuthForm: React.FC<KonnectorOAuthFormProps> = ({ </div> </div> <div className="koauthform-button"> - <StyledButton type="button" color="secondary" disabled={loading}> + <StyledButton + type="button" + color="secondary" + disabled={loading} + onClick={() => window.open(siteLink, '_blank')} + > {t('oauth.create_account.' + konnector.slug)} </StyledButton> </div> diff --git a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx index 707c4c27ee7a936fcff69781cb949238fed64f76..5a196ab0d35e78ab2f0507750c083b9d339e5dbf 100644 --- a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx +++ b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx @@ -313,6 +313,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({ ) : ( <KonnectorOAuthForm konnector={konnector} + siteLink={fluidConfig.siteLink} onSuccess={initOauthAccount} loading={loading} /> diff --git a/src/services/IFluidConfig.ts b/src/services/IFluidConfig.ts index 473047d7441a35d61852ed91e542e9f6864d16c6..8cb83c90cfde02a631039baf377044f5d1ba03dc 100644 --- a/src/services/IFluidConfig.ts +++ b/src/services/IFluidConfig.ts @@ -13,4 +13,5 @@ export default interface IFluidConfig { coefficient: number dataDelayOffset: number konnectorConfig: KonnectorConfig + siteLink: string } diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss index db808a98592bcdab12223f138552ab32b2635b5c..f6ae533e9c7fc2539824e80e78d465de84667545 100644 --- a/src/styles/components/_konnector.scss +++ b/src/styles/components/_konnector.scss @@ -107,6 +107,10 @@ // KonnectorOAuthForm .koauthform{ + margin: 0 1.5rem; + @media #{$large-phone} { + margin: 0; + } .koauthform-text{ color: $text-bright; padding-top: 1rem; @@ -118,12 +122,17 @@ // KonnectorLoading .kload-content { - margin: 0.5rem 0; + margin: 0.5rem 1.5rem; + @media #{$large-phone} { + margin: 0.5rem 0; + } .kload-content-text { - text-align: center; color: $text-bright; margin: 1rem 0; } + .kload-content-text-center { + text-align: center; + } } .state-icon {