e2m/dispatch
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add colored nicks settings option

Browse source
This commit is contained in:
Ken-Håvard Lieng 2018-10-15 08:56:17 +02:00
parent ec03db4db6
commit 6c6a9e12cf
27 changed files with 577 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

64
client/src/js/components/pages/Settings.js
View file

@ -1,32 +1,56 @@
import React from 'react';
import Navicon from 'containers/Navicon';
import Checkbox from 'components/ui/Checkbox';
import FileInput from 'components/ui/FileInput';
const Settings = ({ settings, onCertChange, onKeyChange, uploadCert }) => {
const Settings = ({
settings,
setSetting,
onCertChange,
onKeyChange,
uploadCert
}) => {
const status = settings.uploadingCert ? 'Uploading...' : 'Upload';
const error = settings.certError;
return (
<div className="settings">
<Navicon />
<h1>Settings</h1>
<h2>Client Certificate</h2>
<div>
<p>Certificate</p>
<FileInput
name={settings.certFile || 'Select Certificate'}
onChange={onCertChange}
/>
<div className="settings-container">
<div className="settings">
<Navicon />
<h1>Settings</h1>
<div className="settings-section">
<h2>Visuals</h2>
<Checkbox
name="coloredNicks"
label="Colored nicks"
checked={settings.coloredNicks}
onChange={e => setSetting('coloredNicks', e.target.checked)}
/>
</div>
<div className="settings-section">
<h2>Client Certificate</h2>
<div className="settings-cert">
<div className="settings-file">
<p>Certificate</p>
<FileInput
name={settings.certFile || 'Select Certificate'}
onChange={onCertChange}
/>
</div>
<div className="settings-file">
<p>Private Key</p>
<FileInput
name={settings.keyFile || 'Select Key'}
onChange={onKeyChange}
/>
</div>
<button className="settings-button" onClick={uploadCert}>
{status}
</button>
{error ? <p className="error">{error}</p> : null}
</div>
</div>
</div>
<div>
<p>Private Key</p>
<FileInput
name={settings.keyFile || 'Select Key'}
onChange={onKeyChange}
/>
</div>
<button onClick={uploadCert}>{status}</button>
{error ? <p className="error">{error}</p> : null}
</div>
);
};