User setting redesign (#3443)

* [user settings] modification

* [user setting] side nav: show current item & improvement

* [user stting] webdav password: redesigned it

* [user settings] language setting: redesigned it

frontend/src/components/dialog/update-webdav-password.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  password: PropTypes.string.isRequired,
+  updatePassword: PropTypes.func.isRequired,
+  toggle: PropTypes.func.isRequired
+};
+
+class UpdateWebdavPassword extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { 
+      password: this.props.password,
+      isPasswordVisible: false,
+      btnDisabled: false
+    };
+  }
+
+  submit = () => {
+    this.setState({
+      btnDisabled: true
+    });
+    this.props.updatePassword(this.state.password);
+  }
+
+  handleInputChange = (e) => {
+    let passwd = e.target.value.trim();
+    this.setState({password: passwd});
+  }
+
+  togglePasswordVisible = () => {
+    this.setState({
+      isPasswordVisible: !this.state.isPasswordVisible
+    });
+  }
+
+  generatePassword = () => {
+    let randomPassword = '';
+    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < 8; i++) {
+      randomPassword += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    this.setState({
+      password: randomPassword,
+      isPasswordVisible: true
+    });
+  }
+
+  render() {
+    const { toggle } = this.props;
+    return (
+      <Modal centered={true} isOpen={true} toggle={toggle}>
+        <ModalHeader toggle={toggle}>{gettext('WebDav Password')}</ModalHeader>
+        <ModalBody>
+          <InputGroup className="">
+            <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} />
+            <InputGroupAddon addonType="append">
+              <Button onClick={this.togglePasswordVisible}><i className={`fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
+              <Button onClick={this.generatePassword}><i className="fas fa-magic"></i></Button>
+            </InputGroupAddon>
+          </InputGroup>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.submit} disabled={this.state.btnDisabled}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+UpdateWebdavPassword.propTypes = propTypes;
+
+export default UpdateWebdavPassword;

frontend/src/components/user-settings/email-notice.js

@@ -64,7 +64,7 @@ class EmailNotice extends React.Component {
               </React.Fragment>
             );
           })}
-          <button type="submit" className="btn btn-secondary mt-2">{gettext('Submit')}</button>
+          <button type="submit" className="btn btn-outline-primary mt-2">{gettext('Submit')}</button>
         </form>
       </div>
     );

frontend/src/components/user-settings/language-setting.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Select from 'react-select';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 
@@ -10,37 +11,30 @@ class LanguageSetting extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      dropdownOpen: false,
-    };
   }
 
-    toggle = () => {
+  onSelectChange = (selectedItem) => {
-      this.setState({
+    // selectedItem: {value: '...', label: '...'}
-        dropdownOpen: !this.state.dropdownOpen
+    location.href = `${siteRoot}i18n/?lang=${selectedItem.value}`;
-      });
   }
 
   render() {
+    const options = langList.map((item, index) => {
+      return {
+        value: item.langCode,
+        label: item.langName
+      };
+    });
+
     return (
       <div className="setting-item" id="lang-setting">
         <h3 className="setting-item-heading">{gettext('Language Setting')}</h3>
-          <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+        <Select
-            <DropdownToggle caret>
+          className='w-25'
-              {currentLang}
+          defaultValue={{value: currentLang.langCode, label: currentLang.langName}}
-            </DropdownToggle>
+          options={options}
-            <DropdownMenu>
+          onChange={this.onSelectChange}
-              {langList.map((item, index) => {
+        />
-                return (
-                  <DropdownItem key={index}>
-                    <a href={`${siteRoot}i18n/?lang=${item.langCode}`} className="text-inherit">
-                      {item.langName}
-                    </a>
-                  </DropdownItem>
-                );
-              })}
-            </DropdownMenu>
-          </Dropdown>
       </div>
     );
   }

frontend/src/components/user-settings/side-nav.js

@@ -1,14 +1,4 @@
 import React from 'react';
-import { isPro, gettext } from '../../utils/constants';
-
-const {
-  canUpdatePassword,
-  enableAddressBook,
-  enableWebdavSecret,
-  twoFactorAuthEnabled,
-  enableWechatWork,
-  enableDeleteAccount
-} = window.app.pageOptions;
 
 class SideNav extends React.Component {
 
@@ -18,30 +8,11 @@ class SideNav extends React.Component {
 
   render() {
     return (
-      <ul className="list-group list-group-flush">
+      <ul className="nav flex-column user-setting-nav">
-        <li className="list-group-item"><a href="#user-basic-info">{gettext('Profile')}</a></li>
+        {this.props.data.map((item, index) => {
-        {canUpdatePassword &&  
+          return item.show ?
-        <li className="list-group-item"><a href="#update-user-passwd">{gettext('Password')}</a></li>
+            <li key={index} className={`nav-item ${this.props.curItemID == item.href.substr(1) && 'active'}`}><a className="nav-link" href={item.href}>{item.text}</a></li> : null;
-        }   
+        })}
-        {enableWebdavSecret &&
-        <li className="list-group-item"><a href="#update-webdav-passwd">{gettext('WebDav Password')}</a></li>
-        }   
-        {enableAddressBook &&
-        <li className="list-group-item"><a href="#list-in-address-book">{gettext('Global Address Book')}</a></li>
-        }   
-        <li className="list-group-item"><a href="#lang-setting">{gettext('Language')}</a></li>
-        {isPro &&
-        <li className="list-group-item"><a href="#email-notice">{gettext('Email Notification')}</a></li>
-        }   
-        {twoFactorAuthEnabled &&
-        <li className="list-group-item"><a href="#two-factor-auth">{gettext('Two-Factor Authentication')}</a></li>
-        }   
-        {enableWechatWork &&  
-        <li className="list-group-item"><a href="#social-auth">{gettext('Social Login')}</a></li>
-        }   
-        {enableDeleteAccount &&
-        <li className="list-group-item"><a href="#del-account">{gettext('Delete Account')}</a></li>
-        }   
       </ul>
     );
   }

frontend/src/components/user-settings/two-factor-auth.js

@@ -16,7 +16,7 @@ class TwoFactorAuthentication extends React.Component {
     return (
       <React.Fragment>
         <p className="mb-2">{gettext('Status: enabled')}</p>
-        <a className="btn btn-secondary mb-4" href={`${siteRoot}profile/two_factor_authentication/disable/`}>
+        <a className="btn btn-outline-primary mb-4" href={`${siteRoot}profile/two_factor_authentication/disable/`}>
           {gettext('Disable Two-Factor Authentication')}</a>
         <p className="mb-2">
           {gettext('If you don\'t have any device with you, you can access your account using backup codes.')}
@@ -24,7 +24,7 @@ class TwoFactorAuthentication extends React.Component {
             gettext('You have {num} backup codes remaining.').replace('{num}', backupTokens)}
         </p>
         <a href={`${siteRoot}profile/two_factor_authentication/backup/tokens/`}
-          className="btn btn-secondary">{gettext('Show Codes')}</a>
+          className="btn btn-outline-primary">{gettext('Show Codes')}</a>
       </React.Fragment>
     );
   }
@@ -33,7 +33,7 @@ class TwoFactorAuthentication extends React.Component {
     return (
       <React.Fragment>
         <p className="mb-2">{gettext('Two-factor authentication is not enabled for your account. Enable two-factor authentication for enhanced account security.')}</p>
-        <a href={`${siteRoot}profile/two_factor_authentication/setup/`} className="btn btn-secondary">
+        <a href={`${siteRoot}profile/two_factor_authentication/setup/`} className="btn btn-outline-primary">
           {gettext('Enable Two-Factor Authentication')}</a>
       </React.Fragment>
     );

frontend/src/components/user-settings/user-avatar-form.js

@@ -11,7 +11,8 @@ class UserAvatarForm extends React.Component {
     this.fileInput = React.createRef();
     this.form = React.createRef();
     this.state = {
-      avatarSrc: avatarURL
+      avatarSrc: avatarURL,
+      isEditShown: false
     };
   }
 
@@ -56,15 +57,27 @@ class UserAvatarForm extends React.Component {
     this.fileInput.current.click();
   }
 
+  handleMouseOver = () => {
+    this.setState({
+      isEditShown: true
+    });
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isEditShown: false
+    });
+  }
+
   render() {
     return (
       <form ref={this.form} className="form-group row" encType="multipart/form-data" method="post" action={`${siteRoot}avatar/add/`}>
         <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
         <label className="col-sm-1 col-form-label">{gettext('Avatar:')}</label>
-        <div className="col-sm-11">
+        <div className="col-auto position-relative" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-          <img src={avatarURL} width="80" height="80" alt="" className="user-avatar mr-2 align-text-top" />
+          <img src={avatarURL} width="80" height="80" alt="" className="user-avatar" />
-          <button type="button" className="btn btn-secondary align-text-top" onClick={this.openFileInput}>{gettext('Change')}</button>
           <input type="file" name="avatar" className="d-none" onChange={this.fileInputChange} ref={this.fileInput} />
+          <span className={`avatar-edit fas fa-edit ${!this.state.isEditShown && 'd-none'}`} onClick={this.openFileInput}></span>
         </div>
       </form>
     );

frontend/src/components/user-settings/user-basic-info-form.js

@@ -101,7 +101,7 @@ class UserBasicInfoForm extends React.Component {
             </div>
           </div>
         )}
-        <button type="submit" className="btn btn-secondary offset-sm-1" disabled={!enableUpdateUserInfo}>{gettext('Submit')}</button>
+        <button type="submit" className="btn btn-outline-primary offset-sm-1" disabled={!enableUpdateUserInfo}>{gettext('Submit')}</button>
       </form>
     );
   }

frontend/src/components/user-settings/webdav-password.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import ModalPortal from '../modal-portal';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
+import UpdateWebdavPassword from '../dialog/update-webdav-password';
 
 const { webdavPasswd } = window.app.pageOptions;
 
@@ -11,48 +12,24 @@ class WebdavPassword extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isPasswordHidden: true,
+      password: webdavPasswd,
-      password: webdavPasswd 
+      isPasswordVisible: false,
+      isDialogOpen: false
     };
-
-    this.passwordInput = React.createRef();
-  }
-
-  handleInputChange = (e) => {
-    let passwd = e.target.value.trim();
-    this.setState({password: passwd}, () => {
-      if (this.state.isPasswordHidden) {
-        this.passwordInput.type = 'password';
-      }
-    });
   }
 
   togglePasswordVisible = () => {
-    this.setState({isPasswordHidden: !this.state.isPasswordHidden}, () => {
-      if (this.state.isPasswordHidden) {
-        this.passwordInput.type = 'password';
-      } else {
-        this.passwordInput.type = 'text';
-      }
-    });
-  }
-
-  generatePassword = () => {
-    let randomPassword = '';
-    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    for (let i = 0; i < 8; i++) {
-      randomPassword += possible.charAt(Math.floor(Math.random() * possible.length));
-    }
     this.setState({
-      password: randomPassword,
+      isPasswordVisible: !this.state.isPasswordVisible
-      isPasswordHidden: false,
-    }, () => {
-      this.passwordInput.type = 'text';
     });
   }
 
   updatePassword = (password) => {
     seafileAPI.updateWebdavSecret(password).then((res) => {
+      this.toggleDialog();
+      this.setState({
+        password: password
+      });
       toaster.success(gettext('Success'));
     }).catch((error) => {
       let errorMsg = ''; 
@@ -65,36 +42,46 @@ class WebdavPassword extends React.Component {
       } else {
         errorMsg = gettext('Please check the network.');
       }   
+      this.toggleDialog();
       toaster.danger(errorMsg);
     }); 
   }
 
-  handleUpdate = () => {
+  toggleDialog = () => {
-    this.updatePassword(this.state.password);
+    this.setState({
-  }
+      isDialogOpen: !this.state.isDialogOpen
-
+    });
-  handleDelete = () => {
-    this.setState({password: ''});
-    this.updatePassword('');
   }
 
   render() {
+    const { password, isPasswordVisible } = this.state;
     return (
+      <React.Fragment>
         <div id="update-webdav-passwd" className="setting-item">
           <h3 className="setting-item-heading">{gettext('WebDav Password')}</h3>
-        <label>{gettext('Password')}</label>
+          {password ? (
-        <div className="row mb-2">
+            <React.Fragment>
-          <InputGroup className="col-sm-5">
+              <div className="d-flex align-items-center">
-            <Input innerRef={input => {this.passwordInput = input}} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
+                <label className="m-0 mr-2">{gettext('Password:')}</label>
-            <InputGroupAddon addonType="append">
+                <input className="border-0 mr-1" type="text" value={isPasswordVisible ? password : '**********'} readOnly={true} size={Math.max(password.length, 10)} />
-              <Button onClick={this.togglePasswordVisible}><i className={`fas ${this.state.isPasswordHidden ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
+                <span onClick={this.togglePasswordVisible} className={`eye-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
-              <Button onClick={this.generatePassword}><i className="fas fa-magic"></i></Button>
-            </InputGroupAddon>
-          </InputGroup>
               </div>
-        <button className="btn btn-secondary mr-1" onClick={this.handleUpdate}>{gettext('Update')}</button>
+              <button className="btn btn-outline-primary mt-2" onClick={this.toggleDialog}>{gettext('Update')}</button>
-        <button className="btn btn-secondary" onClick={this.handleDelete}>{gettext('Delete')}</button>
+            </React.Fragment>
+          ) : (
+            <button className="btn btn-outline-primary" onClick={this.toggleDialog}>{gettext('Set Password')}</button>
+          )}
         </div>
+        {this.state.isDialogOpen && (
+          <ModalPortal>
+            <UpdateWebdavPassword
+              password={this.state.password}
+              updatePassword={this.updatePassword}
+              toggle={this.toggleDialog}
+            />
+          </ModalPortal>
+        )}
+      </React.Fragment>
     );
   }
 }

frontend/src/css/user-settings.css

@@ -46,3 +46,34 @@ body {
 .user-avatar {
   border-radius: 3px;
 }
+.avatar-edit {
+  position: absolute;
+  left: 0.75rem;
+  top: 0;
+  width: 80px;
+  height: 80px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  font-size: 24px;
+  line-height: 80px;
+  text-align: center;
+  cursor: pointer;
+}
+.user-setting-nav .nav-item .nav-link {
+  flex: auto;
+  margin: 0;
+  padding-left: 1em;
+  border-left: 1px solid transparent;
+  color: #333;
+}
+.user-setting-nav .nav-item.active .nav-link {
+  color: #eb8205;
+  border-color: #eb8205;
+}
+.user-setting-nav .nav-item .nav-link:hover {
+  color: #eb8205;
+}
+.eye-icon {
+  color: #666;
+}

frontend/src/settings.js

@@ -35,7 +35,20 @@ class Settings extends React.Component {
 
   constructor(props) {
     super(props);
+    this.sideNavItems = [
+      {show: true, href: '#user-basic-info', text: gettext('Profile')},
+      {show: canUpdatePassword, href: '#update-user-passwd', text: gettext('Password')},
+      {show: enableWebdavSecret, href: '#update-webdav-passwd', text: gettext('WebDav Password')},
+      {show: enableAddressBook, href: '#list-in-address-book', text: gettext('Global Address Book')},
+      {show: true, href: '#lang-setting', text: gettext('Language')},
+      {show: isPro, href: '#email-notice', text: gettext('Email Notification')},
+      {show: twoFactorAuthEnabled, href: '#two-factor-auth', text: gettext('Two-Factor Authentication')},
+      {show: enableWechatWork, href: '#social-auth', text: gettext('Social Login')},
+      {show: enableDeleteAccount, href: '#del-account', text: gettext('Delete Account')},
+    ];
+
     this.state = {
+      curItemID: this.sideNavItems[0].href.substr(1)
     };
   }
 
@@ -81,6 +94,18 @@ class Settings extends React.Component {
     }
   }
 
+  handleContentScroll = (e) => {
+    const scrollTop = e.target.scrollTop;
+    const scrolled = this.sideNavItems.filter((item, index) => {
+      return item.show && document.getElementById(item.href.substr(1)).offsetTop - 30 < scrollTop;
+    });
+    if (scrolled.length) {
+      this.setState({
+        curItemID: scrolled[scrolled.length -1].href.substr(1)
+      });
+    }
+  }
+
   render() {
     return (
       <React.Fragment>
@@ -93,11 +118,11 @@ class Settings extends React.Component {
           </div>
           <div className="flex-auto d-flex">
             <div className="side-panel o-auto">
-              <SideNav />
+              <SideNav data={this.sideNavItems} curItemID={this.state.curItemID} />
             </div>
             <div className="main-panel d-flex flex-column">
               <h2 className="heading">{gettext('Settings')}</h2>
-              <div className="content">
+              <div className="content position-relative" onScroll={this.handleContentScroll}>
                 <div id="user-basic-info" className="setting-item">
                   <h3 className="setting-item-heading">{gettext('Profile Setting')}</h3>
                   <UserAvatarForm  />
@@ -106,7 +131,7 @@ class Settings extends React.Component {
                 {canUpdatePassword &&
                 <div id="update-user-passwd" className="setting-item">
                   <h3 className="setting-item-heading">{gettext('Password')}</h3>
-                  <a href={`${siteRoot}accounts/password/change/`} className="btn btn-secondary">{passwordOperationText}</a>
+                  <a href={`${siteRoot}accounts/password/change/`} className="btn btn-outline-primary">{passwordOperationText}</a>
                 </div>
                 }
                 {enableWebdavSecret && <WebdavPassword />}

seahub/profile/templates/profile/set_profile_react.html

@@ -31,7 +31,10 @@ window.app.pageOptions = {
 
   enableAddressBook: {% if ENABLE_ADDRESSBOOK_OPT_IN %} true {% else %} false {% endif %},
 
-  currentLang: '{{ LANGUAGE_CODE|language_name_local|capfirst|escapejs }}',
+  currentLang: {
+    langCode: '{{ LANGUAGE_CODE|escapejs }}',
+    langName: '{{ LANGUAGE_CODE|language_name_local|capfirst|escapejs }}'
+  },
   langList: (function() {
     var list = [];
     {% for LANG in LANGUAGES %}