[my libs] for new users: create default library and show the guide (#4372)

* [my libs] for new users: create default library and show the guide
dialog

* only do that for the first login

* [my libs] 'guide for new' dialog: redesigned the UI

frontend/src/components/dialog/guide-for-new-dialog.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody } from 'reactstrap';
+import { gettext, mediaUrl, siteName, canAddRepo } from '../../utils/constants';
+
+const propTypes = {
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class GuideForNewDialog extends React.Component {
+
+  toggle = () => {
+    this.props.toggleDialog();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalBody>
+          <button type="button" className="close text-gray" onClick={this.toggle}><span aria-hidden="true">×</span></button>
+          <div className="p-2 text-center">
+            <img src={`${mediaUrl}img/welcome.png`} width="180" alt="" />
+            <h3 id="dialogTitle">{gettext('Welcome to {site_name_placeholder}').replace('{site_name_placeholder}', siteName)}</h3>
+            {canAddRepo ?
+              <p>{gettext('{site_name_placeholder} organizes files into libraries. Each library can be synced and shared separately. We have created a personal library for you. You can create more libraries later.').replace('{site_name_placeholder}', siteName)}</p> :
+              <p>{gettext('{site_name_placeholder} organizes files into libraries. Each library can be synced and shared separately. Howerver, since you are a guest user now, you can not create libraries.').replace('{site_name_placeholder}', siteName)}</p>
+            }
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+GuideForNewDialog.propTypes = propTypes;
+
+export default GuideForNewDialog;

frontend/src/pages/my-libs/my-libs.js

@@ -13,6 +13,7 @@ import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
 import LibDetail from '../../components/dirent-detail/lib-details';
 import MylibRepoListView from './mylib-repo-list-view';
 import SortOptionsDialog from '../../components/dialog/sort-options';
+import GuideForNewDialog from '../../components/dialog/guide-for-new-dialog';
 
 const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
@@ -28,6 +29,7 @@ class MyLibraries extends Component {
       repoList: [],
       isShowDetails: false,
       isSortOptionsDialogOpen: false,
+      isGuideForNewDialogOpen: window.app.pageOptions.guideEnabled,
       sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
     };
@@ -135,6 +137,13 @@ class MyLibraries extends Component {
     this.setState({isShowDetails: !this.state.isShowDetails});
   }
 
+  toggleGuideForNewDialog = () => {
+    window.app.pageOptions.guideEnabled = false;
+    this.setState({
+      isGuideForNewDialogOpen: false
+    });
+  }
+
   render() {
     return (
       <Fragment>
@@ -166,6 +175,11 @@ class MyLibraries extends Component {
               }
             </div>
           </div>
+          {!this.state.isLoading && !this.state.errorMsg && this.state.isGuideForNewDialogOpen && 
+            <GuideForNewDialog 
+              toggleDialog={this.toggleGuideForNewDialog}
+            />
+          }
           {this.state.isSortOptionsDialogOpen &&
             <SortOptionsDialog
               toggleDialog={this.toggleSortOptionsDialog}

seahub/templates/base_for_react.html

@@ -36,7 +36,7 @@
             faviconPath: '{{ favicon_path }}',
             loginBGPath: '{{ login_bg_path }}',
             siteTitle: '{{ site_title }}',
-            siteName: '{{ site_name }}',
+            siteName: '{{ site_name|escapejs }}',
             siteRoot: '{{ SITE_ROOT }}',
             loginUrl: '{{ LOGIN_URL }}',
             isPro: '{{ is_pro }}',
@@ -54,6 +54,7 @@
             name: "{{request.user.username|email2nickname|escapejs}}",
             contactEmail: "{{request.user.username|email2contact_email|escapejs}}",
             username: "{{request.user.username|escapejs}}",
+            guideEnabled: {% if guide_enabled %} true {% else %} false {% endif %},
             canAddRepo: {% if user.permissions.can_add_repo %} true {% else %} false {% endif %},
             canAddGroup: {% if user.permissions.can_add_group %} true {% else %} false {% endif %},
             canGenerateShareLink: {% if user.permissions.can_generate_share_link %} true {% else %} false {% endif %},

seahub/views/__init__.py

@@ -1117,9 +1117,16 @@ def choose_register(request):
 
 @login_required
 def react_fake_view(request, **kwargs):
+   
+    username = request.user.username
+    guide_enabled = UserOptions.objects.is_user_guide_enabled(username)
+    if guide_enabled:
+        create_default_library(request)
+
     folder_perm_enabled = True if is_pro_version() and ENABLE_FOLDER_PERM else False
 
     return render(request, "react_app.html", {
+        "guide_enabled": guide_enabled,
         'dtable_web_server': DTABLE_WEB_SERVER,
         'seafile_collab_server': SEAFILE_COLLAB_SERVER,
         'storages': get_library_storages(request),