Add more tips to onboarding flow in web UI (#24646)

app/javascript/mastodon/features/onboarding/share.jsx

@@ -5,14 +5,15 @@ import PropTypes from 'prop-types';
 import { me, domain } from 'mastodon/initial_state';
 import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import classNames from 'classnames';
 import Icon from 'mastodon/components/icon';
 import ArrowSmallRight from './components/arrow_small_right';
 import { Link } from 'react-router-dom';
+import SwipeableViews from 'react-swipeable-views';
 
 const messages = defineMessages({
-  shareableMessage: { id: 'onboarding.share.message', defaultMessage: 'I\'m {username} on Mastodon! Come follow me at {url}' },
+  shareableMessage: { id: 'onboarding.share.message', defaultMessage: 'I\'m {username} on #Mastodon! Come follow me at {url}' },
 });
 
 const mapStateToProps = state => ({
@@ -80,6 +81,60 @@ class CopyPasteText extends React.PureComponent {
 
 }
 
+class TipCarousel extends React.PureComponent {
+
+  static propTypes = {
+    children: PropTypes.node,
+  };
+
+  state = {
+    index: 0,
+  };
+
+  handleSwipe = index => {
+    this.setState({ index });
+  };
+
+  handleChangeIndex = e => {
+    this.setState({ index: Number(e.currentTarget.getAttribute('data-index')) });
+  };
+
+  handleKeyDown = e => {
+    switch(e.key) {
+    case 'ArrowLeft':
+      e.preventDefault();
+      this.setState(({ index }, { children }) => ({ index: Math.abs(index - 1) % children.length }));
+      break;
+    case 'ArrowRight':
+      e.preventDefault();
+      this.setState(({ index }, { children }) => ({ index: (index + 1) % children.length }));
+      break;
+    }
+  };
+
+  render () {
+    const { children } = this.props;
+    const { index } = this.state;
+
+    return (
+      <div className='tip-carousel' tabIndex='0' onKeyDown={this.handleKeyDown}>
+        <SwipeableViews onChangeIndex={this.handleSwipe} index={index} enableMouseEvents tabIndex='-1'>
+          {children}
+        </SwipeableViews>
+
+        <div className='media-modal__pagination'>
+          {children.map((_, i) => (
+            <button key={i} className={classNames('media-modal__page-dot', { active: i === index })} data-index={i} onClick={this.handleChangeIndex}>
+              {i + 1}
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+}
+
 class Share extends React.PureComponent {
 
   static propTypes = {
@@ -105,6 +160,12 @@ class Share extends React.PureComponent {
 
           <CopyPasteText value={intl.formatMessage(messages.shareableMessage, { username: `@${account.get('username')}@${domain}`, url })} />
 
+          <TipCarousel>
+            <div><p className='onboarding__lead'><FormattedHTMLMessage id='onboarding.tips.verification' defaultMessage='<strong>Did you know?</strong> You can verify your account by putting a link to your Mastodon profile on your own website and adding the website to your profile. No fees or documents necessary!' /></p></div>
+            <div><p className='onboarding__lead'><FormattedHTMLMessage id='onboarding.tips.migration' defaultMessage='<strong>Did you know?</strong> If you feel like {domain} is not a great server choice for you in the future, you can move to another Mastodon server without losing your followers. You can even host your own server!' values={{ domain }} /></p></div>
+            <div><p className='onboarding__lead'><FormattedHTMLMessage id='onboarding.tips.2fa' defaultMessage='<strong>Did you know?</strong> You can secure your account by setting up two-factor authentication in your account settings. It works with any TOTP app of your choice, no phone number necessary!' /></p></div>
+          </TipCarousel>
+
           <p className='onboarding__lead'><FormattedMessage id='onboarding.share.next_steps' defaultMessage='Possible next steps:' /></p>
 
           <div className='onboarding__links'>