129 lines
3.2 KiB
JavaScript
129 lines
3.2 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { connect } from 'react-redux'
|
|
import addBase from '../src/util/addBase'
|
|
import getHeaders from '../src/client/util/getHeaders'
|
|
import RequireUser from '../src/client/comps/requireUser'
|
|
|
|
function Settings({ user }) {
|
|
const [data, setData] = useState({
|
|
current: '',
|
|
confirm: '',
|
|
new: '',
|
|
})
|
|
const [pending, setPending] = useState(false)
|
|
const [error, setError] = useState(null)
|
|
|
|
const handleSubmit = () => {
|
|
if (pending) return
|
|
let err
|
|
Object.keys(data).forEach(k => (data[k] = data[k].trim()))
|
|
if (!data.current) err = 'current pass is required'
|
|
else if (!data.new) err = 'new pass is required'
|
|
else if (!data.confirm) err = 'confirm pass is required'
|
|
else if (data.new !== data.confirm) err = 'new password must match confirm'
|
|
|
|
if (err) return setError(err)
|
|
setError(null)
|
|
setPending(true)
|
|
|
|
fetch(addBase('/user'), {
|
|
method: 'PATCH',
|
|
headers: {
|
|
...getHeaders(),
|
|
'content-type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
username: user.username,
|
|
password: data.current,
|
|
newPassword: data.new,
|
|
}),
|
|
})
|
|
.then(async res => {
|
|
const { status, ...data } = await res.json()
|
|
if (status === 'ok') {
|
|
setPending(false)
|
|
setError('Password updated')
|
|
return setData({
|
|
current: '',
|
|
confirm: '',
|
|
new: '',
|
|
})
|
|
}
|
|
throw new Error(data.message)
|
|
})
|
|
.catch(err => {
|
|
setPending(false)
|
|
setError(err.message || 'An error occurred updating password')
|
|
})
|
|
}
|
|
const handleChange = e => {
|
|
data[e.target.id] = e.target.value
|
|
setData(data)
|
|
}
|
|
|
|
return (
|
|
<RequireUser>
|
|
<div className="container padded fill">
|
|
<h3>Account settings</h3>
|
|
<hr />
|
|
|
|
<h4>Change password</h4>
|
|
|
|
<label htmlFor="current">Current Password</label>
|
|
<input
|
|
id="current"
|
|
type="password"
|
|
placeholder="Current super secret password"
|
|
value={data.current}
|
|
onChange={handleChange}
|
|
/>
|
|
|
|
<label htmlFor="new">New Password</label>
|
|
<input
|
|
id="new"
|
|
type="password"
|
|
placeholder="New super secret password"
|
|
value={data.new}
|
|
onChange={handleChange}
|
|
/>
|
|
|
|
<label htmlFor="confirm">Confirm New Password</label>
|
|
<input
|
|
id="confirm"
|
|
type="password"
|
|
value={data.confirm}
|
|
onChange={handleChange}
|
|
placeholder="Confirm its not too secret you forgot"
|
|
/>
|
|
|
|
<div>
|
|
{error && <p className="float-left">{error}</p>}
|
|
<button className="float-right" onClick={handleSubmit}>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.container {
|
|
width: 100%;
|
|
margin: auto;
|
|
padding: 10px;
|
|
max-width: 550px;
|
|
}
|
|
|
|
h3 {
|
|
margin-top: 15px;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
button {
|
|
margin-top: 5px;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
</RequireUser>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }) => ({ user }))(Settings)
|