From cf503b671a0ed38b3eaf78fc9ac52f67125fe3c8 Mon Sep 17 00:00:00 2001 From: HFO4 <912394456@qq.com> Date: Thu, 20 Feb 2020 12:42:12 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E6=AD=A5=E9=AA=8C=E8=AF=81=20/=20?= =?UTF-8?q?=E5=AF=86=E7=A0=81=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Navbar/PolicySwitcher.js | 152 +++++++++++++++++ src/component/Navbar/UserAvatar.js | 2 + src/component/Setting/UserSetting.js | 222 ++++++++++++++----------- src/component/Setting/WebDAV.js | 2 +- src/untils/index.js | 15 ++ 5 files changed, 296 insertions(+), 97 deletions(-) create mode 100644 src/component/Navbar/PolicySwitcher.js diff --git a/src/component/Navbar/PolicySwitcher.js b/src/component/Navbar/PolicySwitcher.js new file mode 100644 index 0000000..c8a32c9 --- /dev/null +++ b/src/component/Navbar/PolicySwitcher.js @@ -0,0 +1,152 @@ +import React, { useCallback } from "react"; +import {Avatar, IconButton, ListItem, ListItemAvatar, ListItemText, makeStyles} from "@material-ui/core"; +import Tooltip from "@material-ui/core/Tooltip"; +import Auth from "../../middleware/Auth"; +import { + Nas +} from "mdi-material-ui"; +import Popover from "@material-ui/core/Popover"; +import Typography from "@material-ui/core/Typography"; +import API from "../../middleware/Api"; +import {useDispatch} from "react-redux"; +import {toggleSnackbar} from "../../actions"; +import {Check} from "@material-ui/icons"; +import Backup from "@material-ui/icons/Backup"; +import {blue, green} from "@material-ui/core/colors"; +import List from "@material-ui/core/List"; + +const useStyles = makeStyles(theme => ({ + uploadFromFile: { + backgroundColor: blue[100], + color: blue[600] + }, + policySelected: { + backgroundColor: green[100], + color: green[800] + }, +})); + +const PolicySwitcher = (props) => { + const [anchorEl, setAnchorEl] = React.useState(null); + const [policies, setPolicies] = React.useState({ + current:{id:"",name:""}, + options:[], + }); + + const dispatch = useDispatch(); + const ToggleSnackbar = useCallback( + (vertical, horizontal, msg, color) => + dispatch(toggleSnackbar(vertical, horizontal, msg, color)), + [dispatch] + ); + + const handleClick = event => { + if(policies.current.id === ""){ + API.get("/user/setting/policies", {}) + .then(response => { + setPolicies(response.data); + }) + .catch(error => { + ToggleSnackbar( + "top", + "right", + error.message, + "error" + ); + }); + } + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const switchTo = id =>{ + if(id === policies.current.id){ + handleClose(); + return; + } + API + .patch("/user/setting/policy", { + id: id + }) + .then(response => { + window.location.reload(); + }) + .catch(error => { + this.props.toggleSnackbar( + "top", + "right", + error.message, + "error" + ); + this.setState({ + loading: "" + }); + }); + } + + const open = Boolean(anchorEl); + const id = open ? 'simple-popover' : undefined; + + const classes = useStyles(); + return ( + <> + + + + + + + + {policies.options.map( + (value, index) => ( + switchTo(value.id)} + > + + {value.id === policies.current.id && + + + + } + {value.id !== policies.current.id && + + + + } + + + + + ) + )} + + + + ); +}; + +export default PolicySwitcher; diff --git a/src/component/Navbar/UserAvatar.js b/src/component/Navbar/UserAvatar.js index ba0c6f3..1a8abaf 100644 --- a/src/component/Navbar/UserAvatar.js +++ b/src/component/Navbar/UserAvatar.js @@ -17,6 +17,7 @@ import { import { withRouter } from "react-router-dom"; import pathHelper from "../../untils/page"; import DarkModeSwitcher from "./DarkModeSwitcher" +import PolicySwitcher from "./PolicySwitcher"; const mapStateToProps = state => { return { @@ -103,6 +104,7 @@ class UserAvatarCompoment extends Component { {loginCheck && ( <> + diff --git a/src/component/Setting/UserSetting.js b/src/component/Setting/UserSetting.js index b8d39ff..b459648 100644 --- a/src/component/Setting/UserSetting.js +++ b/src/component/Setting/UserSetting.js @@ -41,12 +41,14 @@ import { } from "@material-ui/core"; import Backup from "@material-ui/icons/Backup"; import SettingsInputHdmi from "@material-ui/icons/SettingsInputHdmi"; -import { blue, yellow } from "@material-ui/core/colors"; +import { blue, green, yellow } from "@material-ui/core/colors"; import API from "../../middleware/Api"; import Auth from "../../middleware/Auth"; import { withRouter } from "react-router"; import TimeAgo from "timeago-react"; -import TableCell from "@material-ui/core/TableCell"; +import QRCode from "qrcode-react"; +import { Check } from "@material-ui/icons"; +import { transformTime } from "../../untils"; const styles = theme => ({ layout: { @@ -76,6 +78,10 @@ const styles = theme => ({ backgroundColor: yellow[100], color: yellow[800] }, + policySelected: { + backgroundColor: green[100], + color: green[800] + }, infoText: { marginRight: "17px" }, @@ -132,11 +138,18 @@ const styles = theme => ({ }, paddingText: { paddingRight: theme.spacing(2) - } + }, + qrcode:{ + width: 128, + marginTop: 16, + marginRight: 16, + }, }); const mapStateToProps = state => { - return {}; + return { + title: state.siteConfig.title + }; }; const mapDispatchToProps = dispatch => { @@ -176,13 +189,15 @@ class UserSettingCompoment extends Component { group_expires: 0, policy: { current: { - name: "-" + name: "-", + id: "" }, options: [] }, qq: "", homepage: true, two_factor: "", + two_fa_secret: "", prefer_theme: "", themes: {} } @@ -276,24 +291,11 @@ class UserSettingCompoment extends Component { }; changePolicy = id => { - axios - .post("/Member/ChangePolicy", { - id: id - }) + API.patch("/user/setting/policy", { + id: id + }) .then(response => { - if (response.data.error === "1") { - this.props.toggleSnackbar( - "top", - "right", - response.data.msg, - "error" - ); - } else { - window.location.reload(); - } - this.setState({ - loading: "" - }); + window.location.reload(); }) .catch(error => { this.props.toggleSnackbar( @@ -356,8 +358,8 @@ class UserSettingCompoment extends Component { this.setState({ settings: { ...this.state.settings, - qq:false, - }, + qq: false + } }); } else { window.location.href = response.data; @@ -415,26 +417,22 @@ class UserSettingCompoment extends Component { }; handleToggle = () => { - axios - .post("/Member/HomePage", { - status: this.state.homePage === "1" ? "false" : "true" - }) + API.patch("/user/setting/homepage", { + status: !this.state.settings.homepage + }) .then(response => { - if (response.data.error === "1") { - this.props.toggleSnackbar( - "top", - "right", - response.data.msg, - "error" - ); - } else { - this.props.toggleSnackbar( - "top", - "right", - "设置已保存", - "success" - ); - } + this.props.toggleSnackbar( + "top", + "right", + "设置已保存", + "success" + ); + this.setState({ + settings: { + ...this.state.settings, + homepage: !this.state.settings.homepage + } + }); }) .catch(error => { this.props.toggleSnackbar( @@ -444,9 +442,6 @@ class UserSettingCompoment extends Component { "error" ); }); - this.setState({ - homePage: this.state.homePage === "1" ? "0" : "1" - }); }; changhePwd = () => { @@ -457,29 +452,26 @@ class UserSettingCompoment extends Component { "两次密码输入不一致", "warning" ); + return; } this.setState({ loading: "changePassword" }); - axios - .post("/Member/ChangePwd", { - origin: this.state.oldPwd, - new: this.state.newPwd - }) + API.patch("/user/setting/password", { + old: this.state.oldPwd, + new: this.state.newPwd + }) .then(response => { - if (response.data.error === "1") { - this.props.toggleSnackbar( - "top", - "right", - response.data.msg, - "error" - ); - this.setState({ - loading: "" - }); - } else { - window.location.reload(); - } + this.props.toggleSnackbar( + "top", + "right", + "密码已更新", + "success" + ); + this.setState({ + loading: "" + }); + this.handleClose(); }) .catch(error => { this.props.toggleSnackbar( @@ -575,28 +567,42 @@ class UserSettingCompoment extends Component { }); }; + init2FA = () => { + API.get("/user/setting/2fa") + .then(response => { + this.setState({ + two_fa_secret: response.data + }); + this.setState({ twoFactor: true }); + }) + .catch(error => { + this.props.toggleSnackbar( + "top", + "right", + error.message, + "error" + ); + }); + }; + twoFactor = () => { this.setState({ loading: "twoFactor" }); - axios - .post("/Member/TwoFactorConfirm", { + API.patch("/user/setting/2fa", { code: this.state.authCode }) .then(response => { - if (response.data.error === "1") { - this.props.toggleSnackbar( - "top", - "right", - response.data.msg, - "error" - ); - this.setState({ - loading: "" - }); - } else { - window.location.reload(); - } + this.props.toggleSnackbar( + "top", + "right", + "设定已保存", + "success" + ); + this.setState({ + loading: "" + }); + this.handleClose(); }) .catch(error => { this.props.toggleSnackbar( @@ -776,10 +782,7 @@ class UserSettingCompoment extends Component { )} - this.bindQQ()} - > + this.bindQQ()}> @@ -811,7 +814,7 @@ class UserSettingCompoment extends Component { - + - {user.created_at} + {transformTime( + parseInt(user.created_at + "000") + )} @@ -888,12 +893,7 @@ class UserSettingCompoment extends Component { - - this.setState({ twoFactor: true }) - } - > + this.init2FA()}> @@ -1037,7 +1037,7 @@ class UserSettingCompoment extends Component { open={this.state.changePolicy} onClose={this.handleClose} > - 切换上传策略 + 切换存储策略 {this.state.settings.policy.options.map( (value, index) => ( @@ -1047,9 +1047,30 @@ class UserSettingCompoment extends Component { key={index} onClick={() => this.changePolicy(value.id)} > - - - + + {value.id === + this.state.settings.policy.current + .id && ( + + + + )} + {value.id !== + this.state.settings.policy.current + .id && ( + + + + )} + ) @@ -1212,7 +1233,16 @@ class UserSettingCompoment extends Component { 启用二步验证
- qrcode +
+ - WebDAV的登陆用户名统一为：{user.user_name}{" "} + WebDAV的地址为：{window.location.origin + "/dav"}；登陆用户名统一为：{user.user_name}{" "} ；密码为所创建账号的密码。 diff --git a/src/untils/index.js b/src/untils/index.js index ab0c127..592b645 100644 --- a/src/untils/index.js +++ b/src/untils/index.js @@ -154,4 +154,19 @@ export function basename(path){ let pathList = path.split("/"); pathList.pop() return pathList.join("/") === "" ? "/" : pathList.join("/") +} + +export function transformTime(timestamp = +new Date()) { + if (timestamp) { + var time = new Date(timestamp); + var y = time.getFullYear(); //getFullYear方法以四位数字返回年份 + var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一 + var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31) + var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23) + var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59) + var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59) + return y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s; + } else { + return ''; + } } \ No newline at end of file