Security: Rudimentary email change

app/soapbox/actions/security.js

@@ -0,0 +1,38 @@
+import api from '../api';
+
+export const CHANGE_EMAIL_REQUEST = 'CHANGE_EMAIL_REQUEST';
+export const CHANGE_EMAIL_SUCCESS = 'CHANGE_EMAIL_SUCCESS';
+export const CHANGE_EMAIL_FAIL    = 'CHANGE_EMAIL_FAIL';
+
+export const CHANGE_PASSWORD_REQUEST = 'CHANGE_PASSWORD_REQUEST';
+export const CHANGE_PASSWORD_SUCCESS = 'CHANGE_PASSWORD_SUCCESS';
+export const CHANGE_PASSWORD_FAIL    = 'CHANGE_PASSWORD_FAIL';
+
+export function changeEmail(email, password) {
+  return (dispatch, getState) => {
+    dispatch({ type: CHANGE_EMAIL_REQUEST, email });
+    api(getState).post('/api/pleroma/change_email', {
+      email,
+      password,
+    }).then(response => {
+      dispatch({ type: CHANGE_EMAIL_SUCCESS, email, response });
+    }).catch(error => {
+      dispatch({ type: CHANGE_EMAIL_FAIL, email, error });
+    });
+  };
+}
+
+export function changePassword(oldPassword, newPassword, confirmation) {
+  return (dispatch, getState) => {
+    dispatch({ type: CHANGE_PASSWORD_REQUEST });
+    api(getState).post('/api/pleroma/change_password', {
+      password: oldPassword,
+      new_password: newPassword,
+      new_password_confirmation: confirmation,
+    }).then(response => {
+      dispatch({ type: CHANGE_PASSWORD_SUCCESS, response });
+    }).catch(error => {
+      dispatch({ type: CHANGE_PASSWORD_FAIL, error });
+    });
+  };
+}

app/soapbox/features/security/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import Column from '../ui/components/column';
+import {
+  SimpleForm,
+  SimpleInput,
+  FieldsGroup,
+  TextInput,
+} from 'soapbox/features/forms';
+import { changeEmail } from 'soapbox/actions/security';
+
+const messages = defineMessages({
+  heading: { id: 'column.security', defaultMessage: 'Security' },
+  submit: { id: 'security.submit', defaultMessage: 'Save changes' },
+});
+
+export default @connect()
+@injectIntl
+class Security extends ImmutablePureComponent {
+
+  static propTypes = {
+    email: PropTypes.string,
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {}
+
+  handleInputChange = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  }
+
+  handleSubmit = e => {
+    const { email, password } = this.state;
+    this.props.dispatch(changeEmail(email, password));
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    return (
+      <Column icon='lock' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <SimpleForm onSubmit={this.handleSubmit}>
+          <FieldsGroup>
+            <TextInput
+              label='Email address'
+              placeholder='me@example.com'
+              name='email'
+              onChange={this.handleInputChange}
+              value={this.state.email}
+            />
+            <SimpleInput
+              type='password'
+              label='Password'
+              name='password'
+              onChange={this.handleInputChange}
+              value={this.state.password}
+            />
+            <div className='actions'>
+              <button name='button' type='submit' className='btn button button-primary'>
+                {intl.formatMessage(messages.submit)}
+              </button>
+            </div>
+          </FieldsGroup>
+        </SimpleForm>
+      </Column>
+    );
+  }
+
+}

app/soapbox/features/ui/index.js

@@ -72,6 +72,7 @@ import {
   Preferences,
   EditProfile,
   PasswordReset,
+  Security,
 } from './util/async-components';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -194,6 +195,7 @@ class SwitchingColumnsArea extends React.PureComponent {
       <Switch>
         <WrappedRoute path='/auth/sign_in' component={LoginPage} publicRoute exact />
         <WrappedRoute path='/auth/reset_password' component={PasswordReset} publicRoute exact />
+        <WrappedRoute path='/auth/edit' component={Security} publicRoute exact />
 
         <WrappedRoute path='/' exact page={HomePage} component={HomeTimeline} content={children} />
         <WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} />

app/soapbox/features/ui/util/async-components.js

@@ -177,3 +177,7 @@ export function EditProfile() {
 export function PasswordReset() {
   return import(/* webpackChunkName: "features/auth_login" */'../../auth_login/components/password_reset');
 }
+
+export function Security() {
+  return import(/* webpackChunkName: "features/security" */'../../security');
+}