+ {{t 'components.login_forms.dummy'}}
+ "><%= @commenter.email %> has commented on <%= @translation.key %>:
"><%= @comment.text %>
-">You can reply here
+">You can reply here
diff --git a/lib/web/templates/email/create_comment.text.eex b/lib/web/templates/email/create_comment.text.eex index 6a8efc23..c8df4adc 100644 --- a/lib/web/templates/email/create_comment.text.eex +++ b/lib/web/templates/email/create_comment.text.eex @@ -3,4 +3,4 @@ --- <%= @comment.text %> -You can reply here (<%= webapp_host() %><%= @translation_path %>) +You can reply here (<%= webapp_url() %><%= @translation_path %>) diff --git a/lib/web/templates/email/project_invite.html.eex b/lib/web/templates/email/project_invite.html.eex index 86b7bcd3..a90b217a 100644 --- a/lib/web/templates/email/project_invite.html.eex +++ b/lib/web/templates/email/project_invite.html.eex @@ -1,5 +1,5 @@"><%= @user.email %> has invited you to collaborate on the project "<%= @project.name %>"
-">If you already have an account (<%= @email %>), you can just login and you’ll see the project.
+">If you already have an account (<%= @email %>), you can just login and you’ll see the project.
-">If not, creating an account is as simple as logging in with the invited Google account (<%= @email %>) on <%= webapp_host() %>
+">If not, creating an account is as simple as logging in with the invited Google account (<%= @email %>) on <%= webapp_url() %>
diff --git a/lib/web/templates/email/project_invite.text.eex b/lib/web/templates/email/project_invite.text.eex index 5d370b84..1d4871b2 100644 --- a/lib/web/templates/email/project_invite.text.eex +++ b/lib/web/templates/email/project_invite.text.eex @@ -1,5 +1,5 @@ <%= @user.email %> has invited you to collaborate on the project "<%= @project.name %>". -If you already have an account (<%= @email %>), you can just login (<%= webapp_host() %>) and you’ll see the project. +If you already have an account (<%= @email %>), you can just login (<%= webapp_url() %>) and you’ll see the project. -If not, creating an account is as simple as logging in with the invited Google account (<%= @email %>) on <%= webapp_host() %> +If not, creating an account is as simple as logging in with the invited Google account (<%= @email %>) on <%= webapp_url() %> diff --git a/lib/web/templates/email_layout/index.html.eex b/lib/web/templates/email_layout/index.html.eex index 06501115..94665726 100644 --- a/lib/web/templates/email_layout/index.html.eex +++ b/lib/web/templates/email_layout/index.html.eex @@ -13,7 +13,7 @@+ {{t 'components.login_footer.text'}} + + {{t 'components.login_footer.link'}} + +
diff --git a/webapp/app/pods/components/login-forms/component.js b/webapp/app/pods/components/login-forms/component.js new file mode 100644 index 00000000..9e0a2418 --- /dev/null +++ b/webapp/app/pods/components/login-forms/component.js @@ -0,0 +1,22 @@ +// Vendor +import Component from '@ember/component'; +import {computed} from '@ember/object'; +import config from 'accent-webapp/config/environment'; + +export default Component.extend({ + username: '', + + googleLoginEnabled: computed(() => config.AUTH_PROVIDERS.includes('google')), + dummyLoginEnabled: computed(() => config.AUTH_PROVIDERS.includes('dummy')), + githubLoginEnabled: computed(() => config.AUTH_PROVIDERS.includes('github')), + slackLoginEnabled: computed(() => config.AUTH_PROVIDERS.includes('slack')), + + googleUrl: computed(() => `${config.API.AUTHENTICATION_PATH}/google`), + githubUrl: computed(() => `${config.API.AUTHENTICATION_PATH}/github`), + slackUrl: computed(() => `${config.API.AUTHENTICATION_PATH}/slack`), + dummyUrl: computed('username', function() { + return `${ + config.API.AUTHENTICATION_PATH + }/dummy/callback?email=${this.username}`; + }) +}); diff --git a/webapp/app/pods/components/login-forms/styles.scss b/webapp/app/pods/components/login-forms/styles.scss new file mode 100644 index 00000000..735f8abb --- /dev/null +++ b/webapp/app/pods/components/login-forms/styles.scss @@ -0,0 +1,82 @@ +& { + max-width: 400px; + margin: 0 auto 30px; +} + +.input { + @extend %textInput; + max-width: 300px; + padding: 10px; + width: 100%; + font-family: $font-primary; + font-size: 13px; + border: 2px solid darken($color-green, 5%); + + &:focus { + border-color: $color-green; + } +} + +.loginButton { + max-width: 300px; + position: relative; + display: inline-flex; + justify-content: center; + width: 100%; + padding: 12px 10px; + margin-bottom: 15px; + text-align: center; + background: #fff; + border: 2px solid #888; + font-size: 13px; + + &.loginButton--google { + border: 2px solid darken(#4d90fe, 5%); + text-shadow: none; + color: #4d90fe; + + &:focus, + &:hover { + background: lighten(#4d90fe, 30%); + } + } + + &.loginButton--dummy { + border: 2px solid darken($color-green, 5%); + background: $color-green; + border-radius: 0 0 4px 4px; + margin-top: -3px; + } + + &.loginButton--github { + text-shadow: none; + color: #000; + + &:focus, + &:hover { + background: #eee; + } + } + + &.loginButton--slack { + border: 2px solid #3f0f3f; + text-shadow: none; + color: #3f0f3f; + + &:focus, + &:hover { + background: lighten(#3f0f3f, 79%); + } + } +} + +.loginButton-logo { + position: absolute; + left: 10px; + top: 8px; + width: 26px; + margin-right: 10px; + color: #fff; + font-size: 26px; + line-height: 1; +} diff --git a/webapp/app/pods/components/login-forms/template.hbs b/webapp/app/pods/components/login-forms/template.hbs new file mode 100644 index 00000000..2496bce1 --- /dev/null +++ b/webapp/app/pods/components/login-forms/template.hbs @@ -0,0 +1,32 @@ +{{login-header}} + +{{#if dummyLoginEnabled}} + {{input value=username class="input"}} + +
+ {{t 'components.login_forms.dummy'}}
+
+{{/if}}
+
+{{#if googleLoginEnabled}}
+
+ 
+ {{t 'components.login_forms.google'}}
+
+{{/if}}
+
+{{#if githubLoginEnabled}}
+
+ 
+ {{t 'components.login_forms.github'}}
+
+{{/if}}
+
+{{#if slackLoginEnabled}}
+
+ 
+ {{t 'components.login_forms.slack'}}
+
+{{/if}}
+
+{{login-footer}}
diff --git a/webapp/app/pods/components/login-header/styles.scss b/webapp/app/pods/components/login-header/styles.scss
new file mode 100644
index 00000000..81a019a5
--- /dev/null
+++ b/webapp/app/pods/components/login-header/styles.scss
@@ -0,0 +1,44 @@
+& {
+ max-width: 500px;
+ margin: 100px auto 60px;
+}
+
+.title {
+ display: flex;
+ align-items: center;
+ margin-bottom: 45px;
+}
+
+.title-name {
+ margin-left: 15px;
+ text-decoration: none;
+ font-size: 25px;
+ font-weight: 700;
+ color: $color-black;
+}
+
+.text {
+ font-size: 17px;
+ line-height: 1.3;
+ color: lighten($color-black, 40%);
+}
+
+.text-emphasis {
+ display: block;
+ margin-bottom: 10px;
+ font-weight: bold;
+ font-size: 22px;
+ font-style: normal;
+ color: $color-black;
+}
+
+.logo {
+ width: 30px;
+ height: 30px;
+}
+
+@media (max-width: ($screen-sm)) {
+ & {
+ margin-top: 30px;
+ }
+}
diff --git a/webapp/app/pods/components/login-header/template.hbs b/webapp/app/pods/components/login-header/template.hbs
new file mode 100644
index 00000000..98382468
--- /dev/null
+++ b/webapp/app/pods/components/login-header/template.hbs
@@ -0,0 +1,12 @@
+