refactor(profile): new profile design and addition fields [unstable]

src/client/actions/accounts.js

@@ -21,7 +21,8 @@ import {
   FETCH_ACCOUNTS_CREATE_TICKET,
   SAVE_EDIT_ACCOUNT,
   UNLOAD_ACCOUNTS,
-  SAVE_PROFILE
+  SAVE_PROFILE,
+  GEN_MFA
 } from 'actions/types'
 
 export const fetchAccounts = createAction(
@@ -48,3 +49,9 @@ export const saveProfile = createAction(
   payload => payload,
   () => ({ thunk: true })
 )
+
+export const genMFA = createAction(
+  GEN_MFA.ACTION,
+  payload => payload,
+  () => ({ thunk: true })
+)

src/client/actions/types.js

@@ -62,6 +62,7 @@ export const DELETE_ACCOUNT = defineAction('DELETE_ACCOUNT', [PENDING, SUCCESS,
 export const ENABLE_ACCOUNT = defineAction('ENABLE_ACCOUNT', [SUCCESS, ERROR])
 export const UNLOAD_ACCOUNTS = defineAction('UNLOAD_ACCOUNTS', [SUCCESS])
 export const SAVE_PROFILE = defineAction('SAVE_PROFILE', [SUCCESS, PENDING, ERROR])
+export const GEN_MFA = defineAction('GEN_MFA', [SUCCESS, PENDING, ERROR])
 
 // Groups
 export const FETCH_GROUPS = defineAction('FETCH_GROUPS', [PENDING, SUCCESS, ERROR])

src/client/api/index.js

@@ -15,8 +15,10 @@
 import axios from 'axios'
 
 axios.defaults.headers.post['Content-Type'] = 'application/json'
+const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+axios.defaults.headers['CSRF-TOKEN'] = token
 
-let api = {}
+const api = {}
 
 api.tickets = {}
 api.tickets.getWithPage = payload => {
@@ -183,6 +185,11 @@ api.accounts.saveProfile = payload => {
     return res.data
   })
 }
+api.accounts.generateMFA = payload => {
+  return axios.post(`/api/v2/accounts/profile/mfa`, payload).then(res => {
+    return res.data
+  })
+}
 
 api.groups = {}
 api.groups.create = payload => {

src/client/components/Input/index.jsx

@@ -23,16 +23,23 @@ class Input extends React.Component {
   }
 
   render () {
-    const { type, defaultValue } = this.props
+    const { name, type, defaultValue } = this.props
     return (
       <div>
-        <input className={'md-input'} type={type} defaultValue={defaultValue} onChange={e => this.handleChange(e)} />
+        <input
+          className={'md-input'}
+          name={name}
+          type={type}
+          defaultValue={defaultValue}
+          onChange={e => this.handleChange(e)}
+        />
       </div>
     )
   }
 }
 
 Input.propTypes = {
+  name: PropTypes.string,
   type: PropTypes.string,
   defaultValue: PropTypes.string,
   onChange: PropTypes.func

src/client/components/QRCode/index.jsx

@@ -19,8 +19,10 @@ class QRCode extends React.Component {
   }
 
   render () {
+    let css = {}
+    if (this.props.css) css = this.props.css
     return (
-      <div>
+      <div style={css}>
         <div ref={this.qrcodeDiv}></div>
       </div>
     )
@@ -29,7 +31,8 @@ class QRCode extends React.Component {
 
 QRCode.propTypes = {
   code: PropTypes.string.isRequired,
-  size: PropTypes.number
+  size: PropTypes.number,
+  css: PropTypes.object
 }
 
 QRCode.defaultProps = {

src/client/containers/Modals/PasswordPromptModal.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { observer } from 'mobx-react'
+import { observable } from 'mobx'
+
+import { hideModal } from 'actions/common'
+
+import Input from 'components/Input'
+import Button from 'components/Button'
+import BaseModal from 'containers/Modals/BaseModal'
+
+import axios from 'axios'
+import helpers from 'lib/helpers'
+
+@observer
+class PasswordPromptModal extends React.Component {
+  @observable confirmPassword = ''
+
+  onVerifyPassword = e => {
+    e.preventDefault()
+
+    axios
+      .post('/api/v2/accounts/profile/mfa/disable', {
+        confirmPassword: this.confirmPassword
+      })
+      .then(res => {
+        this.props.hideModal()
+
+        if (this.props.onVerifyComplete) this.props.onVerifyComplete(true)
+      })
+      .catch(error => {
+        let errMessage = 'An Error has occurred.'
+        if (error.response && error.response.data && error.response.data.error) errMessage = error.response.data.error
+
+        helpers.UI.showSnackbar(errMessage, true)
+
+        if (this.props.onVerifyComplete) this.props.onVerifyComplete(false)
+      })
+  }
+
+  render () {
+    const { titleOverride, textOverride } = this.props
+    return (
+      <BaseModal options={{ bgclose: false }}>
+        <div>
+          <h2>{titleOverride || 'Confirm Password'}</h2>
+          <p>{textOverride || 'Please confirm your password.'}</p>
+        </div>
+        <div className={'uk-margin-medium-bottom'}>
+          <label>Current Password</label>
+          <Input name={'current-password'} type={'password'} onChange={val => (this.confirmPassword = val)} />
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button text={'Cancel'} small={true} flat={true} waves={false} onClick={() => this.props.hideModal()} />
+          <Button
+            text={'Verify Password'}
+            style={'primary'}
+            small={true}
+            waves={true}
+            onClick={e => this.onVerifyPassword(e)}
+          />
+        </div>
+      </BaseModal>
+    )
+  }
+}
+
+PasswordPromptModal.propTypes = {
+  user: PropTypes.object.isRequired,
+  titleOverride: PropTypes.string,
+  textOverride: PropTypes.string,
+  onVerifyComplete: PropTypes.func.isRequired,
+  hideModal: PropTypes.func.isRequired
+}
+
+const mapStateToProps = state => ({})
+
+export default connect(mapStateToProps, { hideModal })(PasswordPromptModal)

src/client/containers/Modals/index.jsx

@@ -41,6 +41,7 @@ import EditDepartmentModal from './EditDepartmentModal'
 import CreateNoticeModal from 'containers/Modals/CreateNoticeModal'
 import EditNoticeModal from 'containers/Modals/EditNoticeModal'
 import LinkWarningModal from 'containers/Modals/LinkWarningModal'
+import PasswordPromptModal from 'containers/Modals/PasswordPromptModal'
 
 const MODAL_COMPONENTS = {
   NOTICE_ALERT: NoticeAlertModal,
@@ -66,7 +67,8 @@ const MODAL_COMPONENTS = {
   EDIT_DEPARTMENT: EditDepartmentModal,
   CREATE_NOTICE: CreateNoticeModal,
   EDIT_NOTICE: EditNoticeModal,
-  LINK_WARNING: LinkWarningModal
+  LINK_WARNING: LinkWarningModal,
+  PASSWORD_PROMPT: PasswordPromptModal
 }
 
 const ModalRoot = ({ modalType, modalProps }) => {