web/app/vault/views/vaultAddLogin.html

<div class="modal-header">
    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="addLoginModelLabel"><i class="fa fa-globe"></i> Add New Login</h4>
</div>
<form name="addLoginForm" ng-submit="addLoginForm.$valid && save(login)" api-form="savePromise" autocomplete="off">
    <div class="modal-body">
        <div class="callout callout-danger validation-errors" ng-show="addLoginForm.$errors">
            <h4>Errors have occurred</h4>
            <ul>
                <li ng-repeat="e in addLoginForm.$errors">{{e}}</li>
            </ul>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group" show-errors>
                    <label for="name">Name</label> <span>*</span>
                    <input type="text" id="name" name="Name" ng-model="login.name" class="form-control" required api-field />
                </div>
            </div>
            <div class="col-sm-6" ng-if="!hideFolders">
                <div class="form-group" show-errors>
                    <label for="folder">Folder</label>
                    <select id="folder" name="FolderId" ng-model="login.folderId" class="form-control" api-field>
                        <option ng-repeat="folder in folders | orderBy: folderSort" value="{{folder.id}}">{{folder.name}}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group" show-errors>
            <label for="uri">URI</label>
            <div class="input-group">
                <input type="text" id="uri" ng-model="login.uri" name="Uri" class="form-control" placeholder="http://..." api-field />
                <span class="input-group-btn" uib-tooltip="Copy URI" tooltip-placement="left">
                    <button tabindex="-1" class="btn btn-default btn-flat" type="button" ngclipboard
                            ngclipboard-error="clipboardError(e)"
                            data-clipboard-target="#uri">
                        <i class="fa fa-clipboard"></i>
                    </button>
                </span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group" show-errors>
                    <label for="username">Username</label>
                    <div class="input-group">
                        <input type="text" id="username" name="Username" ng-model="login.username" class="form-control" api-field />
                        <span class="input-group-btn" uib-tooltip="Copy Username" tooltip-placement="left">
                            <button tabindex="-1" class="btn btn-default btn-flat" type="button" ngclipboard
                                    ngclipboard-error="clipboardError(e)"
                                    data-clipboard-target="#username">
                                <i class="fa fa-clipboard"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group" show-errors style="margin-bottom: 5px;">
                    <div class="pull-right password-options">
                        <i class="fa fa-lg fa-refresh" uib-tooltip="Generate Password" tooltip-placement="left" ng-click="generatePassword()"></i>
                        <i class="fa fa-lg fa-eye" uib-tooltip="Toggle Password" tooltip-placement="left" password-viewer="#password"></i>
                    </div>
                    <label for="password">Password</label>
                    <div class="input-group">
                        <input tabindex="-1" type="text" id="password-text" value="{{login.password}}" style="margin-left: -9999px;" />
                        <input type="password" id="password" name="Password" ng-model="login.password" class="form-control" api-field />
                        <span class="input-group-btn" uib-tooltip="Copy Password" tooltip-placement="left">
                            <button tabindex="-1" class="btn btn-default btn-flat" type="button" ngclipboard
                                    ngclipboard-success="clipboardSuccess(e)"
                                    ngclipboard-error="clipboardError(e, true)"
                                    data-clipboard-target="#password-text">
                                <i class="fa fa-clipboard"></i>
                            </button>
                        </span>
                    </div>
                </div>
                <div password-meter="login.password" password-meter-username="login.username"
                     outer-class="xs" class="password-meter"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group" show-errors>
                    <label for="totp">Authenticator Key (TOTP)</label>
                    <input type="text" id="totp" name="Totp" ng-model="login.totp" class="form-control"
                           ng-readonly="readOnly" api-field />
                </div>
            </div>
            <div class="col-sm-6 totp-col">
                <div totp="login.totp" id="verification-code" ng-if="useTotp"></div>
                <div ng-if="!useTotp">
                    <a href="#" stop-click ng-click="showUpgrade()"><img src="images/totp-countdown.png" alt="" /></a>
                    <span class="label label-info clickable" ng-click="showUpgrade()">{{fromOrg ? 'UPGRADE' : 'PREMIUM'}}</span>
                </div>
            </div>
        </div>
        <div class="form-group" show-errors>
            <label for="notes">Notes</label>
            <textarea id="notes" name="Notes" class="form-control" ng-model="login.notes" api-field></textarea>
        </div>
        <hr />
        <h4><i class="fa fa-list-ul"></i> Custom Fields</h4>
        <div ng-repeat="field in login.fields">
            <div class="row">
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="field_name{{$index}}">Name</label>
                        <input type="text" id="field_name{{$index}}" name="Field.Name{{$index}}" class="form-control" ng-model="field.name" />
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="field_type{{$index}}">Type</label>
                        <select id="field_type{{$index}}" name="Field.Type{{$index}}" class="form-control" ng-model="field.type">
                            <option value="0">Text</option>
                            <option value="1">Hidden</option>
                            <option value="2">Boolean</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="form-group">
                        <div class="pull-right password-options" ng-if="field.type === '1'">
                            <i class="fa fa-lg fa-eye" uib-tooltip="Toggle Visibility" tooltip-placement="left"
                               password-viewer="#field_value{{$index}}"></i>
                        </div>
                        <label for="field_value{{$index}}">Value</label>
                        <div class="input-group" ng-if="field.type !== '2'">
                            <input ng-attr-type="{{field.type === '0' ? 'text' : 'password'}}" id="field_value{{$index}}"
                                   name="Field.Value{{$index}}" class="form-control" ng-model="field.value" />
                            <span class="input-group-btn" uib-tooltip="Copy Value" tooltip-placement="left">
                                <button class="btn btn-default btn-flat" type="button" ngclipboard
                                        ngclipboard-success="clipboardSuccess(e)" ngclipboard-error="clipboardError(e, true)"
                                        data-clipboard-text="{{field.value}}">
                                    <i class="fa fa-clipboard"></i>
                                </button>
                            </span>
                        </div>
                        <div ng-if="field.type === '2'">
                            <input type="checkbox" id="field_value{{$index}}" name="Field.Value{{$index}}" ng-model="field.value"
                                   data-ng-true-value="'true'" />
                        </div>
                    </div>
                </div>
                <div class="col-sm-1">
                    <br class="hidden-xs" />
                    <a href="#" ng-click="removeField(field)" stop-click>
                        <i class="fa fa-window-close-o fa-lg"></i>
                        <span class="visible-xs-inline">Remove Custom Field</span>
                    </a>
                </div>
            </div>
            <hr class="visible-xs-block" />
        </div>
        <a href="#" ng-click="addField()" stop-click>
            <i class="fa fa-plus-circle"></i> New Custom Field
        </a>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="addLoginForm.$loading">
            <i class="fa fa-refresh fa-spin loading-icon" ng-show="addLoginForm.$loading"></i>Submit
        </button>
        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
        <button type="button" ng-if="!hideFavorite" class="btn btn-link pull-right" ng-click="toggleFavorite()"
                uib-tooltip="Toggle Favorite" tooltip-placement="left">
            <i class="fa fa-lg" ng-class="login.favorite ? 'fa-star' : 'fa-star-o'"></i>
            <span class="sr-only">Toggle Favorite</span>
        </button>
    </div>
</form>