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/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,40 +11,33 @@ class LanguageSetting extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      dropdownOpen: false,
-    };
   }
 
-    toggle = () => {
-      this.setState({
-        dropdownOpen: !this.state.dropdownOpen
-      });
-    }
+  onSelectChange = (selectedItem) => {
+    // selectedItem: {value: '...', label: '...'}
+    location.href = `${siteRoot}i18n/?lang=${selectedItem.value}`;
+  }
 
-    render() {
-      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}>
-            <DropdownToggle caret>
-              {currentLang}
-            </DropdownToggle>
-            <DropdownMenu>
-              {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>
-      );
-    }
+  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>
+        <Select
+          className='w-25'
+          defaultValue={{value: currentLang.langCode, label: currentLang.langName}}
+          options={options}
+          onChange={this.onSelectChange}
+        />
+      </div>
+    );
+  }
 }
 
 export default LanguageSetting;

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">
-        <li className="list-group-item"><a href="#user-basic-info">{gettext('Profile')}</a></li>
-        {canUpdatePassword &&  
-        <li className="list-group-item"><a href="#update-user-passwd">{gettext('Password')}</a></li>
-        }   
-        {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 className="nav flex-column user-setting-nav">
+        {this.props.data.map((item, index) => {
+          return item.show ?
+            <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;
+        })}
       </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">
-          <img src={avatarURL} width="80" height="80" alt="" className="user-avatar mr-2 align-text-top" />
-          <button type="button" className="btn btn-secondary align-text-top" onClick={this.openFileInput}>{gettext('Change')}</button>
+        <div className="col-auto position-relative" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <img src={avatarURL} width="80" height="80" alt="" className="user-avatar" />
           <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,
-      isPasswordHidden: false,
-    }, () => {
-      this.passwordInput.type = 'text';
+      isPasswordVisible: !this.state.isPasswordVisible
     });
   }
 
   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 = () => {
-    this.updatePassword(this.state.password);
-  }
-
-  handleDelete = () => {
-    this.setState({password: ''});
-    this.updatePassword('');
+  toggleDialog = () => {
+    this.setState({
+      isDialogOpen: !this.state.isDialogOpen
+    });
   }
 
   render() {
+    const { password, isPasswordVisible } = this.state;
     return (
-      <div id="update-webdav-passwd" className="setting-item">
-        <h3 className="setting-item-heading">{gettext('WebDav Password')}</h3>
-        <label>{gettext('Password')}</label>
-        <div className="row mb-2">
-          <InputGroup className="col-sm-5">
-            <Input innerRef={input => {this.passwordInput = input}} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
-            <InputGroupAddon addonType="append">
-              <Button onClick={this.togglePasswordVisible}><i className={`fas ${this.state.isPasswordHidden ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
-              <Button onClick={this.generatePassword}><i className="fas fa-magic"></i></Button>
-            </InputGroupAddon>
-          </InputGroup>
+      <React.Fragment>
+        <div id="update-webdav-passwd" className="setting-item">
+          <h3 className="setting-item-heading">{gettext('WebDav Password')}</h3>
+          {password ? (
+            <React.Fragment>
+              <div className="d-flex align-items-center">
+                <label className="m-0 mr-2">{gettext('Password:')}</label>
+                <input className="border-0 mr-1" type="text" value={isPasswordVisible ? password : '**********'} readOnly={true} size={Math.max(password.length, 10)} />
+                <span onClick={this.togglePasswordVisible} className={`eye-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
+              </div>
+              <button className="btn btn-outline-primary mt-2" onClick={this.toggleDialog}>{gettext('Update')}</button>
+            </React.Fragment>
+          ) : (
+            <button className="btn btn-outline-primary" onClick={this.toggleDialog}>{gettext('Set Password')}</button>
+          )}
         </div>
-        <button className="btn btn-secondary mr-1" onClick={this.handleUpdate}>{gettext('Update')}</button>
-        <button className="btn btn-secondary" onClick={this.handleDelete}>{gettext('Delete')}</button>
-      </div>
+        {this.state.isDialogOpen && (
+          <ModalPortal>
+            <UpdateWebdavPassword
+              password={this.state.password}
+              updatePassword={this.updatePassword}
+              toggle={this.toggleDialog}
+            />
+          </ModalPortal>
+        )}
+      </React.Fragment>
     );
   }
 }