llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-05 05:50:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: added avatar tailoring and uploading

Browse Source 
Signed-off-by: Kininaru <shiftregister233@outlook.com>

fixed type errors

Signed-off-by: Kininaru <shiftregister233@outlook.com>

fixed the wrong folder

Signed-off-by: Kininaru <shiftregister233@outlook.com>

rewrite login check logic, added unix time to avatar url

Signed-off-by: Kininaru <shiftregister233@outlook.com>

fixed a bug about strconv

Signed-off-by: Kininaru <shiftregister233@outlook.com>

supported oss

Signed-off-by: Kininaru <shiftregister233@outlook.com>

disabled oss provide qiniu

Signed-off-by: Kininaru <shiftregister233@outlook.com>

Fixed avatar url error

Signed-off-by: Kininaru <shiftregister233@outlook.com>

Fixed avatar length bug

Signed-off-by: Kininaru <shiftregister233@outlook.com>

Fixed avatar length bug

Signed-off-by: Kininaru <shiftregister233@outlook.com>

fixed oss.conf

Signed-off-by: Kininaru <shiftregister233@outlook.com>

Put uploading avatar into UserEditPage

Signed-off-by: Kininaru <shiftregister233@outlook.com>

removed avatar dir

Signed-off-by: Kininaru <shiftregister233@outlook.com>

removed avatar in main.go

Signed-off-by: Kininaru <shiftregister233@outlook.com>

Made CropperDiv a reusable component, and updated README for OSS config

Signed-off-by: Kininaru <shiftregister233@outlook.com>

Convert ts to js

Signed-off-by: Kininaru <shiftregister233@outlook.com>

removed ts

Signed-off-by: Kininaru <shiftregister233@outlook.com>

fix: set avatar link to string 255

Signed-off-by: Kininaru <shiftregister233@outlook.com>

fix: updated yarn lock

Signed-off-by: Kininaru <shiftregister233@outlook.com>

add: Casbin license

Signed-off-by: Kininaru <shiftregister233@outlook.com>
This commit is contained in:
Kininaru
2021-03-14 15:50:36 +08:00
parent 202a94a8e5
commit 1908f528c8
17 changed files with 420 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
web/src/CropperDiv.js Normal file
View File

@ -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;