xFrontUser

Set up in minutes a front-end user interface with advanced features

The 'magic' snippet is:

[[xUserArea]]

• Generate the front-end UI ;
• Integrated 'force to fill' feature for mandatory fields (check on page loading, alerts...) ;
• Welcome message on first login ;
• Front and back-end validation with one field & rule definition ;
• GDPR friendly : automated/manual account deletion, data portablility ;
• Customizable: just add your own AJAX sections, fields & rules, input field design...

Profile page ("My profile")

CHUNK
xuaProfile

Example included
xFrontUser User Area → Profile (document resource)

Field definition

Fields and validation rules are defined under the formfields options with JSON.

• Validation rules are automatically translated in front and back-end (server-side) ;
• Validation alerts & messages are automatically set with HTML5 client side 'constraint validation' ;
• Rules use the MODX synthax like FormIt validators ;
• Native MODX user field without prefix (exception: countrys2) ;
• Extended field with prefix ext_

[[!xUpdateProfile?
    &name=`form-coord`
    &formfields=`{
    	"ext_first_name": {
    		"type": "text",
    		"validate": "required:minLength=^2^:maxLength=^20^"
    	},
    	"ext_last_name": {
    		"type": "text",
    		"validate": "required:minLength=^2^:maxLength=^20^"
    	},
    	"website": {
    		"type": "text"
    	},
    	"phone":{
    	    "type": "text"
    	},
    	"mobilephone":{
    	    "type": "text"
    	},
    	"email": {
    		"type": "email",
    		"validate": "required:email"
    	},
    	"ext_fonction": {
    		"type": "text"
    	},
    	"ext_entity_type": {
    		"type": "text"
    	},
    	"ext_entity_name": {
    		"type": "text"
    	},
    	"ext_adrligne1": {
    		"type": "text",
    		"validate": "required"
    	},
    	"ext_adrligne2": {
    		"type": "text"
    	},
    	"ext_adrligne3": {
    		"type": "text"
    	},
    	"zip": {
    		"type": "text"
    	},
    	"city": {
    		"type": "text"
    	},
    	"state": {
    		"type": "text"
    	},
    	"countrys2": {
    		"type": "select2",
    		"datasource": "countries"
    	},
    	"photo": {
    		"type": "avatar",
    		"validate":"accept=^jpg|png^"
    	},
    	"ext_file": {
    		"type": "file",
    		"validate":"accept=^txt|txt^"
    	},
    	"ext_filetxt": {
    		"type": "file",
    		"validate":"accept=^txt|pdf^"
    	}
    }
`]]

First login

On the first login a modal window invite the user to complete their profile. Default chunks for the modal content are xuaFirstlog_en and xuaFirstlog_fr.

User password ("My password")

CHUNK
xuaPassword

Example included
xFrontUser User Area → Password (document resource)

User preferences ("My settings")

CHUNK
xuaSettings

Example included
xFrontUser User Area → Settings (document resource)

User data ("My data")

CHUNK
xuaData

Example included
xFrontUser User Area → Data (document resource)

This user section allow user to export his personal data and delete his account.

Account deletion

Deletion mode

Two modes are available : auto and manual.

Automatic deletion

The user account is automatically and immediately deleted after user confirmation.

Manual deletion

An account deletion request is sent to Administrator (Please see below) and account deletion will be processed by a human action in MODX user management section.

Templates for email notifications

The account deletion action send two emails : one to user, one to Administrator. The Administrator email come from MODX global setting (Core) Registration Email From Address (emailsender).

regardless of notification mode (manual | auto), administrator and user will receive email notifications.

Default templates

• Email to user: xdelacNotifUSerTpl_en, xdelacNotifUserTpl_fr
• Email to admin: xdelacNotifAdminTpl_en, xdelacNotifAdminTpl_fr

Custom templates

If you want to use your own templates, duplicate the default templates to avoid further deletions on extra xFrontUSer update or re-installation, then change the propêrties in CHUNK xuaData (form for account deletion):

Note: remove the _[cultureKey] suffix, it will be automatically added:

• tplnotifadmin: template for administrator email,
• tplnotifuser template for user email.