diff options
Diffstat (limited to 'src/components/auth/Welcome.tsx')
-rw-r--r-- | src/components/auth/Welcome.tsx | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/src/components/auth/Welcome.tsx b/src/components/auth/Welcome.tsx new file mode 100644 index 000000000..1aa8da4d6 --- /dev/null +++ b/src/components/auth/Welcome.tsx | |||
@@ -0,0 +1,118 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { observer, inject } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
4 | import { noop } from 'lodash'; | ||
5 | import serverlessLogin from '../../helpers/serverless-helpers'; | ||
6 | import shuffleArray from '../../helpers/array-helpers'; | ||
7 | import { serverName } from '../../api/apiBase'; | ||
8 | import Link from '../ui/Link'; | ||
9 | import { H1 } from '../ui/headline'; | ||
10 | import { StoresProps } from '../../@types/ferdium-components.types'; | ||
11 | import RecipePreview from '../../models/RecipePreview'; | ||
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: | ||
25 | 'You are using {serverNameParse} Server, do you want to switch?', | ||
26 | }, | ||
27 | changeServer: { | ||
28 | id: 'login.changeServer', | ||
29 | defaultMessage: 'Change here!', | ||
30 | }, | ||
31 | serverless: { | ||
32 | id: 'services.serverless', | ||
33 | defaultMessage: 'Use Ferdium without an Account', | ||
34 | }, | ||
35 | }); | ||
36 | |||
37 | interface IProps extends Partial<StoresProps>, WrappedComponentProps { | ||
38 | loginRoute: string; | ||
39 | signupRoute: string; | ||
40 | changeServerRoute: string; | ||
41 | recipes: RecipePreview[]; | ||
42 | } | ||
43 | |||
44 | @inject('actions') | ||
45 | @observer | ||
46 | class Welcome extends Component<IProps> { | ||
47 | constructor(props: IProps) { | ||
48 | super(props); | ||
49 | } | ||
50 | |||
51 | useLocalServer(): void { | ||
52 | serverlessLogin(this.props.actions); | ||
53 | } | ||
54 | |||
55 | render(): ReactElement { | ||
56 | const { loginRoute, signupRoute, changeServerRoute, intl } = this.props; | ||
57 | let { recipes } = this.props; | ||
58 | recipes = shuffleArray<RecipePreview>(recipes); | ||
59 | recipes.length = 8 * 2; | ||
60 | |||
61 | let serverNameParse = serverName(); | ||
62 | serverNameParse = | ||
63 | serverNameParse === 'Custom' ? 'a Custom' : serverNameParse; | ||
64 | |||
65 | return ( | ||
66 | <div className="welcome"> | ||
67 | <div className="welcome__content"> | ||
68 | <img | ||
69 | src="./assets/images/logo.svg" | ||
70 | className="welcome__logo" | ||
71 | alt="" | ||
72 | /> | ||
73 | </div> | ||
74 | <div className="welcome__text"> | ||
75 | <H1>Ferdium</H1> | ||
76 | </div> | ||
77 | <div className="welcome__buttons"> | ||
78 | <Link to={signupRoute} className="button button__inverted"> | ||
79 | {intl.formatMessage(messages.signupButton)} | ||
80 | </Link> | ||
81 | <Link to={loginRoute} className="button"> | ||
82 | {intl.formatMessage(messages.loginButton)} | ||
83 | </Link> | ||
84 | <div className="welcome__text__change-server"> | ||
85 | <span> | ||
86 | {intl.formatMessage(messages.changeServerMessage, { | ||
87 | serverNameParse, | ||
88 | })} | ||
89 | </span> | ||
90 | <Link to={changeServerRoute} className="button__change-server"> | ||
91 | <span>{intl.formatMessage(messages.changeServer)}</span> | ||
92 | </Link> | ||
93 | </div> | ||
94 | <hr | ||
95 | className="settings__hr-sections" | ||
96 | style={{ marginTop: 24, marginBottom: 24, borderStyle: 'solid' }} | ||
97 | /> | ||
98 | <button | ||
99 | className="button" | ||
100 | onClick={this.useLocalServer.bind(this)} | ||
101 | onKeyDown={noop} | ||
102 | > | ||
103 | {intl.formatMessage(messages.serverless)} | ||
104 | </button> | ||
105 | </div> | ||
106 | <div className="welcome__featured-services"> | ||
107 | {recipes.map(recipe => ( | ||
108 | <div key={recipe.id} className="welcome__featured-service"> | ||
109 | <img key={recipe.id} src={recipe.icons?.svg} alt="" /> | ||
110 | </div> | ||
111 | ))} | ||
112 | </div> | ||
113 | </div> | ||
114 | ); | ||
115 | } | ||
116 | } | ||
117 | |||
118 | export default injectIntl(Welcome); | ||