New frontend login box¶

User listing¶

There is also a plugin for listing, browsing and searching the current users:

... and for each user you can click the username and get details:

A better login box¶

The default login box in TYPO3 is this dedicated content element called “Login”. You can still use that if you like. However it's pretty simply an really doesn't offer anything but a login and logout button.

Using this plugin enables you to insert a more user friendly login box on your pages. This is how you do:

Create a page where you want the login box to be and then add a new element:

In the element overview there is a plugin:

After this (an possibly selecting a position for the element) you'll get this form up:

The basic requirements are that the “Type:” field is set to “Insert plugin” and the “Plugin:” field is set to “Better login-box”. Then you'll see these fields.

There are five main sections and in each section a field for a header and a text.

Successful login: This is the message when a user has just entered a correct username and password and pressed “Login” button. Insert the string “###USER###” if you want to display the username.

Login-failure: Will appear when the username and password tried was not correct.

Welcome: The message that appears if a user comes to the login screen for the first time and is not logged in yet.

Status: The message that appears if a user is already logged in and comes to the login screen. In this case the plugin will display the current username and real name of that person so the user can see his status. Insert the string “###USER###” if you want to display the username.

Logout: This message appears as a goodbye-message when the user logs out from the site.

In all cases above there are default messages shown if the field is blank. It's suggested that you insert the plugin without modifying the fields first - then you can see the default messages and if needed you can override these by entering your own custom messages here.

The 6th item in the form is the “Show “Forgot password?” link:” checkbox. If you set this checkbox a link below the login form will appear and the user will be guided to a page where he can enter his email address and have the password sent to him right away:

Note related to TYPO3 3.6.0¶

Since TYPO3 3.6.0 the form for adding all the content of the login box (see above) has changed. Now it looks like this:

The idea behind this change is that one field in the database (“pi_flexform”) now contains all content as XML instead of using 9 precious fields in the already overcrowded tt_content table.

Result is: The fields purpose are the same, the storage method different and you have to visit each of the sheets in the form to enter information.

Notice: When you upgrade this extension from the earlier versions to the TYPO3 3.6.0 version make sure to use the UPGRADE menu in the EM - see later in this document for details!

A user list¶

Want to list all your users on the site? No problem. Just insert the user list plugin:

Create a page for the plugin and add a new item. This time you cannot use the wizard, sorry:

Then select the “insert plugin” content element type and the “User listing” plugin:

Finally you must tell the plugin where the users are found. Do that by setting the starting point relation:

Save that and now all fe_users found in the DB folder will be displayed by the plugin:

The login form does not work! I know I have created a user and the password is right, but nothing happens!¶

The login form has to know where the users are located in the page tree. In the example with the user listing that relation is set directly in the plugin as the starting point. That is not the case with the login form. Here it is based on a new concept which is called a “Storage page”. The current storagepage of position in the page tree where this login form is found that is the location used by default to look up the users for login. So basically you have to first set the storage page of any previous page in the page tree:

Another way to define the storagepage for the login form is to set it in your template (useful if you use the loginbox on all pages):

plugin.tx_newloginbox_pi1.storagePid = 123

In the userlist I can see only Name, Username and Email address. How can I see all the information about a user?¶

That is simply a restriction based on whether you are logged in or not. Only name, username and email address (in the detailed view) is displayed if the website user is not logged in. But when you are logged in you'll see the full information:

Tip / Side note¶

There is one interesting thing to comment in the above screendump and that is the setting of the value “._LOCAL_LANG.default.listFieldHeader_typo3experiences”. This value overrides the normal value found in the local_lang.php files. This opportunity is not specific for this plugin but applies generally to all modern extension made under the kickstarter. In other words you can overrule those hardcoded default labels through TypoScript! You just have to know the keys used in the local_lang files. That's all. In this case the details-display of a user will use the label “Experience with TYPO3:” instead of the default label which is just “Experience:”

The User list plugin¶

plugin.tx_newloginbox_pi3.customProcessing {
        username = TEXT
        username.field = username
        username.wrap = <b>|</b>
}

plugin.tx_newloginbox_pi3.listView.customProcessing {
        image = IMAGE
        image.file {
                import = uploads/pics/
                import.field = image
                import.listNum = 0
                maxW = 200
                maxH = 300
        }
}

_DEFAULT_PI_VARS.pointer = 2

The “Better login box” plugin¶

Login form¶

.tx-newloginbox-pi1 table { border:2px solid #ccc; width:100%; }

.tx-newloginbox-pi1 th { background:#ccc; padding:4px; text- align:right; white-space:nowrap; width:25%; }

.tx-newloginbox-pi1 td { background:#eee; padding:4px; }

User list¶

.tx-newloginbox-pi3 table { border:2px solid #ccc; width:100%; }

.tx-newloginbox-pi3 th { background:#ccc; padding:4px; white- space:nowrap; text-align:right; }

.tx-newloginbox-pi3 td { background:#eee; padding:4px; }

.tx-newloginbox-pi3-listrow th { text-align:center; }

.tx-newloginbox-pi3-singleView th { width:25%; }