From 7c782388d4a278e337069ae1d37ef79ea341905c Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Mon, 8 Jun 2020 11:52:19 +0200
Subject: [PATCH] feat: design for login form
---
.../Konnector/KonnectorLoginForm.tsx | 57 +++++++++++--------
.../ContentComponents/OAuth/OAuthForm.tsx | 6 +-
src/styles/components/_auth.scss | 33 ++---------
src/styles/components/_konnector.scss | 11 ++--
4 files changed, 44 insertions(+), 63 deletions(-)
diff --git a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
index 2db7d009f..49124b24a 100644
--- a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
@@ -165,35 +165,42 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
</span>
</div>
<div className="form-message">{error}</div>
- <div className="kloginauthform-button">
- <StyledAuthButton type="submit" color="primary" disabled={loading}>
- <div className="authform-button-content">
- <div className="authform-button-content-icon">
- {icon && <StyledIcon icon={icon} size={48} />}
+ <div className="kloginauthform">
+ <div className="kloginauthform-button">
+ <StyledAuthButton
+ className="form-button"
+ type="submit"
+ color="primary"
+ disabled={loading}
+ >
+ <div className="authform-button-content">
+ <div className="authform-button-content-icon">
+ {icon && <StyledIcon icon={icon} size={48} />}
+ </div>
+ <div className="authform-button-text text-18-bold">
+ <div>{t('auth.' + fluidConfig.name + '.connect.label1')}</div>
+ <div>{t('auth.' + fluidConfig.name + '.connect.label2')}</div>
+ </div>
</div>
- <div className="kauthform-button-text text-18-bold">
- <div>{t('auth.' + fluidConfig.name + '.connect.label1')}</div>
- <div>{t('auth.' + fluidConfig.name + '.connect.label2')}</div>
- </div>
- </div>
- </StyledAuthButton>
- </div>
- <div className="kloginauthform-text text-16-bold">
- <div className="text-16-bold">
- {t('auth.' + fluidConfig.name + '.no_account.title')}
+ </StyledAuthButton>
</div>
- <div className="text-16-normal">
- {t('auth.' + fluidConfig.name + '.no_account.text')}
+ <div className="kloginauthform-text text-16-bold">
+ <div className="text-16-bold">
+ {t('auth.' + fluidConfig.name + '.no_account.title')}
+ </div>
+ <div className="text-16-normal">
+ {t('auth.' + fluidConfig.name + '.no_account.text')}
+ </div>
</div>
+ <StyledButton
+ type="button"
+ color="secondary"
+ disabled={loading}
+ onClick={() => window.open(siteLink, '_blank')}
+ >
+ {t('auth.' + fluidConfig.name + '.create_account')}
+ </StyledButton>
</div>
- <StyledButton
- type="button"
- color="secondary"
- disabled={loading}
- onClick={() => window.open(siteLink, '_blank')}
- >
- {t('auth.' + fluidConfig.name + '.create_account')}
- </StyledButton>
</form>
)
}
diff --git a/src/components/ContentComponents/OAuth/OAuthForm.tsx b/src/components/ContentComponents/OAuth/OAuthForm.tsx
index e05577f6e..aae44d9b8 100644
--- a/src/components/ContentComponents/OAuth/OAuthForm.tsx
+++ b/src/components/ContentComponents/OAuth/OAuthForm.tsx
@@ -55,15 +55,15 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
onClick={handleSubmit}
disabled={isWaiting}
>
- <div className="oauthform-button-content">
- <div className="oauthform-button-content-icon">
+ <div className="authform-button-content">
+ <div className="authform-button-content-icon">
{isWaiting ? (
<StyledBlackSpinner size={48} />
) : (
<StyledIcon icon={iconEnedisLogo} size={48} />
)}
</div>
- <div className="oauthform-button-text text-18-bold">
+ <div className="authform-button-text text-18-bold">
<div>{t('auth.' + konnector.slug + '.connect.label1')}</div>
<div>{t('auth.' + konnector.slug + '.connect.label2')}</div>
</div>
diff --git a/src/styles/components/_auth.scss b/src/styles/components/_auth.scss
index 736144313..b4c77eef0 100644
--- a/src/styles/components/_auth.scss
+++ b/src/styles/components/_auth.scss
@@ -6,40 +6,17 @@
justify-content: center;
align-items: center;
width: 100%;
- .authform-button-text{
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- text-align: left;
- margin-left: 1.25rem;
- }
-}
-
-.oauthform-button-content{
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- .oauthform-button-text{
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- text-align: left;
- margin-left: 1.25rem;
+ @media #{$large-phone} {
+ justify-content: left;
}
-}
-
-.nooauthform-button-content{
- display: flex;
- justify-content: center;
- align-items: center;
- .nooauthform-button-content-icon{
+ .authform-button-content-icon{
margin: 0 1.375rem;
}
- .nooauthform-button-text{
+ .authform-button-text{
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
+ max-width: 10.625rem;
}
}
\ No newline at end of file
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
index 489feeeea..f45481cfd 100644
--- a/src/styles/components/_konnector.scss
+++ b/src/styles/components/_konnector.scss
@@ -143,20 +143,17 @@
}
// KonnectorLoginForm
-.kloginauthform{
- margin: 0 1.5rem;
- @media #{$large-phone} {
- margin: 0;
- }
- .kloginauthform-text{
+.kloginauthform {
+ .kloginauthform-text {
color: $text-bright;
padding-top: 1rem;
}
- .kloginauthform-button{
+ .kloginauthform-button {
margin-bottom: 1rem;
}
}
+
// KonnectorLoading
.klaunch-content {
margin: 0.5rem 1.5rem;
--
GitLab