MODX Office Setup for User Personal Account

Office Setup for Personal Account on MODX

Office is a MODX Extra for creating user personal accounts: registration, login, password recovery, profile editing, password change. Works via AJAX without page reloads.

Installation

Package Manager → Office → install. Dependencies: pdoTools, Email.

Page Structure

Personal Account (template: lk-base)
├── Profile (/profile/)
├── Settings (/settings/)
├── Order History (/orders/)  [optional]
└── Logout (/logout/)

Authorization:
├── Login (/login/)
└── Registration (/register/)
└── Password Recovery (/forgot-password/)

Login Form

[[!OfficeAuth?
    &loginTpl=`officeLoginForm`
    &successTpl=`officeLoginSuccess`
    &redirectTo=`42`
    &loginContext=`web`
]]

Chunk officeLoginForm:

<form class="login-form" data-office="auth">
    <div class="form-group">
        <label for="username">Email</label>
        <input type="email" id="username" name="username" required>
        [[+fi.error.username:notempty=`<span class="error">[[+fi.error.username]]</span>`]]
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
    </div>
    <button type="submit">Login</button>
    <a href="/forgot-password/">Forgot password?</a>
</form>

Registration Form

[[!OfficeRegister?
    &submitVar=`office-register`
    &successTpl=`officeRegisterSuccess`
    &activateTpl=`officeActivateEmail`
    &activateSubject=`Registration Confirmation`
    &groups=`Member`
    &redirectTo=`42`
    &validate=`username:email:required,password:required:minLength=^8^,password_confirm:password_confirm=^password^`
    &placeholderPrefix=`of.`
]]

Profile Editing Form

[[!OfficeProfile?
    &submitVar=`office-profile`
    &successTpl=`officeProfileSuccess`
    &placeholderPrefix=`of.`
]]

<form data-office="profile">
    <input type="text" name="fullname" value="[[!+of.fullname]]" placeholder="Full Name">
    <input type="email" name="email" value="[[!+of.email]]" placeholder="Email" required>
    <input type="text" name="phone" value="[[!+of.phone]]" placeholder="Phone">
    [[- Custom extended fields ]]
    <input type="text" name="extended[company]" value="[[!+of.extended.company]]" placeholder="Company">
    <button type="submit">Save</button>
</form>

Password Change

[[!OfficeChangePassword?
    &validate=`password_old:required,password:required:minLength=^8^,password_confirm:password_confirm=^password^`
]]

Password Recovery

[[!OfficeForgotPassword?
    &emailSubject=`Password Recovery`
    &emailTpl=`officeForgotPasswordEmail`
    &redirectTo=`reset-password`
]]

Authorization Check in Template

[[- Show different content for authenticated / guests ]]
[[!OfficeAuth?
    &loginTpl=`@INLINE <a href="/login/" class="btn">Login</a>`
    &logoutTpl=`@INLINE Hello, [[+username]]! <a href="/logout/">Logout</a>`
]]

[[- Redirect unauthenticated to login page ]]
[[!OfficeCheck? &redirectTo=`login-page-id`]]

Custom Profile Fields via Extended

MODX stores user extended data in JSON in extended field:

$user = $modx->getObject('modUser', $userId);
$profile = $user->getOne('Profile');

// Write
$profile->set('extended', json_encode([
    'company' => 'ACME Corp',
    'inn'     => '7700000000',
    'vip'     => true,
]));
$profile->save();

// Read
$extended = json_decode($profile->get('extended'), true);
$company = $extended['company'] ?? '';

Timeline

Setting up personal account (login, registration, profile, password change) — 3–4 days.