Use bootbox like frontend lib instead of JS alert/confirm?

[ArthurHoaro]

Related comment in #1072 .

Currently, Shaarli relies on JS alert() to display error message, and confirm(). We should get rid of them, as they're obtrusive browser feature.

ESLint statement:

JavaScript’s alert, confirm, and prompt functions are widely considered to be obtrusive as UI elements and should be replaced by a more appropriate custom UI implementation. Furthermore, alert is often used while debugging code, which should be removed before deployment to production.

We need a library which allows JS+CSS modal. PureCSS provides a modal extension but it relies on jQuery.

A quick Google search gave me tingle.js which is 11kB of compressed JS and CSS, but if anyone knows any other, feel free to contribute.

[kalvn]

Was it considered to do it from scratch without an external library?

[ArthurHoaro]

No because I don't really want to spend time on this, but that's a possibility.

[kalvn]

I understand.

An alternative library could be SweetAlert. It apparently also has a fork: SweetAlert2.

[virtualtam]

Do we actually need this functionality?

$ rg "alert\(" index.php tpl
                                                                                                                                                                         
index.php:        echo '<script>alert("'. t("Wrong login/password.") .'");document.location=\'?do=login'.$redir.'\';</script>';
index.php:                echo '<script>alert("'. t('The old password is not correct.') .'");document.location=\'?do=changepasswd\';</script>';
index.php:                echo '<script>alert("'. $e->getMessage() .'");document.location=\'?do=tools\';</script>';
index.php:            echo '<script>alert("'. t('Your password has been changed') .'");document.location=\'?do=tools\';</script>';
index.php:                echo '<script>alert("'. $e->getMessage() .'");document.location=\'?do=configure\';</script>';
index.php:            echo '<script>alert("'. t('Configuration was saved.') .'");document.location=\'?do=configure\';</script>';
index.php:        echo '<script>alert("'. $alert .'");document.location=\'?'. $redirect .'\';</script>';
index.php:            echo '<script>alert("'. $msg .'");document.location=\'?do='.Router::$PAGE_IMPORT .'\';</script>';
index.php:        echo '<script>alert("'.$status.'");document.location=\'?do='
index.php:            echo '<script>alert("'. $e->getMessage() .'");document.location=\'?do='. Router::$PAGE_PLUGINSADMIN .'\';</script>';
index.php:            echo '<script>alert("'. $e->getMessage() .'");document.location=\'?\';</script>';
index.php:        echo '<script>alert("Shaarli is now configured. Please enter your login/password and start shaaring your links!");document.location=\'?do=login\';</script>';
tpl/default/tools.html:              alert('{function="str_replace(' ', '%20', t('The selected text is too long, it will be truncated.'))"}');
tpl/default/tools.html:              alert('{function="str_replace(' ', '%20', t('The selected text is too long, it will be truncated.'))"}');
tpl/vintage/tools.html:				alert('Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link...');
tpl/default/js/shaarli.js:            alert(bkmMessage.value);
tpl/default/js/shaarli.js:                    alert('An error occurred. Return code: '+ xhr.status);

It looks like alert() is mostly used in these cases:

1. displaying a warning/error message upon erroneous form data submission
2. displaying HTTP redirections
3. interacting with the bookmarklet

There are some interesting ideas on this Quora thread: What is a good alternative to using a JavaScript alert box?

1. Using a notification area is a solution proposed by several web frameworks to inform the user something went wrong when filling a form, so we could use this approach too
2. HTTP redirections could be either a) not displayed or b) displayed using a simple HTML template
3. Is there an alternative to notify users from a bookmarklet script?

[ArthurHoaro]

We could probably get rid of most alert() using messages in the « notification area » (we have PureCSS alerts, as used to display search results). I suppose it's better than alert boxes because it's non blocking and doesn't require any input from the user, aside from a little more scrolling.

I know that CakePHP uses a Flash object which basically store messages in the session in order to display them later.

Anyway

HTTP redirections could be either a) not displayed or b) displayed using a simple HTML template

They're not displayed, we just usually display a blocking error message before doing the redirection. But we could easily pass a GET parameter and display it after the redirection.

Is there an alternative to notify users from a bookmarklet script?

Again, we can display a warning in the editlink page.

However, confirm() boxes are trickier because they're used to prevent user's misclicks, e.g. delete icons. I'm not sure how we could replace them, neither if we should.

Final point, these JS box libs are really user friendly because they can be dismissed easily (click outside of the box, ESC keypress, etc.) while native ones usually can't. But I agree that adding a bloat of JS for a dozen alerts might be overkill.

[nodiscc]

HTTP redirections could be [...] displayed using a simple HTML template
we have PureCSS alerts, as used to display search results

The only JS alert I've seen in a while in Shaarli is the Wrong login/password message. I agree that a non-interactive Pure alert would be nicer

#index.php
        $loginManager->handleFailedLogin($_SERVER);
        $redir = '&username='. urlencode($_POST['login']);
        $failed_login = true;

# tpl/default/loginform.html #L18
  {elif="$failed_login"}
  <div class="pure-g pure-alert pure-alert-error pure-alert-closable center">
    <div class="pure-u-2-24"></div>
    <div class="pure-u-20-24">
      {'Wrong login/password'|t}
    </div>
</div>

Perhaps we can review each alert, and if it's frequent/annoying decide what solution is appropriate. Configuration was saved is an obvious candidate. For some others requiring user interaction might in fact be a good idea (Your password has been changed).

But I agree that adding a bloat of JS for a dozen alerts might be overkill.

I agree

[nicolasdanelon]

please consider the pure-alert message is so much better than another dependency

[ArthurHoaro]

There is a bunch of them, and as I said they can be replaced with pure-alerts.

However, I don't know how to replace confirm builtin browser alerts, mostly use to confirm link deletion. Obviously, we could keep them as there isn't that many.