mirror of
https://github.com/bitwarden/browser
synced 2026-01-01 08:03:20 +00:00
388a65f25f
* add toggle to see plain password when adding & editing ciphers (#292) * reduce number of password input fields to 1 while editing/creating ciphers
273 lines
18 KiB
HTML
273 lines
18 KiB
HTML
<form name="theForm" ng-submit="save()" bit-form="savePromise" autocomplete="off">
|
|
<div class="header">
|
|
<div class="left">
|
|
<a ng-click="close()" href="">{{i18n.cancel}}</a>
|
|
</div>
|
|
<div class="right">
|
|
<button type="submit" class="btn btn-link" ng-show="!theForm.$loading">{{i18n.save}}</button>
|
|
<i class="fa fa-spinner fa-lg" ng-show="theForm.$loading" ng-class="{'fa-spin' : theForm.$loading}"></i>
|
|
</div>
|
|
<div class="title">{{i18n.addItem}}</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="list">
|
|
<div class="list-section">
|
|
<div class="list-section-header">
|
|
{{i18n.itemInformation}}
|
|
</div>
|
|
<div class="list-section-items">
|
|
<div class="list-section-item">
|
|
<label for="type" class="item-label">{{i18n.type}}</label>
|
|
<select id="type" name="Type" ng-model="selectedType" ng-change="typeChanged()">
|
|
<option value="{{constants.cipherType.login}}">{{i18n.typeLogin}}</option>
|
|
<option value="{{constants.cipherType.card}}">{{i18n.typeCard}}</option>
|
|
<option value="{{constants.cipherType.identity}}">{{i18n.typeIdentity}}</option>
|
|
<option value="{{constants.cipherType.secureNote}}">{{i18n.typeSecureNote}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="name" class="item-label">{{i18n.name}}</label>
|
|
<input id="name" type="text" name="Name" ng-model="cipher.name">
|
|
</div>
|
|
<div ng-if="cipher.type === constants.cipherType.login">
|
|
<div class="list-section-item">
|
|
<label for="loginUri" class="item-label">{{i18n.uri}}</label>
|
|
<input id="loginUri" type="text" name="Login.Uri" ng-model="cipher.login.uri">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="loginUsername" class="item-label">{{i18n.username}}</label>
|
|
<input id="loginUsername" type="text" name="Login.Username" ng-model="cipher.login.username">
|
|
</div>
|
|
<div class="list-section-item flex">
|
|
<div class="flex-grow">
|
|
<label for="loginPassword" class="item-label">{{i18n.password}}</label>
|
|
<input id="loginPassword" type="{{showPassword ? 'text' : 'password'}}" name="Login.Password" ng-model="cipher.login.password">
|
|
</div>
|
|
<div class="action-buttons">
|
|
<a class="btn-list" href="" title="{{i18n.togglePassword}}" ng-click="togglePassword()">
|
|
<i class="fa fa-lg" ng-class="[{'fa-eye': !showPassword}, {'fa-eye-slash': showPassword}]"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a class="list-section-item" href="" ng-click="generatePassword()">
|
|
{{i18n.generatePassword}}
|
|
<i class="fa fa-chevron-right"></i>
|
|
</a>
|
|
</div>
|
|
<div ng-if="cipher.type === constants.cipherType.card">
|
|
<div class="list-section-item">
|
|
<label for="cardCardholderName" class="item-label">{{i18n.cardholderName}}</label>
|
|
<input id="cardCardholderName" type="text" name="Card.CardholderName"
|
|
ng-model="cipher.card.cardholderName">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="cardNumber" class="item-label">{{i18n.number}}</label>
|
|
<input id="cardNumber" type="text" name="Card.Number" ng-model="cipher.card.number">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="cardBrand" class="item-label">{{i18n.brand}}</label>
|
|
<select id="cardBrand" name="Card.Brand" ng-model="cipher.card.brand">
|
|
<option value="">-- {{i18n.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">{{i18n.other}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="cardExpMonth" class="item-label">{{i18n.expirationMonth}}</label>
|
|
<select id="cardExpMonth" name="Card.ExpMonth" ng-model="cipher.card.expMonth">
|
|
<option value="">-- {{i18n.select}} --</option>
|
|
<option value="1">01 - {{i18n.january}}</option>
|
|
<option value="2">02 - {{i18n.february}}</option>
|
|
<option value="3">03 - {{i18n.march}}</option>
|
|
<option value="4">04 - {{i18n.april}}</option>
|
|
<option value="5">05 - {{i18n.may}}</option>
|
|
<option value="6">06 - {{i18n.june}}</option>
|
|
<option value="7">07 - {{i18n.july}}</option>
|
|
<option value="8">08 - {{i18n.august}}</option>
|
|
<option value="9">09 - {{i18n.september}}</option>
|
|
<option value="10">10 - {{i18n.october}}</option>
|
|
<option value="11">11 - {{i18n.november}}</option>
|
|
<option value="12">12 - {{i18n.december}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="cardExpYear" class="item-label">{{i18n.expirationYear}}</label>
|
|
<input id="cardExpYear" type="text" name="Card.ExpYear" ng-model="cipher.card.expYear"
|
|
placeholder="{{i18n.ex}} 2019">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="cardCode" class="item-label">{{i18n.securityCode}}</label>
|
|
<input id="cardCode" type="text" name="Card.Code" ng-model="cipher.card.code">
|
|
</div>
|
|
</div>
|
|
<div ng-if="cipher.type === constants.cipherType.identity">
|
|
<div class="list-section-item">
|
|
<label for="identityTitle" class="item-label">{{i18n.title}}</label>
|
|
<select id="identityTitle" name="Identity.Title" ng-model="cipher.identity.title">
|
|
<option value="">-- {{i18n.select}} --</option>
|
|
<option value="{{i18n.mr}}">{{i18n.mr}}</option>
|
|
<option value="{{i18n.mrs}}">{{i18n.mrs}}</option>
|
|
<option value="{{i18n.ms}}">{{i18n.ms}}</option>
|
|
<option value="{{i18n.dr}}">{{i18n.dr}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityFirstName" class="item-label">{{i18n.firstName}}</label>
|
|
<input id="identityFirstName" type="text" name="Identity.FirstName"
|
|
ng-model="cipher.identity.firstName">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityMiddleName" class="item-label">{{i18n.middleName}}</label>
|
|
<input id="identityMiddleName" type="text" name="Identity.MiddleName"
|
|
ng-model="cipher.identity.middleName">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityLastName" class="item-label">{{i18n.lastName}}</label>
|
|
<input id="identityLastName" type="text" name="Identity.LastName"
|
|
ng-model="cipher.identity.lastName">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityUsername" class="item-label">{{i18n.username}}</label>
|
|
<input id="identityUsername" type="text" name="Identity.Username"
|
|
ng-model="cipher.identity.username">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityCompany" class="item-label">{{i18n.company}}</label>
|
|
<input id="identityCompany" type="text" name="Identity.Company" ng-model="cipher.identity.company">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identitySsn" class="item-label">{{i18n.ssn}}</label>
|
|
<input id="identitySsn" type="text" name="Identity.SSN" ng-model="cipher.identity.ssn">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityPassportNumber" class="item-label">{{i18n.passportNumber}}</label>
|
|
<input id="identityPassportNumber" type="text" name="Identity.PassportNumber"
|
|
ng-model="cipher.identity.passportNumber">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityLicenseNumber" class="item-label">{{i18n.licenseNumber}}</label>
|
|
<input id="identityLicenseNumber" type="text" name="Identity.LicenseNumber"
|
|
ng-model="cipher.identity.licenseNumber">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityEmail" class="item-label">{{i18n.email}}</label>
|
|
<input id="identityEmail" type="text" name="Identity.Email" ng-model="cipher.identity.email">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityPhone" class="item-label">{{i18n.phone}}</label>
|
|
<input id="identityPhone" type="text" name="Identity.Phone" ng-model="cipher.identity.phone">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityAddress1" class="item-label">{{i18n.address1}}</label>
|
|
<input id="identityAddress1" type="text" name="Identity.Address1" ng-model="cipher.identity.address1">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityAddress2" class="item-label">{{i18n.address2}}</label>
|
|
<input id="identityAddress2" type="text" name="Identity.Address2" ng-model="cipher.identity.address2">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityAddress3" class="item-label">{{i18n.address3}}</label>
|
|
<input id="identityAddress3" type="text" name="Identity.Address3" ng-model="cipher.identity.address3">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityCity" class="item-label">{{i18n.cityTown}}</label>
|
|
<input id="identityCity" type="text" name="Identity.City" ng-model="cipher.identity.city">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityState" class="item-label">{{i18n.stateProvince}}</label>
|
|
<input id="identityState" type="text" name="Identity.State" ng-model="cipher.identity.state">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityPostalCode" class="item-label">{{i18n.zipPostalCode}}</label>
|
|
<input id="identityPostalCode" type="text" name="Identity.PostalCode"
|
|
ng-model="cipher.identity.postalCode">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="identityCountry" class="item-label">{{i18n.country}}</label>
|
|
<input id="identityCountry" type="text" name="Identity.Country" ng-model="cipher.identity.country">
|
|
</div>
|
|
</div>
|
|
<div ng-if="cipher.type === constants.cipherType.secureNote">
|
|
<!-- Nothing for now -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-section">
|
|
<div class="list-section-items">
|
|
<div class="list-section-item" ng-if="cipher.type === constants.cipherType.login">
|
|
<label for="loginTotp" class="item-label">{{i18n.authenticatorKeyTotp}}</label>
|
|
<input id="loginTotp" type="text" name="Login.Totp" ng-model="cipher.login.totp">
|
|
</div>
|
|
<div class="list-section-item">
|
|
<label for="folder" class="item-label">{{i18n.folder}}</label>
|
|
<select id="folder" name="FolderId" ng-model="cipher.folderId">
|
|
<option ng-repeat="folder in folders | orderBy: ['name'] track by $index" value="{{folder.id}}">
|
|
{{folder.name}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="list-section-item list-section-item-checkbox">
|
|
<label for="favorite">{{i18n.favorite}}</label>
|
|
<input id="favorite" name="Favorite" type="checkbox" ng-model="cipher.favorite">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-section">
|
|
<div class="list-section-header">
|
|
<label for="notes">{{i18n.notes}}</label>
|
|
</div>
|
|
<div class="list-section-items">
|
|
<div class="list-section-item">
|
|
<textarea id="notes" name="Notes" rows="5" ng-model="cipher.notes"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-section">
|
|
<div class="list-section-header">
|
|
{{i18n.customFields}}
|
|
</div>
|
|
<div class="list-section-items">
|
|
<div class="list-section-item list-section-item-table"
|
|
ng-if="cipher.fields && cipher.fields.length" ng-repeat="field in cipher.fields"
|
|
ng-class="{'list-section-item-checkbox' : field.type === constants.fieldType.boolean}">
|
|
<a href="#" stop-click ng-click="removeField(field)" class="action-button text-danger">
|
|
<i class="fa fa-close fa-lg"></i>
|
|
</a>
|
|
<div class="action-button-content">
|
|
<input id="field_name{{$index}}" type="text" name="Field.Name{{$index}}"
|
|
ng-model="field.name" class="item-label"
|
|
placeholder="{{i18n.name}}">
|
|
<input id="field_value{{$index}}" type="text" name="Field.Value{{$index}}"
|
|
ng-model="field.value" ng-if="field.type === constants.fieldType.text"
|
|
placeholder="{{i18n.value}}">
|
|
<input id="field_value{{$index}}" type="password" name="Field.Value{{$index}}"
|
|
ng-model="field.value" ng-if="field.type === constants.fieldType.hidden"
|
|
placeholder="{{i18n.value}}">
|
|
<input id="field_value{{$index}}" name="Field.Value{{$index}}" type="checkbox"
|
|
ng-model="field.value" data-ng-true-value="'true'"
|
|
ng-if="field.type === constants.fieldType.boolean">
|
|
</div>
|
|
</div>
|
|
<div class="list-section-item">
|
|
<a href="#" stop-click ng-click="addField(addFieldType)">
|
|
<i class="fa fa-plus-circle fa-fw fa-lg"></i> {{i18n.newCustomField}}
|
|
</a>
|
|
<select ng-model="addFieldType" class="field-type">
|
|
<option value="0">{{i18n.cfTypeText}}</option>
|
|
<option value="1">{{i18n.cfTypeHidden}}</option>
|
|
<option value="2">{{i18n.cfTypeBoolean}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|