add change password option

1 files changed, 113 insertions, 0 deletions

diff --git a/apps/ChangePassword/components/App.js b/apps/ChangePassword/components/App.js
new file mode 100644
index 0000000..ce32ffb
--- /dev/null
+++ b/apps/ChangePassword/components/App.js
@@ -0,0 +1,113 @@
+import styles from '../styles/ChangePassword.module.scss'
+import { useState } from 'react'
+import useSettings from 'hooks/useSettings'
+import usePopup from 'hooks/usePopup'
+import useApps from 'hooks/useApps'
+import useUser from 'hooks/useUser'
+import { close } from 'helpers/windowActions'
+import { changePassword } from '../api'
+
+const App = () => {
+  const { t } = useSettings()
+  const { user } = useUser()
+  const { setApps } = useApps()
+  const { setPopup } = usePopup()
+  const [currPassError, setCurrPassError] = useState(false)
+  const [newPassError, setNewPassError] = useState(false)
+
+  const onSubmit = async (e) => {
+    e.preventDefault()
+
+    const {
+      current_password: {value: currentPassword},
+      new_password: { value: newPassword},
+      confirm_password: {value: confirmPassword}
+    } = e.currentTarget
+
+    if (newPassword !== confirmPassword) {
+      setPopup({
+        content: t('change_password_wrong_new'),
+        time: 2000,
+        error: true
+      })
+      setNewPassError(true)
+
+    } else if (newPassword === currentPassword) {
+      setPopup({
+        content: t('change_password_same_password'),
+        time: 2000,
+        error: true
+      })
+      setNewPassError(true)
+    } else {
+      try {
+        await changePassword({_id: user._id, currentPassword, newPassword})
+        setPopup({
+          content: t('change_password_changed'),
+          time: 2000,
+        })
+        close('ChangePassword', setApps)
+      } catch(e) {
+        if (e?.data?.error === 'Wrong password') {
+          setPopup({
+            content: t('change_password_wrong_current'),
+            time: 2000,
+            error: true
+          })
+          setCurrPassError(true)
+        } else {
+          setPopup({
+            content: t('change_password_error'),
+            time: 2000,
+            error: true
+          })
+        }
+      }
+    }
+  }
+
+  return (
+    <form className={styles.password} onSubmit={onSubmit}>
+      <label className={styles.label} htmlFor='current_password'>
+        {t('change_password_current')}
+      </label>
+      <input
+        className={`${styles.input} ${currPassError ? styles.error : ''}`}
+        id='current_password'
+        type='password'
+        name='current_password'
+        title={t('change_password_current')}
+        onChange={() => { currPassError && setCurrPassError(false) }}
+        required
+      />
+      <label className={styles.label} htmlFor='new_password'>
+        {t('change_password_new')}
+      </label>
+      <input
+        className={`${styles.input} ${newPassError ? styles.error : ''}`}
+        id='new_password'
+        type='password'
+        name='new_password'
+        title={t('change_password_new')}
+        onChange={() => { newPassError && setNewPassError(false) }}
+        required
+      />
+      <input
+        className={`${styles.input} ${newPassError ? styles.error : ''}`}
+        type='password'
+        name='confirm_password'
+        placeholder={t('change_password_confirm')}
+        title={t('change_password_confirm')}
+        onChange={() => { newPassError && setNewPassError(false) }}
+        required
+      />
+      <input
+        className='window__button'
+        type='submit'
+        value={t('save')}
+      />
+    </form>
+  )
+}
+
+export default App