ConnectPrompt.jsx 1.87 KB
Newer Older
1
import PropTypes from 'prop-types';
Yamagishi Kazutoshi's avatar
Yamagishi Kazutoshi committed
2
import React, { Fragment } from 'react';
3
import { FormattedMessage } from 'react-intl';
4
import domainShape from '../types/domainShape';
5

Yamagishi Kazutoshi's avatar
Yamagishi Kazutoshi committed
6
const ConnectPrompt = ({ isPioneer, domains }) => (
7
  <div className='connect-prompt'>
Yamagishi Kazutoshi's avatar
Yamagishi Kazutoshi committed
8 9 10 11 12 13 14 15 16 17 18
    {isPioneer ? (
      <Fragment>
        <h3><i className='fa fa-binoculars' /> <FormattedMessage id='connect_prompt.pioneer.title' defaultMessage='You are a pioneer!' /></h3>
        <p><FormattedMessage id='connect_prompt.pioneer.body' defaultMessage='You might be the first among your Twitter friends to explore Mastodon. Be sure to connect your Mastodon account so they see you when they join.' /></p>
      </Fragment>
    ) : (
      <Fragment>
        <h3><i className='fa fa-check' /> <FormattedMessage id='connect_prompt.tutorial.title' defaultMessage='Almost there!' /></h3>
        <p><FormattedMessage id='connect_prompt.tutorial.body' defaultMessage='For your friends to find you as well, you still need to login with your Mastodon account. If you need help choosing a server to create a new account on, {link} or click the button below.' values={{ link: <a href='#domain'><FormattedMessage id='connect_prompt.tutorial.link' defaultMessage='see where your friends have signed up' /></a> }} /></p>
      </Fragment>
    )}
19
    <a target='_blank' href='/users/auth/mastodon'><FormattedMessage id='connect_prompt.login_via_mastodon' defaultMessage='Login via Mastodon' /></a>
Yamagishi Kazutoshi's avatar
Yamagishi Kazutoshi committed
20
    {domains.length > 0 && <a rel='noopener noreferrer' target='_blank' className='secondary' href={`https://${domains[0].uri}/auth/sign_up`}><FormattedMessage id='connect_prompt.create_mastodon_account' defaultMessage='Create Mastodon account' /></a>}
21 22 23 24
  </div>
);

ConnectPrompt.propTypes = {
25
  isPioneer: PropTypes.bool,
26 27 28 29 30
  domains: PropTypes.arrayOf(domainShape).isRequired,
};

ConnectPrompt.defaultProps = {
  isPioneer: false,
31 32 33
};

export default ConnectPrompt;