Improve js client #931

niol · 2017-05-12T22:17:14Z

Some minor enhancements and refactoring, use API for login and update item datetimes client-side.

jtojnar · 2017-05-13T03:15:48Z

public/js/selfoss-db.js

@@ -1,6 +1,154 @@
 /**
 * db functions: client data repository
 */
+
+
+selfoss.dbOnline = {


I do not understand the name. Under database, I usually imagine something that stores data.

Here it fetches data. I'm open to other propositions.

Was there any particular motivation for moving it into a separate file?

The main issue I have with this is probably the entangledness of the architecture, though refactoring it is a long term goal.

It makes the base file a little less long and makes sense regarding my work in https://github.com/niol/selfoss/blob/ppr/offline/public/js/selfoss-db.js

As I see it, these three objects form the model layer. Optimally, the dbOnline object should only take care of fetching/uploading data from the server. It could then be called synchronizer. The dbOffline should only be a nice wrapper above dexie, I would call it storage. Last, the db object could be an envelope above synchronizer and storage, providing an opaque model for the rest of the app. What I find the most important, none of the object should have any access to DOM.

I am not really convinced the whole functions should be moved here. I would only move the promise of AJAX request and keep the rest in selfoss-base. In future, the promise would also internally handle the database but the DOM manipulation does not really fit here.

Okay then you can rebase this patch out later.

jtojnar · 2017-05-13T03:21:03Z

controllers/Index.php

+        }
+
+        if ($error !== null) {
+            $view->jsonSuccess([


Why do we use jsonSuccess instead of jsonError?

It made not much sense but the login API was like that before so I did ont change et.

Okay, I will take care of this in the refactoring pull request.

jsonError adds a 400 Bad Request error. If password or username are missing, it is a bad request, so you are right, I'll fix this. This is not the case for the auth error.

jtojnar · 2017-05-13T03:34:17Z

public/js/selfoss-ui.js

@@ -4,6 +4,60 @@
 selfoss.ui = {


+    showLogin: function(error) {
+        var error = (typeof error !== 'undefined') ? error : '';


Maybe taking care of this in css would be simpler:

#nav-refresh, … { display: none; } body.publicmode #nav-refresh, body.loggedin #nav-refresh, … { display: block; }

jtojnar · 2017-05-13T03:45:18Z

public/js/selfoss-base.js

@@ -75,7 +90,9 @@ var selfoss = {
            window.setInterval(selfoss.dbOnline.sync, 60*1000);

            window.setInterval(selfoss.ui.refreshEntryDatetimes, 60*1000);
-        });
+
+            selfoss.ui.showMainUi();


The UI should be shown before the events are initialised otherwise events.resize will be fired prematurely and the custom scroll bar will be calculated incorrectly:

I can still reproduce this.

I cannot manage to reproduce. Can you please describe the steps?

After you log in it seems to work fine but if you refresh the page, it overflows. You need to have enough tags or items to fill the whole area, or resize the window before reloading the page. I can reproduce it in both Firefox and Chomium.

jtojnar · 2017-05-29T21:30:31Z

public/js/selfoss-base.js

@@ -75,7 +90,9 @@ var selfoss = {
            window.setInterval(selfoss.dbOnline.sync, 60*1000);

            window.setInterval(selfoss.ui.refreshEntryDatetimes, 60*1000);
-        });
+
+            selfoss.ui.showMainUi();


I can still reproduce this.

jtojnar · 2017-05-29T21:40:10Z

public/js/selfoss-db.js

+            type: 'GET',
+            dataType: 'json',
+            data: {
+                since:         selfoss.db.lastUpdate.toISOString(),


I am getting TypeError: selfoss.db.lastUpdate is undefined here.

jtojnar · 2017-05-29T21:52:31Z

templates/home.phtml

@@ -52,7 +52,7 @@
 </head>
 <body class="
    <?= $this->publicMode === true ? 'publicmode' : ''; ?>
-    <?= $this->loggedin === true ? 'loggedin' : 'notloggedin'; ?>
+    <?= $this->authEnabled === true ? 'auth' : ''; ?>


I am still getting the auth form even when the authentication is disabled.

jtojnar · 2017-06-07T14:47:53Z

public/css/style.css

+}
+
+#loginform.loading {
+    background: url('images/fancybox_loading.gif') center center no-repeat;


Why use fancybox’s loading animation instead of the selfoss one from #content.loading?

jtojnar · 2017-06-07T15:05:11Z

controllers/Tags.php

+     *
+     * @return string
+     */
+    public function tagsAddColors($itemTags, $tags = null) {


Could you document the arguments?

jtojnar · 2017-06-07T15:15:08Z

controllers/Tags.php

+     *
+     * @return array tag color array
+     */
+    private function getTagsWithColors($tags) {


Could you add array type hint?

jtojnar · 2017-06-07T15:21:48Z

public/js/selfoss-base.js

+
+
+    hasSession: function() {
+        selfoss.loggedin = Cookies.get('onlineSession') == 'true';


What about when PHP session expires (simulated by deleting the PHPSESSID cookie).

This cookie is a hint that there was an online session when last loaded, and will be removed at startup when PHPSESSID is cleared. When that PHPSESSID is cleared, you get like before the 403 error after each ajax request. The next step is to fix #919 .

jtojnar · 2017-06-07T15:27:36Z

public/js/selfoss-base.js

+
+
+    logout: function() {
+        selfoss.clearSession();


Maybe this should be done only after the user was logged out, to make the deauthentication errors more visible.

Again, this is all done with offline in mind and is only a hint that there was an online session last time.

jtojnar · 2017-06-07T15:33:20Z

public/js/selfoss-db.js

@@ -1,6 +1,154 @@
 /**
 * db functions: client data repository
 */
+
+
+selfoss.dbOnline = {


I am not really convinced the whole functions should be moved here. I would only move the promise of AJAX request and keep the rest in selfoss-base. In future, the promise would also internally handle the database but the DOM manipulation does not really fit here.

jtojnar · 2017-06-07T15:36:09Z

public/js/selfoss-db.js

+     *
+     * @return void
+     */
+    sync: function(force) {


Same for this function.

jtojnar · 2017-06-07T15:41:45Z

templates/home.phtml

-            <li id="nav-filter-unread" class="nav-filter-unread" role="link" tabindex="0"><?= \F3::get('lang_unread')?> <span class="unread-count"></span></li>
-            <li id="nav-filter-starred" class="nav-filter-starred" role="link" tabindex="0"><?= \F3::get('lang_starred') ?> <span></span></li>
+    <div id="loginform">
+        <form action="<?= $this->base; ?>?login=1" method="post">


The login query string parameter is no longer needed.

jtojnar · 2017-06-07T16:08:45Z

templates/login.phtml

@@ -37,20 +37,6 @@
 </head>


This file can be renamed.

jtojnar

I do not really like the dbOnline but splitting it in a clean way won’t be possible without a significant refactoring. I will merge it as is for now.

Pull Request #931 moved the authentication client side, which worsened the issue #919 by displaying error instead of the login form on opening selfoss when user did not log out and their session expired on the server. This patch redirects user to login form whenever client side session is registered and 403 Forbidden error is received. This is a temporary fix before offline support is merged.

jtojnar reviewed May 13, 2017

View reviewed changes

jtojnar requested changes May 29, 2017

View reviewed changes

jtojnar requested changes Jun 7, 2017

View reviewed changes

jtojnar force-pushed the ppr/client-move branch 2 times, most recently from e73da33 to 3a1c79e Compare June 15, 2017 12:56

jtojnar approved these changes Jun 15, 2017

View reviewed changes

niol added 5 commits June 15, 2017 15:51

consistently use camelCase for new sync API

cfb5d29

move date ago display client side and refresh it every minute

78f46a8

refactor getting tag colors to make it reusable

f9b7526

js client: move reloadList and sync into selfoss.dbOnline

bd66f1f

use API for login/logout from the web client

bfda074

jtojnar force-pushed the ppr/client-move branch from 3a1c79e to fafb459 Compare June 15, 2017 13:54

Do not init View twice (it is already set up in BaseController)

c446529

jtojnar force-pushed the ppr/client-move branch from fafb459 to c446529 Compare June 15, 2017 14:04

jtojnar merged commit c446529 into fossar:master Jun 15, 2017

jtojnar mentioned this pull request Jun 25, 2017

Deauthentication not recognised by the client #919

Open

jtojnar mentioned this pull request Jun 25, 2017

client: Log out user instead of showing 403 Forbidden error #960

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve js client #931

Improve js client #931

niol commented May 12, 2017

jtojnar May 13, 2017

niol May 13, 2017

jtojnar May 13, 2017

niol May 14, 2017

jtojnar Jun 2, 2017

jtojnar Jun 7, 2017

niol Jun 7, 2017

jtojnar May 13, 2017

niol May 13, 2017

jtojnar May 13, 2017

niol May 14, 2017

jtojnar May 13, 2017

jtojnar May 13, 2017

jtojnar May 29, 2017

niol May 30, 2017

jtojnar May 30, 2017

jtojnar May 29, 2017

jtojnar May 29, 2017

jtojnar May 29, 2017

jtojnar Jun 7, 2017

jtojnar Jun 7, 2017

jtojnar Jun 7, 2017

jtojnar Jun 7, 2017

niol Jun 7, 2017

jtojnar Jun 7, 2017

niol Jun 7, 2017

jtojnar Jun 7, 2017

jtojnar Jun 7, 2017

jtojnar Jun 7, 2017

jtojnar Jun 7, 2017

jtojnar left a comment •

edited

Loading



		hasSession: function() {
		selfoss.loggedin = Cookies.get('onlineSession') == 'true';

Improve js client #931

Improve js client #931

Conversation

niol commented May 12, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jtojnar left a comment • edited Loading

Choose a reason for hiding this comment

jtojnar left a comment •

edited

Loading