add change password option

4 files changed, 152 insertions, 0 deletions

diff --git a/apps/ChangePassword/api.js b/apps/ChangePassword/api.js
new file mode 100644
index 0000000..ef609a7
--- /dev/null
+++ b/apps/ChangePassword/api.js
@@ -0,0 +1,9 @@
+import fetchJson from 'helpers/fetchJson'
+
+export const changePassword = async (data) => (
+  await fetchJson('/api/password', {
+    method: 'POST',
+    headers: { 'Content-Type': 'plain/text; charset=utf-8' },
+    body: JSON.stringify(data)
+  })
+)
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
diff --git a/apps/ChangePassword/index.js b/apps/ChangePassword/index.js
new file mode 100644
index 0000000..cd1d5e2
--- /dev/null
+++ b/apps/ChangePassword/index.js
@@ -0,0 +1,3 @@
+import ChangePassword from './components/App'
+
+export default ChangePassword
diff --git a/apps/ChangePassword/styles/ChangePassword.module.scss b/apps/ChangePassword/styles/ChangePassword.module.scss
new file mode 100644
index 0000000..cb4e876
--- /dev/null
+++ b/apps/ChangePassword/styles/ChangePassword.module.scss
@@ -0,0 +1,27 @@
+.password {
+  padding: 1em;
+  text-align: center;
+}
+
+.input {
+  color: var(--color-text-alt);
+  background: var(--color-window-content);
+  padding: .5em;
+  margin: .75em 0;
+  border: 1px dashed var(--color-decor);
+  border-radius: .5px;
+  width: 100%;
+}
+
+.label {
+  font-size: .9em;
+  display: block;
+  text-align: left;
+  color: var(--color-text-alt);
+  margin-top: .75em;
+}
+
+.error {
+  border: 1px solid var(--color-error);
+  color: var(--color-error);
+}