Add UI to crop member photo

webclient/src/Account.js

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import ReactCrop from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
 import './light.css';
 import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import { BasicTable, staticUrl, requester } from './utils.js';
@@ -110,12 +112,30 @@ function ChangePasswordForm(props) {
 	);
 };
 
+
+export function ImageCrop(props) {
+	const { file, crop, setCrop } = props;
+	const [src, setSrc] = useState(false);
+	const reader = new FileReader();
+	reader.onload = (e) => setSrc(e.target.result);
+	reader.readAsDataURL(file);
+	return (
+		src && <ReactCrop
+			src={src}
+			crop={crop}
+			locked
+			onChange={(crop, percentCrop) => setCrop(percentCrop)}
+		/>
+	);
+}
+
 export function AccountForm(props) {
 	const { token, user, refreshUser } = props;
 	const member = user.member;
 	const [input, setInput] = useState({ ...member, set_details: true });
 	const [error, setError] = useState({});
 	const [loading, setLoading] = useState(false);
+	const [crop, setCrop] = useState({ unit: '%', height: 100, aspect: 3/4 });
 	const history = useHistory();
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
@@ -126,7 +146,7 @@ export function AccountForm(props) {
 	const handleSubmit = (e) => {
 		if (loading) return;
 		setLoading(true);
-		const data = { ...input, email: input.email.toLowerCase() };
+		const data = { ...input, email: input.email.toLowerCase(), crop: JSON.stringify(crop) };
 		requester('/members/' + member.id + '/', 'PATCH', token, data)
 		.then(res => {
 			setError({});
@@ -222,6 +242,13 @@ export function AccountForm(props) {
 				onChange={handleUpload}
 			/>
 
+			{input.photo &&
+				<>
+					<ImageCrop file={input.photo} crop={crop} setCrop={setCrop} />
+					<p>Move the box above to crop your image.</p>
+				</>
+			}
+
 			<Form.Button loading={loading} error={error.non_field_errors}>
 				Submit
 			</Form.Button>