diff options
author | Ricardo Cino <ricardo@cino.io> | 2022-07-07 09:31:50 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-07 09:31:50 +0200 |
commit | 71c52373f81cace664047edd19d9d289f45a4dff (patch) | |
tree | 69b3f1d45a8b3f1ceab9497ea3c96e9dc18e3166 /src/components/auth/Welcome.jsx | |
parent | 6.0.0-nightly.91 [skip ci] (diff) | |
download | ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.gz ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.zst ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.zip |
chore: Mobx & React-Router upgrade (#406)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components/auth/Welcome.jsx')
-rw-r--r-- | src/components/auth/Welcome.jsx | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/src/components/auth/Welcome.jsx b/src/components/auth/Welcome.jsx new file mode 100644 index 000000000..c784b75c3 --- /dev/null +++ b/src/components/auth/Welcome.jsx | |||
@@ -0,0 +1,106 @@ | |||
1 | /* eslint jsx-a11y/anchor-is-valid: 0 */ | ||
2 | import { Component } from 'react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; | ||
5 | import { defineMessages, injectIntl } from 'react-intl'; | ||
6 | import serverlessLogin from '../../helpers/serverless-helpers'; | ||
7 | import shuffleArray from '../../helpers/array-helpers'; | ||
8 | import { serverName } from '../../api/apiBase'; | ||
9 | |||
10 | import Link from '../ui/Link'; | ||
11 | import { H1 } from '../ui/headline'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | signupButton: { | ||
15 | id: 'welcome.signupButton', | ||
16 | defaultMessage: 'Create a free account', | ||
17 | }, | ||
18 | loginButton: { | ||
19 | id: 'welcome.loginButton', | ||
20 | defaultMessage: 'Login to your account', | ||
21 | }, | ||
22 | changeServerMessage: { | ||
23 | id: 'login.changeServerMessage', | ||
24 | defaultMessage: 'You are using {serverNameParse} Server, do you want to switch?' | ||
25 | }, | ||
26 | changeServer: { | ||
27 | id: 'login.changeServer', | ||
28 | defaultMessage: 'Change here!', | ||
29 | }, | ||
30 | serverless: { | ||
31 | id: 'services.serverless', | ||
32 | defaultMessage: 'Use Ferdium without an Account', | ||
33 | }, | ||
34 | }); | ||
35 | |||
36 | class Welcome extends Component { | ||
37 | static propTypes = { | ||
38 | loginRoute: PropTypes.string.isRequired, | ||
39 | signupRoute: PropTypes.string.isRequired, | ||
40 | changeServerRoute: PropTypes.string.isRequired, | ||
41 | recipes: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
42 | actions: PropTypes.object.isRequired, | ||
43 | }; | ||
44 | |||
45 | useLocalServer() { | ||
46 | serverlessLogin(this.props.actions); | ||
47 | } | ||
48 | |||
49 | render() { | ||
50 | const { intl } = this.props; | ||
51 | const { loginRoute, signupRoute, changeServerRoute } = this.props; | ||
52 | let { recipes } = this.props; | ||
53 | recipes = shuffleArray(recipes); | ||
54 | recipes.length = 8 * 2; | ||
55 | |||
56 | let serverNameParse = serverName(); | ||
57 | serverNameParse = | ||
58 | serverNameParse === 'Custom' ? 'a Custom' : serverNameParse; | ||
59 | |||
60 | return ( | ||
61 | <div className="welcome"> | ||
62 | <div className="welcome__content"> | ||
63 | <img | ||
64 | src="./assets/images/logo.svg" | ||
65 | className="welcome__logo" | ||
66 | alt="" | ||
67 | /> | ||
68 | </div> | ||
69 | <div className="welcome__text"> | ||
70 | <H1>Ferdium</H1> | ||
71 | </div> | ||
72 | <div className="welcome__buttons"> | ||
73 | <Link to={signupRoute} className="button button__inverted"> | ||
74 | {intl.formatMessage(messages.signupButton)} | ||
75 | </Link> | ||
76 | <Link to={loginRoute} className="button"> | ||
77 | {intl.formatMessage(messages.loginButton)} | ||
78 | </Link> | ||
79 | <div className="welcome__text__change-server"> | ||
80 | <span> | ||
81 | {intl.formatMessage(messages.changeServerMessage, { serverNameParse })} | ||
82 | </span> | ||
83 | <Link to={changeServerRoute} className="button__change-server"> | ||
84 | <span>{intl.formatMessage(messages.changeServer)}</span> | ||
85 | </Link> | ||
86 | </div> | ||
87 | <br /> | ||
88 | <hr /> | ||
89 | <br /> | ||
90 | <a className="button" onClick={this.useLocalServer.bind(this)}> | ||
91 | {intl.formatMessage(messages.serverless)} | ||
92 | </a> | ||
93 | </div> | ||
94 | <div className="welcome__featured-services"> | ||
95 | {recipes.map(recipe => ( | ||
96 | <div key={recipe.id} className="welcome__featured-service"> | ||
97 | <img key={recipe.id} src={recipe.icons.svg} alt="" /> | ||
98 | </div> | ||
99 | ))} | ||
100 | </div> | ||
101 | </div> | ||
102 | ); | ||
103 | } | ||
104 | } | ||
105 | |||
106 | export default injectIntl(inject('actions')(observer(Welcome))); | ||