From 7f4d1ecd827effbed9d4d7447357de177d20b365 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Tue, 26 May 2020 15:54:12 +0200
Subject: [PATCH] feat: change Oauth form display
---
src/assets/icons/visu/enedis-logo.svg | 4 +
.../CommonKit/Button/StyledOauthButton.tsx | 88 +++++++++++++++++++
.../Konnector/KonnectorOAuthForm.tsx | 26 +++++-
.../ContentComponents/OAuth/OAuthForm.tsx | 22 +++--
src/locales/en.json | 16 +++-
src/styles/components/_konnector.scss | 10 +++
src/styles/components/_oauth.scss | 16 ++++
src/styles/index.scss | 1 +
8 files changed, 170 insertions(+), 13 deletions(-)
create mode 100644 src/assets/icons/visu/enedis-logo.svg
create mode 100644 src/components/CommonKit/Button/StyledOauthButton.tsx
create mode 100644 src/styles/components/_oauth.scss
diff --git a/src/assets/icons/visu/enedis-logo.svg b/src/assets/icons/visu/enedis-logo.svg
new file mode 100644
index 000000000..0e07225ab
--- /dev/null
+++ b/src/assets/icons/visu/enedis-logo.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10C0 4.47715 4.47715 0 10 0H38C43.5229 0 48 4.47715 48 10V38C48 43.5229 43.5228 48 38 48H0V10Z" fill="black"/>
+<path d="M0 21V28H9V30C9 36.6274 14.3726 42 21 42H47.1679C47.7031 40.775 48 39.4222 48 38V35H21C18.2386 35 16 32.7615 16 30V28H33C36.3137 28 39 25.3137 39 22V12C39 8.68628 36.3137 6 33 6H15C11.6863 6 9 8.68628 9 12V19H16V16C16 14.3431 17.3431 13 19 13H29C30.6569 13 32 14.3431 32 16V18C32 19.6569 30.6569 21 29 21H0Z" fill="#F1C017"/>
+</svg>
diff --git a/src/components/CommonKit/Button/StyledOauthButton.tsx b/src/components/CommonKit/Button/StyledOauthButton.tsx
new file mode 100644
index 000000000..9e3e6ebec
--- /dev/null
+++ b/src/components/CommonKit/Button/StyledOauthButton.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import MuiButton, { ButtonProps } from '@material-ui/core/Button'
+import {
+ withStyles,
+ MuiThemeProvider,
+ createMuiTheme,
+} from '@material-ui/core/styles'
+
+const theme = createMuiTheme({
+ typography: {
+ useNextVariants: true,
+ },
+ shape: {
+ borderRadius: 2,
+ },
+ palette: {
+ primary: {
+ main: '#E3B82A',
+ },
+ secondary: {
+ main: '#7B7B7B',
+ },
+ },
+})
+
+const BaseButton = withStyles({
+ root: {
+ height: '5rem',
+ margin: '1.5rem 0 0 0',
+ padding: '0px 1px',
+ },
+ label: {
+ textTransform: 'none',
+ fontFamily: 'Lato, sans-serif',
+ fontStyle: 'normal',
+ fontSize: '1rem',
+ lineHeight: '120%',
+ },
+})(MuiButton)
+
+const PrimaryButton = withStyles({
+ root: {
+ background: 'var(--multiColorRadialGradient)',
+ },
+ label: {
+ color: '#000000',
+ fontWeight: 'bold',
+ },
+})(BaseButton)
+
+const SecondaryButton = withStyles({
+ root: {
+ border: '1px solid #121212',
+ },
+ label: {
+ color: '#E0E0E0',
+ fontWeight: 'normal',
+ },
+})(BaseButton)
+
+function MyButton(props: ButtonProps) {
+ return props.color === 'secondary' ? (
+ <SecondaryButton
+ fullWidth
+ color="secondary"
+ variant="outlined"
+ {...props}
+ />
+ ) : (
+ <PrimaryButton fullWidth color="primary" variant="contained" {...props} />
+ )
+}
+
+const StyledOauthButton: React.ComponentType<ButtonProps> = props => {
+ return (
+ <>
+ <MuiThemeProvider theme={theme}>
+ <MyButton {...props}>{props.children}</MyButton>
+ </MuiThemeProvider>
+ </>
+ )
+}
+
+StyledOauthButton.defaultProps = {
+ color: 'primary',
+}
+
+export default StyledOauthButton
diff --git a/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx b/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx
index 2f028ec8f..598d7a0a5 100644
--- a/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx
@@ -1,8 +1,9 @@
import React from 'react'
import { translate } from 'cozy-ui/react/I18n'
-import OAuthForm from 'components/ContentComponents/OAuth/OAuthForm'
import { Konnector } from 'doctypes'
+import OAuthForm from 'components/ContentComponents/OAuth/OAuthForm'
+import StyledButton from 'components/CommonKit/Button/StyledButton'
interface KonnectorOAuthFormProps {
konnector: Konnector
@@ -18,9 +19,26 @@ const KonnectorOAuthForm: React.FC<KonnectorOAuthFormProps> = ({
t,
}: KonnectorOAuthFormProps) => {
return (
- <div>
- {t('oauth.connect.' + konnector.slug)}
- <OAuthForm konnector={konnector} onSuccess={onSuccess} />
+ <div className="koauthform">
+ <div className="koauthform-text text-16-normal">
+ {t('oauth.connect.' + konnector.slug + '.info')}
+ </div>
+ <div className="koauthform-button">
+ <OAuthForm konnector={konnector} onSuccess={onSuccess} />
+ </div>
+ <div className="koauthform-text text-16-bold">
+ <div className="text-16-bold">
+ {t('oauth.no_account.' + konnector.slug + '.title')}
+ </div>
+ <div className="text-16-normal">
+ {t('oauth.no_account.' + konnector.slug + '.text')}
+ </div>
+ </div>
+ <div className="koauthform-button">
+ <StyledButton type="button" color="secondary" disabled={loading}>
+ {t('oauth.create_account.' + konnector.slug)}
+ </StyledButton>
+ </div>
</div>
)
}
diff --git a/src/components/ContentComponents/OAuth/OAuthForm.tsx b/src/components/ContentComponents/OAuth/OAuthForm.tsx
index 10e743b5b..25aafedf8 100644
--- a/src/components/ContentComponents/OAuth/OAuthForm.tsx
+++ b/src/components/ContentComponents/OAuth/OAuthForm.tsx
@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
import { Client, withClient } from 'cozy-client'
import { translate } from 'cozy-ui/react/I18n'
import { Konnector } from 'doctypes'
-import KonnectorService from 'services/konnectorService'
-
import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'
-import StyledButton from 'components/CommonKit/Button/StyledButton'
+import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
+import StyledOauthButton from 'components/CommonKit/Button/StyledOauthButton'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface OAuthFormProps {
konnector: Konnector
@@ -47,14 +47,22 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
const isWaiting = status === WAITING
return !konnector ? null : (
<>
- <StyledButton
+ <StyledOauthButton
type="button"
color="primary"
onClick={handleSubmit}
disabled={isWaiting}
>
- {t('oauth.connect.label')}
- </StyledButton>
+ <div className="oauthform-button-content">
+ <div className="oauthform-button-content-icon">
+ <StyledIcon icon={iconEnedisLogo} size={48} />
+ </div>
+ <div className="oauthform-button-text text-18-bold">
+ <div>{t('oauth.connect.' + konnector.slug + '.label1')}</div>
+ <div>{t('oauth.connect.' + konnector.slug + '.label2')}</div>
+ </div>
+ </div>
+ </StyledOauthButton>
{isWaiting && (
<OAuthWindow
client={client}
diff --git a/src/locales/en.json b/src/locales/en.json
index 73c80f3d7..fec5dcd50 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -172,8 +172,20 @@
},
"oauth": {
"connect": {
- "enedis": "En cliquant sur ce bouton, vous allez accéder à votre compte personnel Enedis où vous pourrez donner votre accord pour qu’Enedis nous transmette vos données.",
- "label": "Connexion"
+ "enedis": {
+ "info" : "En cliquant sur ce bouton, vous allez accéder à votre compte personnel Enedis où vous pourrez donner votre accord pour qu’Enedis nous transmette vos données.",
+ "label1": "J'accède à mon",
+ "label2": "espace client Enedis"
+ }
+ },
+ "no_account" : {
+ "enedis" : {
+ "title": "Pas de compte Enedis ?",
+ "text": "Vous pouvez le créer en vous munissant d'une facture d'élétricité."
+ }
+ },
+ "create_account": {
+ "enedis": "Je créé mon compte personnal Enedis"
},
"window": {
"title": "OAuth"
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
index 910f87906..151e7547b 100644
--- a/src/styles/components/_konnector.scss
+++ b/src/styles/components/_konnector.scss
@@ -105,6 +105,16 @@
}
}
+.koauthform{
+ .koauthform-text{
+ color: $text-bright;
+ padding-top: 1rem;
+ }
+ .koauthform-button{
+ margin-bottom: 1rem;
+ }
+}
+
.state-icon {
height: 22px;
width: 22px;
diff --git a/src/styles/components/_oauth.scss b/src/styles/components/_oauth.scss
new file mode 100644
index 000000000..7e305641f
--- /dev/null
+++ b/src/styles/components/_oauth.scss
@@ -0,0 +1,16 @@
+@import '../base/color';
+@import '../base/breakpoint';
+
+.oauthform-button-content{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .oauthform-button-content-icon{
+ margin: 0 1.375rem;
+ }
+ .oauthform-button-text{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index bbd950cda..840c8d99c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -22,6 +22,7 @@
@import 'components/modal';
@import 'components/faq';
@import 'components/splash';
+@import 'components/oauth';
:root {
--blue: #{$blue};
--
GitLab