<div class="modal-header">
<button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-plus-circle"></i> Add New Item</h4>
</div>
<form name="form" ng-submit="form.$valid && save()" api-form="savePromise" autocomplete="off">
<div class="modal-body">
<div class="callout callout-danger validation-errors" ng-show="form.$errors">
<h4>Errors have occurred</h4>
<ul>
<li ng-repeat="e in form.$errors">{{e}}</li>
</ul>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="type">What type of item is this?</label>
<select id="type" name="Type" ng-model="selectedType" class="form-control" ng-change="typeChanged()">
<option value="{{constants.cipherType.login}}">Login</option>
<option value="{{constants.cipherType.card}}">Card</option>
<option value="{{constants.cipherType.identity}}">Identity</option>
<option value="{{constants.cipherType.secureNote}}">Secure Note</option>
</select>
</div>
</div>
</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="cipher.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="cipher.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 ng-if="cipher.type === constants.cipherType.login">
<div class="form-group" show-errors>
<label for="uri">URI</label>
<div class="input-group">
<input type="text" id="uri" name="Login.Uri" ng-model="cipher.login.uri" class="form-control"
placeholder="http://..." ng-readonly="readOnly" api-field />
<span class="input-group-btn">
<button class="btn btn-default btn-flat" type="button" uib-tooltip="Copy URI"
tooltip-placement="left" ngclipboard ngclipboard-error="clipboardError(e)"
data-clipboard-target="#uri">
<i class="fa fa-clipboard"></i>
</button>
<a href="{{cipher.login.uri}}" target="_blank" class="btn btn-default btn-flat"
uib-tooltip="Go To Website" tooltip-placement="left">
<i class="fa fa-share"></i>
</a>
</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="Login.Username" ng-model="cipher.login.username"
class="form-control monospaced" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Username" tooltip-placement="left">
<button 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()" ng-show="!readOnly"></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 type="password" id="password" name="Login.Password" ng-model="cipher.login.password"
class="form-control monospaced" ng-readonly="readOnly" api-field
autocomplete="new-password" />
<span class="input-group-btn" uib-tooltip="Copy Password" 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="{{cipher.login.password}}">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
<div password-meter="cipher.login.password" password-meter-username="cipher.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="Login.Totp" ng-model="cipher.login.totp"
class="form-control monospaced" ng-readonly="readOnly" api-field />
</div>
</div>
<div class="col-sm-6 totp-col">
<div totp="cipher.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>
<div ng-if="cipher.type === constants.cipherType.card">
<div class="row">
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="name">Cardholder Name</label>
<input type="text" id="cardholderName" name="Card.CarholderName" ng-readonly="readOnly"
ng-model="cipher.card.cardholderName" class="form-control" api-field />
</div>
</div>
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="cardBrand">Brand</label>
<select id="cardBrand" name="Card.Brand" ng-model="cipher.card.brand" class="form-control"
ng-readonly="readOnly" api-field>
<option value="">-- Select --</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="Amex">American Express</option>
<option value="Discover">Discover</option>
<option value="Diners Club">Diners Club</option>
<option value="JCB">JCB</option>
<option value="Maestro">Maestro</option>
<option value="UnionPay">UnionPay</option>
<option value="Other">Other</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="cardNumber">Number</label>
<div class="input-group">
<input type="text" id="cardNumber" name="Card.Number" ng-model="cipher.card.number"
class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Number" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#cardNumber">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group" show-errors>
<label for="cardExpMonth">Expiration Month</label>
<select id="cardExpMonth" name="Card.ExpMonth" ng-model="cipher.card.expMonth"
ng-readonly="readOnly" class="form-control" api-field>
<option value="">-- Select --</option>
<option value="1">01 - January</option>
<option value="2">02 - February</option>
<option value="3">03 - March</option>
<option value="4">04 - April</option>
<option value="5">05 - May</option>
<option value="6">06 - June</option>
<option value="7">07 - July</option>
<option value="8">08 - August</option>
<option value="9">09 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group" show-errors>
<label for="cardExpYear">Expiration Year</label>
<input type="text" id="cardExpYear" name="Card.ExpYear" ng-readonly="readOnly"
ng-model="cipher.card.expYear" class="form-control" api-field placeholder="ex. 2019" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="cardCode">Security Code</label>
<div class="input-group">
<input type="text" id="cardCode" name="Card.Code" ng-model="cipher.card.code"
class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Code" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#cardCode">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div ng-if="cipher.type === constants.cipherType.identity">
<div class="row">
<div class="col-sm-4">
<div class="form-group" show-errors>
<label for="identityTitle">Title</label>
<select id="identityTitle" name="Identity.Title" ng-model="cipher.identity.title" class="form-control"
ng-readonly="readOnly" api-field>
<option value="">-- Select --</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group" show-errors>
<label for="identityFirstName">First Name</label>
<div class="input-group">
<input type="text" id="identityFirstName" name="Identity.FirstName"
ng-model="cipher.identity.firstName" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy First Name" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityFirstName">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group" show-errors>
<label for="identityMiddleName">Middle Name</label>
<div class="input-group">
<input type="text" id="identityMiddleName" name="Identity.FirstName"
ng-model="cipher.identity.middleName" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Middle Name" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityMiddleName">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group" show-errors>
<label for="identityLastName">Last Name</label>
<div class="input-group">
<input type="text" id="identityLastName" name="Identity.LastName"
ng-model="cipher.identity.lastName" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Last Name" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityLastName">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group" show-errors>
<label for="identityUsername">Username</label>
<div class="input-group">
<input type="text" id="identityUsername" name="Identity.Username"
ng-model="cipher.identity.username" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Username" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityUsername">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group" show-errors>
<label for="identityCompany">Company</label>
<div class="input-group">
<input type="text" id="identityCompany" name="Identity.Company"
ng-model="cipher.identity.company" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Company" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityCompany">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group" show-errors>
<label for="identitySSN">Social Security Number</label>
<div class="input-group">
<input type="text" id="identitySSN" name="Identity.SSN"
ng-model="cipher.identity.ssn" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy SSN" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identitySSN">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group" show-errors>
<label for="identityPassportNumber">Passport Number</label>
<div class="input-group">
<input type="text" id="identityPassportNumber" name="Identity.PassportNumber"
ng-model="cipher.identity.passportNumber" class="form-control" ng-readonly="readOnly"
api-field />
<span class="input-group-btn" uib-tooltip="Copy Passport Number" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityPassportNumber">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group" show-errors>
<label for="identityLicenseNumber">License Number</label>
<div class="input-group">
<input type="text" id="identityLicenseNumber" name="Identity.LicenseNumber"
ng-model="cipher.identity.licenseNumber" class="form-control" ng-readonly="readOnly"
api-field />
<span class="input-group-btn" uib-tooltip="Copy License Number" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityLicenseNumber">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="identityEmail">Email</label>
<div class="input-group">
<input type="text" id="identityEmail" name="Identity.Email"
ng-model="cipher.identity.email" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Email" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityEmail">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="identityPhone">Phone</label>
<div class="input-group">
<input type="text" id="identityPhone" name="Identity.Phone"
ng-model="cipher.identity.phone" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Phone" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityPhone">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="identityAddress1">Address 1</label>
<div class="input-group">
<input type="text" id="identityAddress1" name="Identity.Address1"
ng-model="cipher.identity.address1" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Address 1" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityAddress1">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="identityAddress2">Address 2</label>
<div class="input-group">
<input type="text" id="identityAddress2" name="Identity.Address2"
ng-model="cipher.identity.address2" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Address 2" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityAddress2">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="identityAddress3">Address 3</label>
<div class="input-group">
<input type="text" id="identityAddress3" name="Identity.Address3"
ng-model="cipher.identity.address3" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Address 3" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityAddress3">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="identityCity">City / Town</label>
<div class="input-group">
<input type="text" id="identityCity" name="Identity.City"
ng-model="cipher.identity.city" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy City/Town" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityCity">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="identityState">State / Province</label>
<div class="input-group">
<input type="text" id="identityState" name="Identity.State"
ng-model="cipher.identity.state" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy State/Province" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityState">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="identityPostalCode">Zip / Postal Code</label>
<div class="input-group">
<input type="text" id="identityPostalCode" name="Identity.PostalCode"
ng-model="cipher.identity.postalCode" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Zip/Postal Code" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityPostalCode">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" show-errors>
<label for="identityCountry">Country</label>
<div class="input-group">
<input type="text" id="identityCountry" name="Identity.Country"
ng-model="cipher.identity.country" class="form-control" ng-readonly="readOnly" api-field />
<span class="input-group-btn" uib-tooltip="Copy Country" tooltip-placement="left">
<button class="btn btn-default btn-flat" type="button" ngclipboard
ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityCountry">
<i class="fa fa-clipboard"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div ng-if="cipher.type === constants.cipherType.secureNote">
<!-- Nothing for now -->
</div>
<div class="form-group" show-errors>
<label for="notes">Notes</label>
<textarea id="notes" name="Notes" class="form-control" ng-model="cipher.notes" api-field
ng-class="{'big-textarea': cipher.type === constants.cipherType.secureNote}"></textarea>
</div>
<hr />
<h4><i class="fa fa-list-ul"></i> Custom Fields</h4>
<div ng-repeat="field in cipher.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-class="{'monospaced': field.type !== '0'}" 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="form.$loading">
<i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$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="cipher.favorite ? 'fa-star' : 'fa-star-o'"></i>
<span class="sr-only">Toggle Favorite</span>
</button>
</div>
</form>