Feature/change email

CHANGELOG.md

@@ -8,7 +8,7 @@ For detailed rules of this file, see  [Changelog Rules](#changelog-rules)
 
 ### ✨ Added
 
-*
+* An option for users to update their registered email address through the user profile.
 
 ### ⚡ Changed
 

src/components/ChangeEmailModal/ChangeEmailMessageBox.js

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+
+import ApiErrorBox from '~/components/MessageBox/ApiErrorBox'
+
+import MessageBox from '../MessageBox'
+
+
+
+
+
+function getErrorText (error) {
+  switch (error.status) {
+    default:
+      return undefined
+  }
+}
+
+function ChangeEmailMessageBox (props) {
+  const { result } = props
+
+  return result.success
+    ? (
+      <MessageBox type="success">
+        {'E-Mail changed! Please login to continue.'}
+      </MessageBox>
+    )
+    : (
+      <ApiErrorBox
+        error={result.error}
+        renderError={getErrorText} />
+    )
+}
+
+ChangeEmailMessageBox.propTypes = {
+  result: PropTypes.object,
+}
+
+
+
+
+
+export default ChangeEmailMessageBox

src/components/ChangeEmailModal/ChangeEmailModal.js

@@ -0,0 +1,127 @@
+import Router from 'next/router'
+import PropTypes from 'prop-types'
+import { useCallback, useMemo, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import asModal, { ModalContent, ModalFooter } from '~/components/asModal'
+import EmailFieldset from '~/components/Fieldsets/EmailFieldset'
+import useForm from '~/hooks/useForm'
+import { logout } from '~/store/actions/session'
+import { changeEmail } from '~/store/actions/user'
+import {
+  selectCurrentUserId,
+  selectUserById,
+  withCurrentUserId,
+} from '~/store/selectors'
+import getResponseError from '~/util/getResponseError'
+
+import ChangeEmailMessageBox from './ChangeEmailMessageBox'
+
+// Component Constants
+const SUBMIT_AUTO_CLOSE_DELAY_TIME = 3000
+
+
+
+
+
+function ChangeEmailModal (props) {
+  const {
+    onClose,
+    isOpen,
+  } = props
+
+  const [result, setResult] = useState({})
+  const { email } = useSelector(withCurrentUserId(selectUserById))?.attributes ?? {}
+
+  const dispatch = useDispatch()
+  const onSubmit = useCallback(async (formData) => {
+    if (result.submitted) {
+      setResult({ submitted: true })
+    }
+    const response = await dispatch(changeEmail(formData))
+
+    const error = getResponseError(response)
+
+    setResult({
+      error,
+      success: !error,
+      submitted: true,
+    })
+
+    if (!error) {
+      setTimeout(() => {
+        if (isOpen) {
+          onClose()
+        }
+      }, SUBMIT_AUTO_CLOSE_DELAY_TIME)
+
+      await dispatch(logout())
+      Router.reload()
+    }
+  }, [dispatch, isOpen, onClose, result.submitted])
+
+
+  const userId = useSelector(selectCurrentUserId)
+  const data = useMemo(() => {
+    return {
+      id: userId,
+      attributes: {
+        email: '',
+      },
+    }
+  }, [userId])
+
+  const { Form, submitting, canSubmit } = useForm({ data, onSubmit })
+
+  return (
+    <ModalContent as={Form} className="dialog no-pad">
+      <ChangeEmailMessageBox result={result} />
+
+      {
+        !result.submitted && (
+          <div className="info">
+            <div className="email">
+              <span className="label">{'Current E-Mail: '}</span>
+              <span>{email}</span>
+            </div>
+            {'Enter the new e-mail address you would like to associate with your account below.'}
+          </div>
+        )
+      }
+
+      <EmailFieldset
+        dark
+        required
+        aria-label="New E-Mail Address"
+        id="NewEmailAddress"
+        name="attributes.email"
+        placeholder="New E-Mail Address" />
+
+      <ModalFooter>
+        <div className="secondary" />
+        <div className="primary">
+          <button
+            className="green"
+            disabled={!canSubmit || submitting || result.success}
+            type="submit">
+            {submitting ? 'Submitting...' : 'Change E-Mail'}
+          </button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  )
+}
+
+ChangeEmailModal.propTypes = {
+  isOpen: PropTypes.any,
+  onClose: PropTypes.func.isRequired,
+}
+
+
+
+
+
+export default asModal({
+  className: 'email-change-dialog',
+  title: 'Change E-Mail Address',
+})(ChangeEmailModal)

src/components/ChangeEmailModal/index.js

@@ -0,0 +1 @@
+export { default } from './ChangeEmailModal'

src/components/ProfileHeader/ProfileHeader.js

@@ -11,6 +11,7 @@ import {
 } from '~/store/selectors'
 import formatAsEliteDateTime from '~/util/date/formatAsEliteDateTime'
 
+import ChangeEmailModal from '../ChangeEmailModal'
 import ChangePasswordModal from '../ChangePasswordModal'
 import DisableProfileModal from '../DisableProfileModal'
 import ProfileUserAvatar from '../ProfileUserAvatar'
@@ -21,9 +22,16 @@ import UnverifiedUserBanner from './UnverifiedUserBanner'
 
 
 function ProfileHeader () {
+  const [showChangeEmail, setShowChangeEmail] = useState(false)
   const [showChangePassword, setShowChangePassword] = useState(false)
   const [showDisableProfile, setShowDisableProfile] = useState(false)
 
+  const handleToggleChangeEmail = useCallback(() => {
+    setShowChangeEmail((state) => {
+      return !state
+    })
+  }, [])
+
   const handleToggleChangePassword = useCallback(() => {
     setShowChangePassword((state) => {
       return !state
@@ -77,6 +85,11 @@ function ProfileHeader () {
           </ul>
         </div>
         <div className="profile-controls">
+          <button
+            type="button"
+            onClick={handleToggleChangeEmail}>
+            {'Change E-Mail'}
+          </button>
           <button
             type="button"
             onClick={handleToggleChangePassword}>
@@ -89,6 +102,9 @@ function ProfileHeader () {
           </button>
         </div>
       </div>
+      <ChangeEmailModal
+        isOpen={showChangeEmail}
+        onClose={handleToggleChangeEmail} />
       <ChangePasswordModal
         isOpen={showChangePassword}
         onClose={handleToggleChangePassword} />

src/store/actionTypes.js

@@ -70,6 +70,9 @@ const users = {
   avatar: {
     update: 'users/avatar/update',
   },
+  email: {
+    update: 'users/email/update',
+  },
 }
 
 

src/store/actions/authentication.js

@@ -19,8 +19,6 @@ const SESSION_TOKEN_LENGTH = 365 // days
 
 
 
-
-
 export const changePassword = ({ id, ...data }) => {
   return frApiPlainRequest(
     actionTypes.passwords.update,

src/store/actions/user.js

@@ -7,8 +7,7 @@ import createRequestBody from '~/util/jsonapi/createRequestBody'
 import actionTypes from '../actionTypes'
 import { deletesResource, deletesRelationship, createsRelationship, RESOURCE } from '../reducers/frAPIResources'
 import { withCurrentUserId, selectUserById, selectCurrentUserId } from '../selectors'
-import { frApiRequest } from './services'
-
+import { frApiRequest, frApiPlainRequest } from './services'
 
 export const getNickname = (nickId) => {
   return frApiRequest(
@@ -93,3 +92,14 @@ export const updateAvatar = (data) => {
     return dispatch(frApiRequest(actionTypes.users.avatar.update, request))
   }
 }
+
+export const changeEmail = ({ id, ...data }) => {
+  return frApiPlainRequest(
+    actionTypes.users.email.update,
+    {
+      url: `/users/${id}/email`,
+      method: 'patch',
+      data: createRequestBody('email-changes', data),
+    },
+  )
+}