Merge pull request #23 from Kininaru/master

feat: added avatar tailoring and uploading

web/src/App.js

@@ -1,4 +1,4 @@
-// Copyright 2020 The casbin Authors. All Rights Reserved.
+// Copyright 2021 The casbin Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

web/src/CropperDiv.js

@@ -0,0 +1,127 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, {useState} from "react";
+import Cropper from "react-cropper";
+import "cropperjs/dist/cropper.css";
+import * as Setting from "./Setting";
+import {Button, Row, Col, Modal} from 'antd';
+
+export const CropperDiv = (props) => {
+    const [image, setImage] = useState("");
+    const [cropper, setCropper] = useState();
+    const [visible, setVisible] = React.useState(false);
+    const [confirmLoading, setConfirmLoading] = React.useState(false);
+    const {title} = props;
+    const {targetFunction} = props;
+    const {buttonText} = props;
+
+    const onChange = (e) => {
+        e.preventDefault();
+        let files;
+        if (e.dataTransfer) {
+            files = e.dataTransfer.files;
+        } else if (e.target) {
+            files = e.target.files;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+            setImage(reader.result);
+        };
+        if (!(files[0] instanceof Blob)) {
+            return;
+        }
+        reader.readAsDataURL(files[0]);
+    };
+
+    const uploadAvatar = () => {
+        let canvas = cropper.getCroppedCanvas();
+        if (canvas === null) {
+            Setting.showMessage("error", "You must select a picture first!");
+            return false;
+        }
+        Setting.showMessage("success", "uploading...");
+        targetFunction(canvas.toDataURL());
+        return true;
+    }
+
+    const showModal = () => {
+        setVisible(true);
+    };
+
+    const handleOk = () => {
+        setConfirmLoading(true);
+        if (!uploadAvatar()) {
+            setConfirmLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        console.log('Clicked cancel button');
+        setVisible(false);
+    };
+
+    const selectFile = () => {
+        document.getElementsByName('fileupload').item(0).click()
+    }
+
+    return (
+        <div>
+            <Button type="default" onClick={showModal}>
+                {buttonText}
+            </Button>
+            <Modal
+                title={title}
+                visible={visible}
+                okText={"Crop and Upload Avatar"}
+                confirmLoading={confirmLoading}
+                onCancel={handleCancel}
+                width={1000}
+                footer={
+                    [<Button block type="primary" onClick={handleOk}>Crop and Submit</Button>]
+                }
+            >
+                <Col>
+                    <Row>
+                        <Col style={{margin: "20px auto 100px auto", width: 1000}}>
+                            <Row style={{width: "100%", marginBottom: "20px"}}>
+                                <input style={{display: "none"}} name="fileupload" type="file" onChange={onChange}/>
+                                <Button block onClick={selectFile}>Select File</Button>
+                            </Row>
+                            <Cropper
+                                style={{height: 400}}
+                                initialAspectRatio={1}
+                                preview=".img-preview"
+                                src={image}
+                                viewMode={1}
+                                guides={true}
+                                minCropBoxHeight={10}
+                                minCropBoxWidth={10}
+                                background={false}
+                                responsive={true}
+                                autoCropArea={1}
+                                checkOrientation={false}
+                                onInitialized={(instance) => {
+                                    setCropper(instance);
+                                }}
+                            />
+                        </Col>
+                    </Row>
+                </Col>
+            </Modal>
+        </div>
+    )
+}
+
+export default CropperDiv;

web/src/Setting.js

@@ -1,4 +1,4 @@
-// Copyright 2020 The casbin Authors. All Rights Reserved.
+// Copyright 2021 The casbin Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

web/src/UserEditPage.js

@@ -19,6 +19,7 @@ import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
 import {LinkOutlined} from "@ant-design/icons";
 import i18next from "i18next";
+import CropperDiv from "./CropperDiv.js";
 
 const { Option } = Select;
 
@@ -147,6 +148,9 @@ class UserEditPage extends React.Component {
                 </a>
               </Col>
             </Row>
+            <Row style={{marginTop: '20px'}}>
+              <CropperDiv buttonText={"Upload Avatar"} title={"Upload Avatar"} targetFunction={UserBackend.uploadAvatar} />
+            </Row>
           </Col>
         </Row>
         <Row style={{marginTop: '20px'}} >

web/src/auth/AuthBackend.js

@@ -1,4 +1,4 @@
-// Copyright 2020 The casbin Authors. All Rights Reserved.
+// Copyright 2021 The casbin Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

web/src/backend/UserBackend.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import * as Setting from "../Setting";
+import * as AuthBackend from "../auth/AuthBackend";
 
 export function getGlobalUsers() {
   return fetch(`${Setting.ServerUrl}/api/get-global-users`, {
@@ -61,3 +62,20 @@ export function deleteUser(user) {
     body: JSON.stringify(newUser),
   }).then(res => res.json());
 }
+
+export function uploadAvatar(avatar) {
+  let account;
+  AuthBackend.getAccount().then((res) => {
+    account = Setting.parseJson(res.data);
+    let formData = new FormData();
+    formData.append("avatarfile", avatar);
+    formData.append("password", account.password);
+    fetch(`${Setting.ServerUrl}/api/upload-avatar`, {
+      body: formData,
+      method: 'POST',
+      credentials: 'include',
+    }).then((res) => {
+      window.location.href = "/account";
+    });
+  });
+}

web/src/index.js

@@ -1,4 +1,4 @@
-// Copyright 2020 The casbin Authors. All Rights Reserved.
+// Copyright 2021 The casbin Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.