diff options
-rw-r--r-- | src/api/apiBase.ts | 23 | ||||
-rw-r--r-- | src/components/auth/Welcome.js | 32 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 3 | ||||
-rw-r--r-- | src/styles/welcome.scss | 28 |
4 files changed, 68 insertions, 18 deletions
diff --git a/src/api/apiBase.ts b/src/api/apiBase.ts index 80ab99ac6..d7cc9b810 100644 --- a/src/api/apiBase.ts +++ b/src/api/apiBase.ts | |||
@@ -54,3 +54,26 @@ export function serverBase() { | |||
54 | 54 | ||
55 | return fixUrl(terms); | 55 | return fixUrl(terms); |
56 | } | 56 | } |
57 | |||
58 | export function serverName(): string { | ||
59 | |||
60 | const serverType = (window as any).ferdium.stores.settings.all.app.server; | ||
61 | const noServer = 'You are using Ferdium without a server'; | ||
62 | |||
63 | let nameServer; | ||
64 | switch (serverType) { | ||
65 | case LIVE_FRANZ_API: | ||
66 | nameServer = 'Franz Server'; | ||
67 | break; | ||
68 | case LIVE_FERDIUM_API: | ||
69 | nameServer = 'Ferdium Server'; | ||
70 | break; | ||
71 | case noServer: | ||
72 | nameServer = 'no Server'; | ||
73 | break; | ||
74 | default: | ||
75 | nameServer = 'a Custom Server'; | ||
76 | } | ||
77 | |||
78 | return nameServer; | ||
79 | } | ||
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js index d595aef3d..18b506eba 100644 --- a/src/components/auth/Welcome.js +++ b/src/components/auth/Welcome.js | |||
@@ -5,6 +5,7 @@ import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; | |||
5 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | import serverlessLogin from '../../helpers/serverless-helpers'; | 6 | import serverlessLogin from '../../helpers/serverless-helpers'; |
7 | import { shuffleArray } from '../../helpers/array-helpers'; | 7 | import { shuffleArray } from '../../helpers/array-helpers'; |
8 | import { serverName } from '../../api/apiBase'; | ||
8 | 9 | ||
9 | import Link from '../ui/Link'; | 10 | import Link from '../ui/Link'; |
10 | import { H1 } from '../ui/headline'; | 11 | import { H1 } from '../ui/headline'; |
@@ -18,9 +19,13 @@ const messages = defineMessages({ | |||
18 | id: 'welcome.loginButton', | 19 | id: 'welcome.loginButton', |
19 | defaultMessage: 'Login to your account', | 20 | defaultMessage: 'Login to your account', |
20 | }, | 21 | }, |
22 | changeServerMessage: { | ||
23 | id: 'login.changeServerMessage', | ||
24 | defaultMessage: 'You are using {serverNameParse}, do you want to switch?' | ||
25 | }, | ||
21 | changeServer: { | 26 | changeServer: { |
22 | id: 'login.changeServer', | 27 | id: 'login.changeServer', |
23 | defaultMessage: 'Change server' | 28 | defaultMessage: 'Change here!' |
24 | }, | 29 | }, |
25 | serverless: { | 30 | serverless: { |
26 | id: 'services.serverless', | 31 | id: 'services.serverless', |
@@ -47,6 +52,9 @@ class Welcome extends Component { | |||
47 | let { recipes } = this.props; | 52 | let { recipes } = this.props; |
48 | recipes = shuffleArray(recipes); | 53 | recipes = shuffleArray(recipes); |
49 | recipes.length = 8 * 2; | 54 | recipes.length = 8 * 2; |
55 | |||
56 | const serverNameParse = serverName(); | ||
57 | |||
50 | return ( | 58 | return ( |
51 | <div className="welcome"> | 59 | <div className="welcome"> |
52 | <div className="welcome__content"> | 60 | <div className="welcome__content"> |
@@ -56,15 +64,10 @@ class Welcome extends Component { | |||
56 | alt="" | 64 | alt="" |
57 | /> | 65 | /> |
58 | {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */} | 66 | {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */} |
59 | <div className="welcome__text"> | ||
60 | <H1>Ferdium</H1> | ||
61 | </div> | ||
62 | </div> | 67 | </div> |
63 | <Link to={changeServerRoute} className="button__change-server"> | 68 | <div className="welcome__text"> |
64 | <span> | 69 | <H1>Ferdium</H1> |
65 | {intl.formatMessage(messages.changeServer)} | 70 | </div> |
66 | </span> | ||
67 | </Link> | ||
68 | <div className="welcome__buttons"> | 71 | <div className="welcome__buttons"> |
69 | <Link to={signupRoute} className="button button__inverted"> | 72 | <Link to={signupRoute} className="button button__inverted"> |
70 | {intl.formatMessage(messages.signupButton)} | 73 | {intl.formatMessage(messages.signupButton)} |
@@ -72,7 +75,16 @@ class Welcome extends Component { | |||
72 | <Link to={loginRoute} className="button"> | 75 | <Link to={loginRoute} className="button"> |
73 | {intl.formatMessage(messages.loginButton)} | 76 | {intl.formatMessage(messages.loginButton)} |
74 | </Link> | 77 | </Link> |
75 | <br /> | 78 | <div className="welcome__text__change-server"> |
79 | <span> | ||
80 | {intl.formatMessage(messages.changeServerMessage, { serverNameParse })} | ||
81 | </span> | ||
82 | <Link to={changeServerRoute} className="button__change-server"> | ||
83 | <span> | ||
84 | {intl.formatMessage(messages.changeServer)} | ||
85 | </span> | ||
86 | </Link> | ||
87 | </div> | ||
76 | <br /> | 88 | <br /> |
77 | <hr /> | 89 | <hr /> |
78 | <br /> | 90 | <br /> |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index c19429e6d..f51c798ac 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -64,7 +64,8 @@ | |||
64 | "locked.touchId": "Unlock with Touch ID", | 64 | "locked.touchId": "Unlock with Touch ID", |
65 | "locked.touchIdPrompt": "unlock via Touch ID", | 65 | "locked.touchIdPrompt": "unlock via Touch ID", |
66 | "locked.unlockWithPassword": "Unlock with Password", | 66 | "locked.unlockWithPassword": "Unlock with Password", |
67 | "login.changeServer": "Change server", | 67 | "login.changeServer": "Change here!", |
68 | "login.changeServerMessage": "You are using {serverNameParse}, do you want to switch?", | ||
68 | "login.customServerQuestion": "Using a custom Ferdium server?", | 69 | "login.customServerQuestion": "Using a custom Ferdium server?", |
69 | "login.customServerSuggestion": "Try importing your Franz account", | 70 | "login.customServerSuggestion": "Try importing your Franz account", |
70 | "login.email.label": "Email address", | 71 | "login.email.label": "Email address", |
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index 09d02d2eb..3ffc3f227 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -14,20 +14,27 @@ | |||
14 | } | 14 | } |
15 | 15 | ||
16 | &__text { | 16 | &__text { |
17 | border-left: 1px solid #fff; | ||
18 | margin-left: 40px; | ||
19 | padding-left: 40px; | ||
20 | |||
21 | h1 { | 17 | h1 { |
22 | font-size: 60px; | 18 | font-size: 60px; |
23 | letter-spacing: -0.4rem; | 19 | letter-spacing: -0.4rem; |
24 | margin-bottom: 5px; | 20 | margin-bottom: 5px; |
21 | color: rgb(255, 255, 255); | ||
22 | justify-content: center; | ||
23 | margin-top: 5%; | ||
24 | display: flex; | ||
25 | } | 25 | } |
26 | 26 | ||
27 | h2 { | 27 | h2 { |
28 | margin-bottom: 0; | 28 | margin-bottom: 0; |
29 | margin-left: 2px; | 29 | margin-left: 2px; |
30 | } | 30 | } |
31 | |||
32 | &__change-server { | ||
33 | display: flex; | ||
34 | margin: 10% auto auto auto; | ||
35 | justify-content: center; | ||
36 | color: #999; | ||
37 | } | ||
31 | } | 38 | } |
32 | 39 | ||
33 | &__services { | 40 | &__services { |
@@ -71,9 +78,16 @@ | |||
71 | 78 | ||
72 | &__change-server { | 79 | &__change-server { |
73 | display: flex; | 80 | display: flex; |
74 | width: 30%; | 81 | margin: 0 0 0 1%; |
75 | margin: 5% auto 5% auto; | 82 | color: #999; |
76 | justify-content: center; | 83 | text-decoration: underline; |
84 | } | ||
85 | |||
86 | &__change-server:hover { | ||
87 | display: flex; | ||
88 | margin: 0 0 0 1%; | ||
89 | color: rgb(20, 122, 255); | ||
90 | text-decoration: none; | ||
77 | } | 91 | } |
78 | } | 92 | } |
79 | 93 | ||