From 5ea921192a4b9759c390ccf5c9378d714e3a2d62 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 15 Apr 2016 23:31:27 +0200 Subject: [PATCH] Overhauled user login --- com.woltlab.wcf/templates/login.tpl | 202 +++++++++--------- com.woltlab.wcf/templates/pageHeaderUser.tpl | 114 +++++----- .../install/files/style/ui/userLogin.scss | 100 +++++++++ wcfsetup/install/lang/de.xml | 15 +- wcfsetup/install/lang/en.xml | 7 +- 5 files changed, 276 insertions(+), 162 deletions(-) create mode 100644 wcfsetup/install/files/style/ui/userLogin.scss diff --git a/com.woltlab.wcf/templates/login.tpl b/com.woltlab.wcf/templates/login.tpl index eab1fd5a9e..0dcf4ea2d5 100644 --- a/com.woltlab.wcf/templates/login.tpl +++ b/com.woltlab.wcf/templates/login.tpl @@ -37,114 +37,118 @@ {include file='formError'} {/if} -
-
- -
-
- - {if $errorField == 'username'} - - {if $errorType == 'empty'} - {lang}wcf.global.form.error.empty{/lang} - {else} - {lang}wcf.user.username.error.{@$errorType}{/lang} - {/if} - - {/if} -
- - - {if !REGISTER_DISABLED} -
-
{lang}wcf.user.login.action{/lang}
-
- - -
-
- {/if} - - -
-
- - {if $errorField == 'password'} - - {if $errorType == 'empty'} - {lang}wcf.global.form.error.empty{/lang} - {else} - {lang}wcf.user.password.error.{@$errorType}{/lang} - {/if} - - {/if} - {lang}wcf.user.lostPassword{/lang} -
- - - {if $supportsPersistentLogins} -
-
+
+ +
+

{lang}wcf.user.login.login{/lang}

+ + +
- + + {if $errorField == 'username'} + + {if $errorType == 'empty'} + {lang}wcf.global.form.error.empty{/lang} + {else} + {lang}wcf.user.username.error.{@$errorType}{/lang} + {/if} + + {/if}
- {/if} - - {event name='fields'} -
- - {hascontent} -
-

{lang}wcf.user.login.3rdParty{/lang}

-
-
+ +
- + + {/if} + {lang}wcf.user.lostPassword{/lang}
+ + {if $supportsPersistentLogins} +
+
+
+ +
+
+ {/if} + + {event name='fields'} + + {include file='captcha'} + +
+ + + {@SECURITY_TOKEN_INPUT_TAG} +
- {/hascontent} - - {event name='sections'} - - {include file='captcha'} - -
- - - {@SECURITY_TOKEN_INPUT_TAG} -
-
+ + {if !REGISTER_DISABLED} +
+

{lang}wcf.user.login.register{/lang}

+ +

{lang}wcf.user.login.register.teaser{/lang}

+ +
+ {lang}wcf.user.login.register.registerNow{/lang} +
+
+ {/if} + + {hascontent} +
+

{lang}wcf.user.login.3rdParty{/lang}

+ +
+
+
+ +
+
+
+ {/hascontent} + + {include file='footer' __disableAds=true} diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl index 57c3d80e89..aebad8c360 100644 --- a/com.woltlab.wcf/templates/pageHeaderUser.tpl +++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl @@ -132,38 +132,10 @@
  • {lang}wcf.user.loginOrRegister{/lang} -
  • - {lang}wcf.user.3rdparty.github.login{/lang} -
    • - {/if} - - {if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''} -
  • - {lang}wcf.user.3rdparty.twitter.login{/lang} -
    • - {/if} - - {if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''} -
  • - {lang}wcf.user.3rdparty.facebook.login{/lang} -
    • - {/if} - - {if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''} -
  • - {lang}wcf.user.3rdparty.google.login{/lang} -
    • - {/if} - - {event name='3rdpartyButtons'} - {/capture} - + diff --git a/wcfsetup/install/files/style/ui/userLogin.scss b/wcfsetup/install/files/style/ui/userLogin.scss new file mode 100644 index 0000000000..ac73f27211 --- /dev/null +++ b/wcfsetup/install/files/style/ui/userLogin.scss @@ -0,0 +1,100 @@ +.loginForm > form { + .userLoginButtons { + margin-top: 20px; + text-align: center; + } + + .thirdPartyLogin { + flex: 0 0 100%; + + & + .thirdPartyLogin { + margin-top: 10px; + } + + .thirdPartyLoginButton { + display: flex; + border-width: 0; + color: rgba(255, 255, 255, 1); + + > .icon { + flex: 0 0 24px; + } + + > span:not(.icon) { + flex: 1 1 auto; + margin-left: 5px; + } + + /* branding */ + &.googleLoginButton { + background-color: rgb(221, 75, 57); + + &:hover { + background-color: rgb(202, 53, 35); + } + } + + &.facebookLoginButton { + background-color: rgb(59, 89, 152); + + &:hover { + background-color: rgb(48, 72, 123); + } + } + + &.twitterLoginButton { + background-color: rgb(85, 172, 238); + + &:hover { + background-color: rgb(48, 154, 234); + } + } + + &.githubLoginButton { + background-color: rgb(68, 68, 68); + + &:hover { + background-color: rgb(48, 48, 48); + } + } + } + } + + @include large-screen-only { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + + -webkit-column-gap: 40px; + -moz-column-gap: 40px; + column-gap: 40px; + + > .section { + margin-top: 0; + + -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ + page-break-inside: avoid; /* Firefox */ + break-inside: avoid; /* IE 10+ */ + + &.loginFormLogin { + -webkit-column-break-after: always; + page-break-after: always; + break-after: always; + } + + &.loginFormRegister { + margin-top: 0; + + & + .loginFormThirdPartyLogin { + margin-top: 30px; + } + } + } + } +} + +@include large-screen-only { + .contentHeader ~ .loginForm { + margin-top: 30px; + } +} diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index f103538bf4..88c6f77ae0 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -2675,6 +2675,10 @@ Fehler sind beispielsweise: + + + Melden Sie sich kostenlos an und nehmen Sie an unserer Community teil!]]> + @@ -2707,9 +2711,6 @@ Fehler sind beispielsweise: - - - @@ -3001,7 +3002,7 @@ Sollten Sie sich nicht auf der Website: {@PAGE_TITLE|language} angemeldet haben, - +  GitHub. Der Benutzername und Ihre E-Mail-Adresse wurden daher bereits ausgefüllt.]]> session->getVar('__githubUsername')}(„{$__wcf->session->getVar('__githubUsername')}“){/if} verknüpfen]]> @@ -3010,7 +3011,7 @@ Sollten Sie sich nicht auf der Website: {@PAGE_TITLE|language} angemeldet haben, - +  Twitter. Der Benutzername wurde daher bereits ausgefüllt. Geben Sie nun noch Ihre E-Mail-Adresse an und Sie können sofort loslegen!]]> session->getVar('__twitterUsername')}(„{$__wcf->session->getVar('__twitterUsername')}“){/if} verknüpfen]]> @@ -3019,7 +3020,7 @@ Sollten Sie sich nicht auf der Website: {@PAGE_TITLE|language} angemeldet haben, - +  Facebook. Der Benutzername und Ihre E-Mail-Adresse wurden daher bereits ausgefüllt.]]> session->getVar('__facebookUsername')}(„{$__wcf->session->getVar('__facebookUsername')}“){/if} verknüpfen]]> @@ -3028,7 +3029,7 @@ Sollten Sie sich nicht auf der Website: {@PAGE_TITLE|language} angemeldet haben, - +  Google. Der Benutzername und Ihre E-Mail-Adresse wurden daher bereits ausgefüllt.]]> session->getVar('__googleUsername')}(„{$__wcf->session->getVar('__googleUsername')}“){/if} verknüpfen]]> diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index 19fb4674ca..d371e85069 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -2706,6 +2706,10 @@ Errors are: + + + Register yourself now and be a part of our community!]]> + @@ -2738,9 +2742,6 @@ Errors are: - - - -- 2.20.1