From fb2563701c1366ed3a18d4fee883fd12a6e3bed8 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Tue, 26 May 2020 19:12:05 +0200
Subject: [PATCH] feat: add link for account creation
---
config.json | 9 ++++++---
.../ContentComponents/Konnector/KonnectorForm.tsx | 8 +++++++-
.../Konnector/KonnectorLoading.tsx | 2 +-
.../Konnector/KonnectorOAuthForm.tsx | 9 ++++++++-
.../KonnectorViewer/KonnectorViewerCard.tsx | 1 +
src/services/IFluidConfig.ts | 1 +
src/styles/components/_konnector.scss | 13 +++++++++++--
7 files changed, 35 insertions(+), 8 deletions(-)
diff --git a/config.json b/config.json
index dba7af10a..c4e1421d1 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 ac3455632..9a36bc472 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 4df37acf2..e502a959a 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 598d7a0a5..19381bb90 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 707c4c27e..5a196ab0d 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 473047d74..8cb83c90c 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 db808a985..f6ae533e9 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 {
--
GitLab