? Pending

User tests: Successful: Unsuccessful:

avatar dgrammatiko
dgrammatiko
1 Dec 2018

Pull Request for Issue # .

Summary of Changes

Fields with custom javascript functionality should always be custom elements!!!

So, this PR is doing that and also:

  • removes the dependency from Bootstrap
  • removes the dependency from Font awesome
  • Should be accessible
  • Should be extremely easy to customise
  • Proper implementation of custom elements (eg works asynchronously)

Testing Instructions

Apply patch and check the

  • Login page in the back end
  • The login module in the front end
  • The edit user page in the backend

Preview

Backend login:
screenshot 2018-12-01 at 15 41 23

Frontend Login:
screenshot 2018-12-01 at 15 41 43

Edit user page:
screenshot 2018-12-01 at 15 41 12

Expected result

Actual result

Documentation Changes Required

Some Notes here:

The input prepend/append thingy from the Bootstrap is utterly crap for 2 reasons:

  • if used without a proper design language (which of course such thing doesn't exist for Joomla, although I was screaming for it) then the UX is getting inconsistent but more importantly is becoming harder for people to familiarise with all the extra (unneeded) graphics.

  • the markup is also crap, eg a span element cannot be focusable (unless if you start doing things like type=button, etc) neither does implements all the built in keyboard functionality.

All and all: do not use the input-group markup/classes just for decoration purposes!!!!

For those really unfamiliar with design language and the necessity for such thing established for Joomla, please check https://design.trello.com/components/form or https://github.com/alexpate/awesome-design-systems

5f3294d 29 Nov 2018 avatar dgrammatiko init
8d68662 1 Dec 2018 avatar dgrammatiko more
avatar dgrammatiko dgrammatiko - open - 1 Dec 2018
avatar dgrammatiko dgrammatiko - change - 1 Dec 2018
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 1 Dec 2018
Category Modules Administration Templates (admin) Repository JavaScript Layout Front End
de18e64 1 Dec 2018 avatar dgrammatiko cs
avatar dgrammatiko dgrammatiko - change - 1 Dec 2018
Labels Added: ?
avatar dgrammatiko dgrammatiko - change - 1 Dec 2018
The description was changed
avatar dgrammatiko dgrammatiko - edited - 1 Dec 2018
204dc41 1 Dec 2018 avatar dgrammatiko cs
avatar infograf768
infograf768 - comment - 1 Dec 2018

Failure:
This breaks in multilingual site the automatic language change with the error:
Call to undefined method Joomla\CMS\Language\Language::setLanguage()


Call stack
--
# | Function | Location
1 | () | JROOT/plugins/system/languagefilter/languagefilter.php:726
2 | PlgSystemLanguageFilter->onUserLogin() | JROOT/libraries/src/Plugin/CMSPlugin.php:287
3 | Joomla\CMS\Plugin\CMSPlugin->Joomla\CMS\Plugin\{closure}() | JROOT/libraries/vendor/joomla/event/src/Dispatcher.php:400
4 | Joomla\Event\Dispatcher->dispatch() | JROOT/libraries/src/Application/EventAware.php:111
5 | Joomla\CMS\Application\WebApplication->triggerEvent() | JROOT/libraries/src/Application/CMSApplication.php:819
6 | Joomla\CMS\Application\CMSApplication->login() | JROOT/libraries/src/Application/SiteApplication.php:716
7 | Joomla\CMS\Application\SiteApplication->login() | JROOT/components/com_users/Controller/UserController.php:122
8 | Joomla\Component\Users\Site\Controller\UserController->login() | JROOT/libraries/src/MVC/Controller/BaseController.php:734
9 | Joomla\CMS\MVC\Controller\BaseController->execute() | JROOT/libraries/src/Dispatcher/ComponentDispatcher.php:146
10 | Joomla\CMS\Dispatcher\ComponentDispatcher->dispatch() | JROOT/libraries/src/Component/ComponentHelper.php:380
11 | Joomla\CMS\Component\ComponentHelper::renderComponent() | JROOT/libraries/src/Application/SiteApplication.php:211
12 | Joomla\CMS\Application\SiteApplication->dispatch() | JROOT/libraries/src/Application/SiteApplication.php:250
13 | Joomla\CMS\Application\SiteApplication->doExecute() | JROOT/libraries/src/Application/CMSApplication.php:233
14 | Joomla\CMS\Application\CMSApplication->execute() | JROOT/includes/app.php:63
15 | require_once() | JROOT/index.php:36

avatar infograf768
infograf768 - comment - 1 Dec 2018

Looks like this happens only when using the module, not a login menu item.

avatar infograf768
infograf768 - comment - 2 Dec 2018

hmm. Tested again today.
Looks like this is unrelated.

Yeah, setLanguage is deprecated... Which means the issue is not only in languagefilter...
\JLog::add(__METHOD__ . ' is deprecated. Instantiate a new Language object instead.', \JLog::WARNING, 'deprecated');

avatar infograf768
infograf768 - comment - 2 Dec 2018

I have tested this item āœ… successfully on e293a43


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23215.

avatar infograf768 infograf768 - test_item - 2 Dec 2018 - Tested successfully
avatar PhilETaylor
PhilETaylor - comment - 3 Dec 2018

What about the password box in the installation process? these need doing too :)

avatar Hackwar
Hackwar - comment - 4 Dec 2018

@dgrammatiko Thank you for this work. I think this is a great addition and I welcome this feature in the registration form. However I disagree with using this in any form of login screen. My main issue is the button to display the cleartext password. I see this as a security issue, which can easily disclose your password to others. I see several scenarios:

  • People standing behind you unnoticed
  • A person sitting at your PC and asking you to type in your password and then you handing over the controls to that other person again
  • In a teamviewer session where you give control to another person

In all these cases, this feature might disclose your password to someone else and thus I would like to see this not included in the logins, at least not by default.

avatar dgrammatiko
dgrammatiko - comment - 4 Dec 2018

@Hackwar actually the password show/hide button should be a progressive enhancement that must be driven from the xml with an attribute line reveal="true". BTW I just checked and half of the J3.x options for password field are not even mentioned in the documentation: https://docs.joomla.org/Password_form_field_type

All and all, I'll make the changes so that the button is xml driven and then I guess people have to decide what the defaults should be. I'm providing the functionality here, I'm not the one deciding how, when or where this should be used...

avatar brianteeman
brianteeman - comment - 4 Dec 2018

@Hackwar Time to rewrite the web then - it is a common feature

avatar Fedik
Fedik - comment - 4 Dec 2018

it is a common feature

originally it was a mobile oriented feature, because limitation of mobile inputs,
later it was spread everywhere :)

avatar dgrammatiko
dgrammatiko - comment - 4 Dec 2018

originally it was a mobile oriented feature

mobile IS the internet (>70% of traffic is from mobile devices)

avatar Hackwar
Hackwar - comment - 4 Dec 2018

@brianteeman It is also common, that passwords are stored in plaintext. Doesn't mean that it is a good idea.

As I said, if you think this should be part of Joomla, then don't enable it by default. What we set as default, will end up unchanged on 99% of all websites and it will also be the thing that makes the first impression on the people evaluating Joomla for their needs. I guess it is a question of if we want to aim for the hobbyiests website or for corporations. As a security conscious corporation, I would not want that on my website.

avatar brianteeman
brianteeman - comment - 5 Dec 2018

if its not going to be enabled then there really is no point in it

avatar mbabker
mbabker - comment - 5 Dec 2018

if its not going to be enabled then there really is no point in it

Just look at that wildly successful password strength meter on the field. Oh, wait...

avatar C-Lodder
C-Lodder - comment - 5 Dec 2018

@Hackwar, anyone who' extremely concious about security will immediately notice and disable it

avatar dgrammatiko
dgrammatiko - comment - 5 Dec 2018

Just look at that wildly successful password strength meter on the field.

FWIW this custom element is also taking care of that successful option ?

avatar Hackwar
Hackwar - comment - 5 Dec 2018

I'm not saying that we shouldn't use it at all. The registration is a good place where this can be demonstrated and thus people would know it, but to me this shouldn't be something that should be enabled by default in the login form.

avatar dgrammatiko
dgrammatiko - comment - 5 Dec 2018

@Hackwar login page is overridable as the rest of the Joomla, so creating an override (or even Joomla provide some sensible override files) is way to easy for anyone creating a Joomla site. And my point is if you're not able to create an override you shouldn't use Joomla, use wix or whatever because the idea of having one more switch for the field is out of the range of ridiculousness..
At some point people need to understand the Joomla will never be able to compete to wix without a proper GUI override creator...

All and all, as I said before this PR is just providing the fumctionality. Where, when or how this is used is another issue (I'm just replacing existing fields with buttons, not introducing them here ?). So please raise another issue for that, this is not the place for this discussion...

avatar astridx
astridx - comment - 8 Dec 2018

I applied this branch (git fetch origin pull/23452/head:4.0-dev-CE-password-field) and I run composer install and npm install.

It looks not always like in the pictures in this PR but all elements worked correctly.

Backend login form

test administrator login

<joomla-field-password reveal="true">
<input name="passwd" type="password" id="mod-login-password" autocomplete="password" aria-labelledby="mod-login-password-lbl" required>
</joomla-field-password>

Module

home

<joomla-field-password reveal="true">
<input id="modlgn-passwd" type="password" name="password" autocomplete="password" placeholder="Password">
</joomla-field-password>

##User edit page

users edit profile test administration

<joomla-field-password reveal="true" min-length="4"     >
<input  autocomplete="password" class="validate-password-strength"   size="30" maxlength="99"   name="jform[password]" type="password" id="jform_password" value="" aria-labeledby="jform_password-lbl">
</joomla-field-password>            

Update
I checked my installation and it looks as I made a failure. I could not find the file system/webcomponents/joomla-field-password.min.js in the media folder. So I run npm install again and now everything looks fine.

home 2
test administrator login 1
users edit profile test administration 1

avatar astridx
astridx - comment - 8 Dec 2018

I have tested this item āœ… successfully on 12f4aaf


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23215.

avatar astridx astridx - test_item - 8 Dec 2018 - Tested successfully
avatar astridx astridx - test_item - 8 Dec 2018 - Tested successfully
avatar joomla-cms-bot joomla-cms-bot - change - 20 Jan 2019
Category Modules Administration Templates (admin) Repository JavaScript Layout Front End Modules Administration Templates (admin) Repository JavaScript Installation Layout Front End
avatar dgrammatiko
dgrammatiko - comment - 20 Jan 2019

So I've changed all the wrong SCSS parts and also updated the installation:
screenshot 2019-01-20 at 13 01 28
screenshot 2019-01-20 at 13 01 36
screenshot 2019-01-20 at 13 01 44

@wilsonge can you review/merge this?

avatar dgrammatiko
dgrammatiko - comment - 20 Jan 2019

@coolcat-creations I just realise that the backend login page and the installation are not quite in sync in terms of design. Can you decide what should be there and align those?

Also another thing that came up with this PR: as @C-Lodder and @ciar4n were doing the templates and there was a question mark on the forms markup the decision was to keep the old way, make the transaction easier (less code to tweak). The problem is that inputs SHOULD always be 100% and the container div should set a specific width according to the breakpoint or the Grid Layout. Having each and every input set to a specific width is bad. You (I mean the team that is dealing with the templates) should change this. We're not in 2010 and we shouldn't break things that are naturally responsive...

avatar dgrammatiko
dgrammatiko - comment - 27 Jan 2019

@wilsonge can we move forward with this one?

avatar coolcat-creations
coolcat-creations - comment - 1 Feb 2019

@dgrammatiko we work on something that adresses the issue of design inconsistences, @Hackwar can you look into this one if we can merge some of our code with this work?

avatar dgrammatiko
dgrammatiko - comment - 9 Mar 2019

Closing here, I guess ES5 is pretty ok for Joomla

avatar dgrammatiko dgrammatiko - change - 9 Mar 2019
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2019-03-09 21:04:21
Closed_By dgrammatiko
avatar dgrammatiko dgrammatiko - close - 9 Mar 2019
avatar wilsonge
wilsonge - comment - 10 Mar 2019

As stated to you on private channels and for the record I’m not merging new custom elements until the existing ones stabilise which is why this has sat there (as has been the case since I first told you this last October/November)

avatar dgrammatiko
dgrammatiko - comment - 10 Mar 2019

@wilsonge whatever, this was my third and last attempt for this

Add a Comment

Login with GitHub to post a comment