Feat: 用户信息更新/主题更新

.travis.yml

@@ -1,8 +0,0 @@
-language: node_js
-node_js:
-  - '10.13.0'
-before_script: npm install
-script: npm run-script build
-after_success:
-  - zip -r -q -o pack.zip  ./build
-  - curl -F "token=$TOKEN" -F "commit=$TRAVIS_COMMIT" -F "source=frontend" -F "filename=@pack.zip" -H "Expect:" http://cloudreve.org/deploy.php

src/actions/index.js

@@ -126,6 +126,13 @@ export const openShareDialog = () => {
     };
 };
 
+export const applyThemes = (theme)=>{
+    return {
+        type:'APPLY_THEME',
+        theme:theme,
+    };
+}
+
 export const openMusicDialog = () => {
     return {
         type: "OPEN_MUSIC_DIALOG"

src/component/Login/LoginForm.js

@@ -2,7 +2,7 @@ import React,{ useCallback,useState,useEffect} from 'react'
 import { useDispatch,useSelector  } from 'react-redux'
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import { makeStyles } from "@material-ui/core";
-import { toggleSnackbar, } from "../../actions/index"
+import { toggleSnackbar, applyThemes} from "../../actions/index"
 import Placeholder from "../placeholder/captcha"
 import {useHistory} from  'react-router-dom'
 import API from "../../middleware/Api"
@@ -86,6 +86,10 @@ function LoginForm (){
         (vertical, horizontal, msg, color) => dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
         [dispatch]
     )
+    const ApplyThemes = useCallback(
+        (theme) => dispatch(applyThemes(theme)),
+        [dispatch]
+    )
 
     let history = useHistory();
 
@@ -126,6 +130,12 @@ function LoginForm (){
             // }else{
                 setLoading(false)
                 Auth.authenticate(response.data);
+
+                // 设置用户主题色
+                if (response.data["preferred_theme"] !== ""){
+                    ApplyThemes(response.data["preferred_theme"]);
+                }
+                
                 history.push('/home');
                 ToggleSnackbar("top","right","登录成功","success");
             // }

src/index.js

@@ -1,95 +1,126 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import * as serviceWorker from './serviceWorker';
-import {
-    HashRouter as Router,
-    Switch,
-    Route,
-  } from "react-router-dom";
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import App from "./App"
-import cloureveApp from './reducers'
-import {InitSiteConfig,UpdateSiteConfig} from "./middleware/Init"
+import React from "react";
+import ReactDOM from "react-dom";
+import * as serviceWorker from "./serviceWorker";
+import { HashRouter as Router, Switch, Route } from "react-router-dom";
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import App from "./App";
+import cloureveApp from "./reducers";
+import { InitSiteConfig, UpdateSiteConfig } from "./middleware/Init";
+import Auth from "./middleware/Auth";
 serviceWorker.register();
 
 const defaultStatus = InitSiteConfig({
-    siteConfig:{
-        title:"Cloudreve",
+    siteConfig: {
+        title: "Cloudreve",
         loginCaptcha: false,
         regCaptcha: false,
         forgetCaptcha: false,
         emailActive: false,
         QQLogin: false,
-        theme:{"palette":{"common":{"black":"#000","white":"#fff"},"background":{"paper":"#fff","default":"#fafafa"},"primary":{"light":"#7986cb","main":"#3f51b5","dark":"#303f9f","contrastText":"#fff"},"secondary":{"light":"#ff4081","main":"#f50057","dark":"#c51162","contrastText":"#fff"},"error":{"light":"#e57373","main":"#f44336","dark":"#d32f2f","contrastText":"#fff"},"text":{"primary":"rgba(0, 0, 0, 0.87)","secondary":"rgba(0, 0, 0, 0.54)","disabled":"rgba(0, 0, 0, 0.38)","hint":"rgba(0, 0, 0, 0.38)"},"explorer":{"filename":"#474849","icon":"#8f8f8f","bgSelected":"#D5DAF0","emptyIcon":"#e8e8e8"}}},
-    },
-    navigator:{
-        path:"/",
-        refresh:true,
-    },
-    viewUpdate:{
-        open:false,
-        explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        userPopoverAnchorEl:null,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
-            getSource:false,
-            resave:false,
-        },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        themes:null,
+        theme: {
+            palette: {
+                common: { black: "#000", white: "#fff" },
+                background: { paper: "#fff", default: "#fafafa" },
+                primary: {
+                    light: "#7986cb",
+                    main: "#3f51b5",
+                    dark: "#303f9f",
+                    contrastText: "#fff"
+                },
+                secondary: {
+                    light: "#ff4081",
+                    main: "#f50057",
+                    dark: "#c51162",
+                    contrastText: "#fff"
+                },
+                error: {
+                    light: "#e57373",
+                    main: "#f44336",
+                    dark: "#d32f2f",
+                    contrastText: "#fff"
+                },
+                text: {
+                    primary: "rgba(0, 0, 0, 0.87)",
+                    secondary: "rgba(0, 0, 0, 0.54)",
+                    disabled: "rgba(0, 0, 0, 0.38)",
+                    hint: "rgba(0, 0, 0, 0.38)"
+                },
+                explorer: {
+                    filename: "#474849",
+                    icon: "#8f8f8f",
+                    bgSelected: "#D5DAF0",
+                    emptyIcon: "#e8e8e8"
+                }
+            }
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    navigator: {
+        path: "/",
+        refresh: true
+    },
+    viewUpdate: {
+        open: false,
+        explorerViewMethod: "icon",
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        userPopoverAnchorEl: null,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false,
+            getSource: false,
+            resave: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
+        }
+    },
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        keywords:null,
+        imgPreview: {
+            first: null,
+            other: []
+        },
+        keywords: null
     }
 });
 
-let store = createStore(cloureveApp,defaultStatus)
-
-UpdateSiteConfig(store)
+let store = createStore(cloureveApp, defaultStatus);
+UpdateSiteConfig(store);
 
 ReactDOM.render(
     <Provider store={store}>
         <Router>
             <Switch>
                 <Route exact path="">
-                    <App/>
+                    <App />
                 </Route>
             </Switch>
         </Router>
-    </Provider>
-, document.getElementById('root'));
-
+    </Provider>,
+    document.getElementById("root")
+);

src/middleware/Init.js

@@ -1,6 +1,7 @@
 import { setSiteConfig, toggleSnackbar } from "../actions/index"
 import { fixUrlHash } from "../untils/index"
 import API from "./Api"
+import Auth from "./Auth"
 export var InitSiteConfig = (rawStore) => {
     // 从缓存获取默认配置
     let configCache = JSON.parse(localStorage.getItem('siteConfigCache'));
@@ -11,13 +12,33 @@ export var InitSiteConfig = (rawStore) => {
     var url = new URL(fixUrlHash(window.location.href));
     var c = url.searchParams.get("path");
     rawStore.navigator.path = c===null?"/":c;
+    // 初始化用户个性配置
+    rawStore.siteConfig = initUserConfig(rawStore.siteConfig)
     return rawStore
 }
 
+const initUserConfig = (siteConfig) => {
+    if (siteConfig.user!==undefined && siteConfig.user.id !==0){
+        let themes = JSON.parse(siteConfig.themes);
+        let user = siteConfig.user;
+        delete siteConfig.user
+    
+        //更换用户自定配色
+        if (user["preferred_theme"] !== "" && themes[user["preferred_theme"]] !== undefined){
+            siteConfig.theme = themes[user["preferred_theme"]]
+        }
+
+        // 更新登录态
+        Auth.authenticate(user);
+    }
+    return siteConfig
+}
+
 export async function UpdateSiteConfig(store) {
     API.get("/site/config").then(function(response) {
         let themes = JSON.parse(response.data.themes);
         response.data.theme = themes[response.data.defaultTheme]
+        response.data = initUserConfig(response.data)
         store.dispatch(setSiteConfig(response.data));
         localStorage.setItem('siteConfigCache', JSON.stringify(response.data));
     }).catch(function(error) {

src/reducers/index.js

@@ -165,6 +165,18 @@ const cloudreveApp = (state = [], action) => {
             });
         case 'NAVIGATOR_TO':
             return doNavigate(action.path,state);
+        case 'APPLY_THEME':
+            if (state.siteConfig.themes !== null){
+                let themes = JSON.parse(state.siteConfig.themes);
+                if (themes[action.theme] === undefined){
+                    return state;
+                }
+                return Object.assign({}, state, {
+                    siteConfig: Object.assign({}, state.siteConfig, {
+                        theme:themes[action.theme],
+                    }),
+                });
+            }
         case 'NAVIGATOR_UP':
             var pathSplit = state.navigator.path.split("/");
             pathSplit.pop();