Merge branch 'features/No-account-links' into 'dev'

Features/no account links

See merge request web-et-numerique/llle_project/ecolyo!12

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"
     }
   ]
 }

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>

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

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>

src/components/ContentComponents/Konnector/KonnectorResult.tsx

@@ -22,7 +22,7 @@ const KonnectorResult: React.FC<KonnectorResultProps> = ({
   t,
 }: KonnectorResultProps) => {
   return (
-    <div>
+    <div className="accordion-update-result">
       <div className="accordion-update">
         <div
           className={

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}
                 />

src/services/IFluidConfig.ts

@@ -13,4 +13,5 @@ export default interface IFluidConfig {
   coefficient: number
   dataDelayOffset: number
   konnectorConfig: KonnectorConfig
+  siteLink: string
 }

src/styles/components/_konnector.scss

@@ -46,6 +46,12 @@
       position: absolute;
     }
   }
+  .accordion-update-result {
+    margin: 0.5rem 1.5rem;
+    @media #{$large-phone} {
+      margin: 0.5rem 0;
+    }
+  }
   .accordion-update {
     flex: 2;
     padding: 0.5rem 1rem;
@@ -107,6 +113,10 @@
 
 // KonnectorOAuthForm
 .koauthform{
+  margin: 0 1.5rem;
+  @media #{$large-phone} {
+    margin: 0;
+  }
   .koauthform-text{
     color: $text-bright;
     padding-top: 1rem;
@@ -118,12 +128,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 {