create-admin-account.phtml

Go to the documentation of this file.

<?php
// @codingStandardsIgnoreFile

?>
<?php
$passwordWizard = sprintf(
    '<p><b>%s</b> {{admin.passwordStatus.label}}</p>
        <div class=\'password-strength password-strength-{{admin.passwordStatus.class}}\'>
            <div class=\'password-strength-item\'></div>
            <div class=\'password-strength-item\'></div>
            <div class=\'password-strength-item\'></div>
            <div class=\'password-strength-item\'></div>
            <div class=\'password-strength-item\'></div>
        </div>
    <p>%s</p>',
    'Password Strength:',
    'Enter a mix of 7 or more numbers and letters. For a stronger password, include at least one small letter, big letter, and symbol.'
);
?>

<div class="nav-bar-outer-actions">
    <div class="outer-actions-inner-wrap">
        <div class="btn-wrap btn-wrap-triangle-right btn-wrap-next">
            <button
                type="button"
                class="btn btn-prime"
                ng-click="validateCredentials()"
                ng-disabled="account.$invalid && account.submitted"
                >Next</button>
        </div>
        <div class="btn-wrap btn-wrap-triangle-left btn-wrap-prev">
            <button type="button" class="btn" ng-click="previousState()">Back</button>
        </div>
    </div>
</div>

<h2 class="page-sub-title">{{$state.current.header}}</h2>

<div
    class="message message-success"
    ng-show="validateCredentials.result.success && validateCredentials.pressed"
>
    <span class="message-text">Credentials validation successfully passed.</span>
</div>
<div
    class="message message-error"
    ng-show="validateCredentials.result.success === false && validateCredentials.result !== undefined"
>
    <span class="message-text">{{validateCredentials.result.error}}</span>
</div>
<div
    class="message message-error"
    ng-show="validateCredentials.failed !== undefined"
>
    <span class="message-text">{{validateCredentials.failed}}</span>
</div>

<p>
    Create a new Admin account to manage your store.
</p>

<form
    novalidate
    name="account"
    role="form"
    autocomplete="off"
    >

    <div
        class="row form-row"
        ng-class="{'has-error': account.adminUsername.$invalid && account.submitted}"
        >
        <div class="col-m-3">
            <label class="form-label required" for="adminUsername">
                New Username
            </label>
        </div>
        <div class="col-m-4">
            <input
                id="adminUsername"
                class="form-el-input"
                tooltip-placement="right"
                tooltip="Must be 1 to 40 characters."
                tooltip-trigger="focus"
                tooltip-append-to-body="true"
                type="text"
                name="adminUsername"
                ng-model="admin.username"
                ng-class="{'invalid': account.adminUsername.$invalid && account.submitted}"
                ng-maxlength="40"
                required
                >
            <div class="error-container">
                <span ng-show="account.adminUsername.$error.required">
                    Please enter your new username.
                </span>
                <span ng-show="account.adminUsername.$error.maxlength">
                    Please enter a username between 1 and 40 characters.
                </span>
            </div>
        </div>
    </div>

    <div
        class="row form-row"
        ng-class="{'has-error': account.adminEmail.$invalid && account.submitted}"
        >
        <div class="col-m-3">
            <label class="form-label required" for="adminEmail">New Email</label>
        </div>
        <div class="col-m-4">
            <input
                id="adminEmail"
                class="form-el-input"
                tooltip-placement="right"
                tooltip="Must be a correct email."
                tooltip-trigger="focus"
                tooltip-append-to-body="true"
                type="email"
                name="adminEmail"
                ng-model="admin.email"
                ng-class="{'invalid': account.adminEmail.$invalid && account.submitted}"
                required
                >
            <div class="error-container">
                <span ng-show="account.adminEmail.$error.required">
                    Please enter your new email.
                </span>
                <span ng-show="account.adminEmail.$error.email">
                    Please enter a correct email.
                </span>
            </div>
        </div>
    </div>

    <div
        class="row form-row"
        ng-class="{'has-error': account.adminPassword.$invalid && account.submitted}"
        >
        <div class="col-m-3">
            <label class="form-label required" for="adminPassword">
                New Password
            </label>
        </div>
        <div class="col-m-4">
            <input
                id="adminPassword"
                class="form-el-input"
                ng-change="passwordStatusChange()"
                tooltip-placement="right"
                tooltip-html-unsafe="<?= $passwordWizard ?>"
                tooltip-trigger="focus"
                tooltip-append-to-body="true"
                type="password"
                name="adminPassword"
                ng-model="admin.password"
                ng-class="{'invalid': account.adminPassword.$invalid && account.submitted}"
                required
                check-Password
                check-User-Name-Password
                >
            <div class="error-container">
                <span ng-show="account.adminPassword.$error.checkPassword">
                    Please enter a mix of at least 7 alpha-numeric characters.
                </span>
                <span ng-show="account.adminPassword.$error.checkUserNamePasswordDifferent">
                    Password cannot be the same as the user name.
                </span>
                <span ng-show="account.adminPassword.$error.required">
                    Please enter your new password.
                </span>
            </div>
        </div>
    </div>

    <div
        class="row form-row"
        ng-class="{'has-error': account.adminConfirm.$invalid && account.submitted}"
        >
        <div class="col-m-3">
            <label class="form-label required" for="adminConfirm">
                Confirm Password
            </label>
        </div>
        <div class="col-m-4">
            <input
                id="adminConfirm"
                class="form-el-input"
                tooltip-placement="right"
                tooltip="Please re-enter your password."
                tooltip-trigger="focus"
                tooltip-append-to-body="true"
                type="password"
                name="adminConfirm"
                ng-model="admin.confirm"
                ng-class="{'invalid': account.adminConfirm.$invalid && account.submitted}"
                confirm-password="admin.password"
                required/>
            <div class="error-container">
                <span ng-show="account.adminConfirm.$error.required">
                    Please re-enter your password.
                </span>
                <span ng-show="account.adminConfirm.$error.confirmPassword">
                    Please make sure your passwords match.
                </span>
            </div>
        </div>
    </div>

</form>