Batflat/inc/modules/users/view/admin/form.html

<article class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{$users.title}</h3>
            </div>
            <div class="panel-body">
            <form name="user" action="{?=url(ADMIN.'/users/save/'.@$users.form.id)?}" method="POST" enctype="multipart/form-data">
                <fieldset>
                    <div class="form-group">
                        <label>{$lang.users.photo}</label>
                        <div>
                            <img src="{$users.avatarURL}" width="96" height="96" class="img-thumbnail" id="photoPreview" style="cursor:pointer;" onclick="$('input[name=photo]').click()" />
                            <input type="file" name="photo" class="form-control hidden" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{$lang.general.username}</label>
                        <input type="text" name="username" class="form-control" required value="{$users.form.username}" />
                    </div>
                    <div class="form-group">
                        <label>{$lang.users.display_name}</label>
                        <input type="text" name="fullname" class="form-control" placeholder="{$lang.general.can_be_empty}" value="{$users.form.fullname}" />
                    </div>
                    <div class="form-group">
                        <label>{$lang.users.email}</label>
                        <input type="email" name="email" class="form-control" required value="{$users.form.email}" />
                    </div>
                    <div class="form-group">
                        <label>{$lang.general.password} {if: isset($users.form.id)}<a href="#" id="passwordChange" class="btn btn-default btn-xs">{$lang.general.change}</a>{/if}</label>
                        <input type="password" name="password" class="form-control" pattern=".{5,}" title="{$lang.users.too_short_pswd}" {if: isset($users.form.id)}value="********" placeholder="{$lang.users.new_password}" disabled {else}required{/if}/>
                    </div>
                    <div class="form-group">
                        <label>{$lang.users.description}</label>
                        <textarea class="form-control" name="description" placeholder="{$lang.general.can_be_empty}" rows="3">{$users.form.description}</textarea>
                    </div>
                    <div class="form-group">
                        <label>{$lang.users.access}</label>
                        <select name="access[]" multiple class="form-control" data-keep-open="true" data-use-dimmer="false" data-options-height="126px" {if: isset_or($users.form.id, 0) == 1}disabled{/if} required>
                            {loop: $users.modules}
                            <option value="{$value.dir}" data-left="<i class='fa fa-{$value.icon}'></i>" {$value.attr}>{$value.name}</option>
                            {/loop}
                        </select>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="save" class="btn btn-primary" value="{$lang.general.save}" />
                    </div>
                </fieldset>
            </form>
            </div>
        </div>
    </div>
</article>

<script>
    // Avatar
    var reader  = new FileReader();
    reader.addEventListener("load", function() {
        $("#photoPreview").attr('src', reader.result);
    }, false);
    $("input[name=photo]").change(function() {
        reader.readAsDataURL(this.files[0]);
    });

    // Password
    $("#passwordChange").on("click", function() {
        $("input[name=password]").val("").attr('disabled', false);
        $(this).remove();
        return false;
    })
</script>