updated format and lint scripts and applied them
This commit is contained in:
JJ Kasper
@@ -1,42 +1,42 @@
|
||||
import App, { Container } from 'next/app';
|
||||
import store from '../redux/store';
|
||||
import { Provider } from 'react-redux';
|
||||
import { setUser, doLogin } from '../redux/actions/userAct';
|
||||
import '../styles/style.sass';
|
||||
const ssr = typeof window === 'undefined';
|
||||
import App, { Container } from 'next/app'
|
||||
import store from '../redux/store'
|
||||
import { Provider } from 'react-redux'
|
||||
import { setUser, doLogin } from '../redux/actions/userAct'
|
||||
import '../styles/style.sass'
|
||||
const ssr = typeof window === 'undefined'
|
||||
|
||||
export default class MyApp extends App {
|
||||
static async getInitialProps ({ Component, ctx }) {
|
||||
let user = {};
|
||||
let setup = false;
|
||||
if(ssr) {
|
||||
user = ctx.req.user || {};
|
||||
setup = ctx.req.doSetup || false;
|
||||
static async getInitialProps({ Component, ctx }) {
|
||||
let user = {}
|
||||
let setup = false
|
||||
if (ssr) {
|
||||
user = ctx.req.user || {}
|
||||
setup = ctx.req.doSetup || false
|
||||
}
|
||||
let pageProps = {};
|
||||
let pageProps = {}
|
||||
if (Component.getInitialProps) {
|
||||
pageProps = await Component.getInitialProps(ctx);
|
||||
pageProps = await Component.getInitialProps(ctx)
|
||||
}
|
||||
return { Component, pageProps, user, setup };
|
||||
return { Component, pageProps, user, setup }
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const { user, setup } = this.props;
|
||||
setUser({...user, setup});
|
||||
if(!ssr && !user.email) {
|
||||
const { jwt } = window.localStorage;
|
||||
if(jwt) doLogin(null, jwt, true);
|
||||
const { user, setup } = this.props
|
||||
setUser({ ...user, setup })
|
||||
if (!ssr && !user.email) {
|
||||
const { jwt } = window.localStorage
|
||||
if (jwt) doLogin(null, jwt, true)
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
let { Component, pageProps } = this.props;
|
||||
render() {
|
||||
let { Component, pageProps } = this.props
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<Container>
|
||||
<Component {...pageProps} />
|
||||
</Container>
|
||||
</Provider>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
import Document, { Head, Main, NextScript } from 'next/document';
|
||||
import getUrl from '../util/getUrl';
|
||||
import Document, { Head, Main, NextScript } from 'next/document'
|
||||
import getUrl from '../util/getUrl'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
render() {
|
||||
const favicon = getUrl('favicon.ico');
|
||||
const favicon = getUrl('favicon.ico')
|
||||
return (
|
||||
<html>
|
||||
<Head>
|
||||
<meta charSet='utf-8'/>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'/>
|
||||
<link rel='shortcut icon' href={favicon} type='image/x-icon'/>
|
||||
<link rel='icon' href={favicon} type='image/x-icon'/>
|
||||
<link rel='stylesheet' href={getUrl('/_next/static/style.css')} />
|
||||
<meta charSet="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<link rel="shortcut icon" href={favicon} type="image/x-icon" />
|
||||
<link rel="icon" href={favicon} type="image/x-icon" />
|
||||
<link rel="stylesheet" href={getUrl('/_next/static/style.css')} />
|
||||
<title>My Knowledge Base</title>
|
||||
</Head>
|
||||
<body>
|
||||
@@ -19,6 +22,6 @@ export default class MyDocument extends Document {
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
import React, { Component } from 'react';
|
||||
import Page from '../comps/Page';
|
||||
import MngDoc from '../comps/MngDoc';
|
||||
import AddDoc from '../comps/AddDoc';
|
||||
import React, { Component } from 'react'
|
||||
import Page from '../comps/Page'
|
||||
import MngDoc from '../comps/MngDoc'
|
||||
import AddDoc from '../comps/AddDoc'
|
||||
|
||||
class Edit extends Component {
|
||||
render() {
|
||||
const { found, doc } = this.props;
|
||||
if(!found) return (
|
||||
<Page>
|
||||
<h3>Doc not found...</h3>
|
||||
</Page>
|
||||
);
|
||||
return <MngDoc {...{doc}} />;
|
||||
const { found, doc } = this.props
|
||||
if (!found)
|
||||
return (
|
||||
<Page>
|
||||
<h3>Doc not found...</h3>
|
||||
</Page>
|
||||
)
|
||||
return <MngDoc {...{ doc }} />
|
||||
}
|
||||
}
|
||||
export default AddDoc(Edit);
|
||||
export default AddDoc(Edit)
|
||||
|
||||
194
pages/index.js
194
pages/index.js
@@ -1,14 +1,14 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Router from 'next/router';
|
||||
import Paginate from 'react-paginate';
|
||||
import Page from '../comps/Page';
|
||||
import PaddedRow from '../comps/PaddedRow';
|
||||
import Spinner from '../comps/Spinner';
|
||||
import DocItem from '../comps/DocItem';
|
||||
import { $limit, getDocs, buildQ } from '../util/getDocs';
|
||||
import getJwt from '../util/getJwt';
|
||||
import mapUser from '../util/mapUser';
|
||||
import React, { Component } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import Router from 'next/router'
|
||||
import Paginate from 'react-paginate'
|
||||
import Page from '../comps/Page'
|
||||
import PaddedRow from '../comps/PaddedRow'
|
||||
import Spinner from '../comps/Spinner'
|
||||
import DocItem from '../comps/DocItem'
|
||||
import { $limit, getDocs, buildQ } from '../util/getDocs'
|
||||
import getJwt from '../util/getJwt'
|
||||
import mapUser from '../util/mapUser'
|
||||
|
||||
class Index extends Component {
|
||||
state = {
|
||||
@@ -18,95 +18,104 @@ class Index extends Component {
|
||||
pending: false,
|
||||
error: null,
|
||||
total: 0,
|
||||
docs: []
|
||||
docs: [],
|
||||
}
|
||||
static async getInitialProps({ req, query }) {
|
||||
let page = 1, $search = '';
|
||||
if(query) {
|
||||
page = query.page || page;
|
||||
$search = query.search || $search;
|
||||
let page = 1,
|
||||
$search = ''
|
||||
if (query) {
|
||||
page = query.page || page
|
||||
$search = query.search || $search
|
||||
}
|
||||
const jwt = getJwt(req);
|
||||
if(!jwt) return { total: 0, docs: [] };
|
||||
const q = buildQ({ $search, $skip: page });
|
||||
const data = await getDocs(q, req ? jwt : false);
|
||||
return { ...data, page, $search };
|
||||
const jwt = getJwt(req)
|
||||
if (!jwt) return { total: 0, docs: [] }
|
||||
const q = buildQ({ $search, $skip: page })
|
||||
const data = await getDocs(q, req ? jwt : false)
|
||||
return { ...data, page, $search }
|
||||
}
|
||||
updDocs = (time, doSearch) => {
|
||||
clearTimeout(this.docsTime);
|
||||
clearTimeout(this.docsTime)
|
||||
this.docsTime = setTimeout(async () => {
|
||||
let { $sort, $search, page } = this.state;
|
||||
if(doSearch) {
|
||||
const query = { search: $search };
|
||||
if(!$search) delete query.search;
|
||||
Router.push({ pathname: '/', query });
|
||||
let { $sort, $search, page } = this.state
|
||||
if (doSearch) {
|
||||
const query = { search: $search }
|
||||
if (!$search) delete query.search
|
||||
Router.push({ pathname: '/', query })
|
||||
}
|
||||
this.setState({ error: null });
|
||||
this.setState({ error: null })
|
||||
this.docsTime = setTimeout(() => {
|
||||
this.setState({ pending: true });
|
||||
}, 125);
|
||||
|
||||
const q = buildQ({ $search, $sort, $skip: page });
|
||||
const data = await getDocs(q);
|
||||
clearTimeout(this.docsTime);
|
||||
this.setState({ ...data, pending: false });
|
||||
}, time || 275);
|
||||
this.setState({ pending: true })
|
||||
}, 125)
|
||||
|
||||
const q = buildQ({ $search, $sort, $skip: page })
|
||||
const data = await getDocs(q)
|
||||
clearTimeout(this.docsTime)
|
||||
this.setState({ ...data, pending: false })
|
||||
}, time || 275)
|
||||
}
|
||||
updQuery = e => {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
this.updDocs(0, e.target.id === '$search');
|
||||
this.setState({ [e.target.id]: e.target.value })
|
||||
this.updDocs(0, e.target.id === '$search')
|
||||
}
|
||||
handlePage = ({ selected }) => {
|
||||
const { $search } = this.state;
|
||||
const page = selected + 1;
|
||||
const query = {};
|
||||
this.setState({ page });
|
||||
if(page > 1) query.page = page;
|
||||
if($search) query.search = $search;
|
||||
Router.push({ pathname: '/', query });
|
||||
this.updDocs(1);
|
||||
const { $search } = this.state
|
||||
const page = selected + 1
|
||||
const query = {}
|
||||
this.setState({ page })
|
||||
if (page > 1) query.page = page
|
||||
if ($search) query.search = $search
|
||||
Router.push({ pathname: '/', query })
|
||||
this.updDocs(1)
|
||||
}
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
let { docs, total, page, $search } = nextProps;
|
||||
if(docs.length !== prevState.docs.length ||
|
||||
page !== prevState.page || $search !== prevState.$search) {
|
||||
return { total, docs, page, $search, pending: false };
|
||||
let { docs, total, page, $search } = nextProps
|
||||
if (
|
||||
docs.length !== prevState.docs.length ||
|
||||
page !== prevState.page ||
|
||||
$search !== prevState.$search
|
||||
) {
|
||||
return { total, docs, page, $search, pending: false }
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
componentDidUpdate(prevProps) {
|
||||
const { user, docs } = this.props;
|
||||
if(prevProps.user.email === user.email) return;
|
||||
if(user.email && docs.length === 0) this.updDocs(1);
|
||||
const { user, docs } = this.props
|
||||
if (prevProps.user.email === user.email) return
|
||||
if (user.email && docs.length === 0) this.updDocs(1)
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
$sort, $search, pending,
|
||||
error, docs, total, page
|
||||
} = this.state;
|
||||
const pages = Math.ceil(total / $limit);
|
||||
const { $sort, $search, pending, error, docs, total, page } = this.state
|
||||
const pages = Math.ceil(total / $limit)
|
||||
return (
|
||||
<Page>
|
||||
<PaddedRow>
|
||||
<input type='text' placeholder='Search knowledge base...'
|
||||
maxLength={128} value={$search} className='search'
|
||||
id='$search' onChange={this.updQuery}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search knowledge base..."
|
||||
maxLength={128}
|
||||
value={$search}
|
||||
className="search"
|
||||
id="$search"
|
||||
onChange={this.updQuery}
|
||||
/>
|
||||
</PaddedRow>
|
||||
<PaddedRow>
|
||||
<div className='inline' style={{ width: '100%' }}>
|
||||
<h4 className='noMargin'>Docs</h4>
|
||||
<div className='float-right inline'>
|
||||
<label htmlFor='sort'>Sort: </label>
|
||||
<select id='$sort' value={$sort}
|
||||
onChange={this.updQuery} style={{ width: 150 }}
|
||||
<div className="inline" style={{ width: '100%' }}>
|
||||
<h4 className="noMargin">Docs</h4>
|
||||
<div className="float-right inline">
|
||||
<label htmlFor="sort">Sort: </label>
|
||||
<select
|
||||
id="$sort"
|
||||
value={$sort}
|
||||
onChange={this.updQuery}
|
||||
style={{ width: 150 }}
|
||||
>
|
||||
<option value='updated:-1'>{'Updated (new -> old)'}</option>
|
||||
<option value='updated:1'>{'Updated (old -> new)'}</option>
|
||||
<option value='created:-1'>{'Created (new -> old)'}</option>
|
||||
<option value='created:1'>{'Created (old -> new)'}</option>
|
||||
<option value='dirName:1'>{'Name (A -> Z)'}</option>
|
||||
<option value='dirName:-1'>{'Name (Z -> A)'}</option>
|
||||
<option value="updated:-1">{'Updated (new -> old)'}</option>
|
||||
<option value="updated:1">{'Updated (old -> new)'}</option>
|
||||
<option value="created:-1">{'Created (new -> old)'}</option>
|
||||
<option value="created:1">{'Created (old -> new)'}</option>
|
||||
<option value="dirName:1">{'Name (A -> Z)'}</option>
|
||||
<option value="dirName:-1">{'Name (Z -> A)'}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -114,32 +123,37 @@ class Index extends Component {
|
||||
<PaddedRow>
|
||||
{docs.length > 0 || error || pending ? null : <p>No docs found...</p>}
|
||||
{!error ? null : <p>{error}</p>}
|
||||
{!pending || error ? null : <Spinner style={{ margin: '25px auto 0' }} />}
|
||||
{docs.length < 1 || pending || error ? null
|
||||
: <div>
|
||||
{!pending || error ? null : (
|
||||
<Spinner style={{ margin: '25px auto 0' }} />
|
||||
)}
|
||||
{docs.length < 1 || pending || error ? null : (
|
||||
<div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>
|
||||
Doc <span className='float-right'>Modified</span>
|
||||
</th></tr>
|
||||
<tr>
|
||||
<th>
|
||||
Doc <span className="float-right">Modified</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{docs.map(doc => <DocItem {...doc} key={doc.id} />)}
|
||||
</tbody>
|
||||
</table>
|
||||
{pages < 2 ? null
|
||||
: <Paginate pageCount={pages}
|
||||
containerClassName='paginate'
|
||||
activeClassName='active'
|
||||
</table>
|
||||
{pages < 2 ? null : (
|
||||
<Paginate
|
||||
pageCount={pages}
|
||||
containerClassName="paginate"
|
||||
activeClassName="active"
|
||||
onPageChange={this.handlePage}
|
||||
forcePage={page - 1}
|
||||
/>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
</PaddedRow>
|
||||
)}
|
||||
</PaddedRow>
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
export default connect(mapUser)(Index);
|
||||
export default connect(mapUser)(Index)
|
||||
|
||||
77
pages/k.js
77
pages/k.js
@@ -1,53 +1,64 @@
|
||||
import React, { Component } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Router from 'next/router';
|
||||
import fetch from 'isomorphic-unfetch';
|
||||
import Page from '../comps/Page';
|
||||
import Markdown from '../comps/Markdown';
|
||||
import AddDoc from '../comps/AddDoc';
|
||||
import getUrl from '../util/getUrl';
|
||||
import getJwt from '../util/getJwt';
|
||||
import React, { Component } from 'react'
|
||||
import Link from 'next/link'
|
||||
import Router from 'next/router'
|
||||
import fetch from 'isomorphic-unfetch'
|
||||
import Page from '../comps/Page'
|
||||
import Markdown from '../comps/Markdown'
|
||||
import AddDoc from '../comps/AddDoc'
|
||||
import getUrl from '../util/getUrl'
|
||||
import getJwt from '../util/getJwt'
|
||||
|
||||
class k extends Component {
|
||||
delete = async () => {
|
||||
const sure = window.confirm('Are you sure you want to delete this doc? This can not be undone.');
|
||||
if(!sure) return;
|
||||
const sure = window.confirm(
|
||||
'Are you sure you want to delete this doc? This can not be undone.'
|
||||
)
|
||||
if (!sure) return
|
||||
const del = await fetch(getUrl('docs/' + this.props.id), {
|
||||
headers: { Authorization: getJwt() },
|
||||
method: 'DELETE'
|
||||
}).catch(({ message }) => ({ ok: false, message }));
|
||||
if(del.ok) Router.push('/');
|
||||
method: 'DELETE',
|
||||
}).catch(({ message }) => ({ ok: false, message }))
|
||||
if (del.ok) Router.push('/')
|
||||
else {
|
||||
if(!del.message) {
|
||||
const data = await del.json();
|
||||
del.message = data.message;
|
||||
if (!del.message) {
|
||||
const data = await del.json()
|
||||
del.message = data.message
|
||||
}
|
||||
window.alert(`Could not delete doc, ${del.message}`);
|
||||
window.alert(`Could not delete doc, ${del.message}`)
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const { found, id, doc } = this.props;
|
||||
if(!found) return (
|
||||
<Page>
|
||||
<h3>Doc not found...</h3>
|
||||
</Page>
|
||||
);
|
||||
const { found, id, doc } = this.props
|
||||
if (!found)
|
||||
return (
|
||||
<Page>
|
||||
<h3>Doc not found...</h3>
|
||||
</Page>
|
||||
)
|
||||
return (
|
||||
<Page>
|
||||
<h5 style={{ marginBottom: '1rem' }}>
|
||||
{doc.dir}{doc.dir.length > 0 ? '/' : ''}{doc.name}{' - '}
|
||||
<Link as={getUrl('edit/' + id)}
|
||||
href={{ pathname: '/edit', query: { id }}}
|
||||
{doc.dir}
|
||||
{doc.dir.length > 0 ? '/' : ''}
|
||||
{doc.name}
|
||||
{' - '}
|
||||
<Link
|
||||
as={getUrl('edit/' + id)}
|
||||
href={{ pathname: '/edit', query: { id } }}
|
||||
>
|
||||
<a id='edit'>edit</a>
|
||||
<a id="edit">edit</a>
|
||||
</Link>
|
||||
<button className='float-right' onClick={this.delete}
|
||||
<button
|
||||
className="float-right"
|
||||
onClick={this.delete}
|
||||
style={{ margin: '5px 0 0' }}
|
||||
>Delete</button>
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</h5>
|
||||
<Markdown source={doc.md} className='Markdown' />
|
||||
<Markdown source={doc.md} className="Markdown" />
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
export default AddDoc(k);
|
||||
export default AddDoc(k)
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
import MngDoc from '../comps/MngDoc';
|
||||
export default MngDoc;
|
||||
import MngDoc from '../comps/MngDoc'
|
||||
export default MngDoc
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import fetch from 'isomorphic-unfetch';
|
||||
import Page from '../comps/Page';
|
||||
import PaddedRow from '../comps/PaddedRow';
|
||||
import Spinner from '../comps/Spinner';
|
||||
import updStateFromId from '../util/updStateFromId';
|
||||
import mapUser from '../util/mapUser';
|
||||
import getUrl from '../util/getUrl';
|
||||
import getJwt from '../util/getJwt';
|
||||
import React, { Component } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import fetch from 'isomorphic-unfetch'
|
||||
import Page from '../comps/Page'
|
||||
import PaddedRow from '../comps/PaddedRow'
|
||||
import Spinner from '../comps/Spinner'
|
||||
import updStateFromId from '../util/updStateFromId'
|
||||
import mapUser from '../util/mapUser'
|
||||
import getUrl from '../util/getUrl'
|
||||
import getJwt from '../util/getJwt'
|
||||
|
||||
class Settings extends Component {
|
||||
state = {
|
||||
@@ -15,54 +15,56 @@ class Settings extends Component {
|
||||
passErr: null,
|
||||
curPass: '',
|
||||
newPass: '',
|
||||
confPass: ''
|
||||
confPass: '',
|
||||
}
|
||||
updVal = updStateFromId.bind(this);
|
||||
updVal = updStateFromId.bind(this)
|
||||
submit = async e => {
|
||||
e.preventDefault();
|
||||
const { pending, curPass, newPass, confPass } = this.state;
|
||||
const { email, _id } = this.props.user;
|
||||
if(pending) return;
|
||||
const doErr = passErr => this.setState({ pending: false, passErr });
|
||||
const vals = {
|
||||
'Current password': curPass,
|
||||
'New password': newPass,
|
||||
'Confirm new password': confPass
|
||||
};
|
||||
const keys = Object.keys(vals);
|
||||
for(let i = 0; i < keys.length; i++) {
|
||||
let key = keys[i], val = vals[key];
|
||||
if(val.length === 0) return doErr(`${key} is required`);
|
||||
e.preventDefault()
|
||||
const { pending, curPass, newPass, confPass } = this.state
|
||||
const { email, _id } = this.props.user
|
||||
if (pending) return
|
||||
const doErr = passErr => this.setState({ pending: false, passErr })
|
||||
const vals = {
|
||||
'Current password': curPass,
|
||||
'New password': newPass,
|
||||
'Confirm new password': confPass,
|
||||
}
|
||||
if(newPass !== confPass) return doErr('New passwords don\'t match');
|
||||
|
||||
this.setState({ passErr: null, pending: true });
|
||||
const keys = Object.keys(vals)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
let key = keys[i],
|
||||
val = vals[key]
|
||||
if (val.length === 0) return doErr(`${key} is required`)
|
||||
}
|
||||
if (newPass !== confPass) return doErr("New passwords don't match")
|
||||
|
||||
this.setState({ passErr: null, pending: true })
|
||||
const updRes = await fetch(getUrl('users/' + _id), {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: getJwt() },
|
||||
body: JSON.stringify({ email, password: curPass, newPassword: newPass })
|
||||
}).catch(doErr);
|
||||
if(updRes.ok) {
|
||||
this.setState({
|
||||
curPass: '', newPass: '', confPass: '',
|
||||
passErr: 'Password updated successfully',
|
||||
pending: false
|
||||
});
|
||||
body: JSON.stringify({ email, password: curPass, newPassword: newPass }),
|
||||
}).catch(doErr)
|
||||
if (updRes.ok) {
|
||||
this.setState({
|
||||
curPass: '',
|
||||
newPass: '',
|
||||
confPass: '',
|
||||
passErr: 'Password updated successfully',
|
||||
pending: false,
|
||||
})
|
||||
} else {
|
||||
let message = 'failed to update password';
|
||||
try {
|
||||
const data = await updRes.json();
|
||||
message = data.message || message;
|
||||
} catch (err) { doErr(err.message); }
|
||||
doErr(message);
|
||||
let message = 'failed to update password'
|
||||
try {
|
||||
const data = await updRes.json()
|
||||
message = data.message || message
|
||||
} catch (err) {
|
||||
doErr(err.message)
|
||||
}
|
||||
doErr(message)
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
pending, passErr, curPass,
|
||||
newPass, confPass
|
||||
} = this.state;
|
||||
|
||||
const { pending, passErr, curPass, newPass, confPass } = this.state
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PaddedRow amount={25}>
|
||||
@@ -71,20 +73,33 @@ class Settings extends Component {
|
||||
<form noValidate style={{ padding: '0 0 45px' }}>
|
||||
<h4>Change password</h4>
|
||||
<fieldset>
|
||||
<label htmlFor='curPass'>Current Password</label>
|
||||
<input type='password' id='curPass' onChange={this.updVal}
|
||||
placeholder='Current super secret password...' value={curPass}
|
||||
<label htmlFor="curPass">Current Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="curPass"
|
||||
onChange={this.updVal}
|
||||
placeholder="Current super secret password..."
|
||||
value={curPass}
|
||||
/>
|
||||
<label htmlFor='newPass'>New Password</label>
|
||||
<input type='password' id='newPass' onChange={this.updVal}
|
||||
placeholder='New super secret password...' value={newPass}
|
||||
<label htmlFor="newPass">New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="newPass"
|
||||
onChange={this.updVal}
|
||||
placeholder="New super secret password..."
|
||||
value={newPass}
|
||||
/>
|
||||
<label htmlFor='confPass'>Confirm New Password</label>
|
||||
<input type='password' id='confPass' onChange={this.updVal}
|
||||
placeholder='Confirm new super secret password...' value={confPass}
|
||||
<label htmlFor="confPass">Confirm New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confPass"
|
||||
onChange={this.updVal}
|
||||
placeholder="Confirm new super secret password..."
|
||||
value={confPass}
|
||||
/>
|
||||
</fieldset>
|
||||
<button onClick={this.submit}
|
||||
<button
|
||||
onClick={this.submit}
|
||||
className={'float-right' + (pending ? ' disabled' : '')}
|
||||
>
|
||||
{pending ? <Spinner /> : 'Submit'}
|
||||
@@ -93,7 +108,7 @@ class Settings extends Component {
|
||||
</form>
|
||||
</PaddedRow>
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
export default connect(mapUser)(Settings);
|
||||
export default connect(mapUser)(Settings)
|
||||
|
||||
Reference in New Issue
Block a user