2018-06-07 05:23:14 +02:00
< div class = "modal fade" >
< div class = "modal-dialog modal-lg" >
< form class = "modal-content" # form ( ngSubmit ) = " submit ( ) " [ appApiAction ] = " formPromise " >
2018-06-07 15:05:25 +02:00
< div class = "modal-header" > {{title}}< / div >
2018-06-07 05:23:14 +02:00
< div class = "modal-body" >
2018-06-07 15:05:25 +02:00
< div class = "row" * ngIf = "!editMode" >
< div class = "col-6" >
< div class = "form-group" >
< label for = "type" > {{'whatTypeOfItem' | i18n}}< / label >
< select id = "type" name = "Type" [ ( ngModel ) ] = " cipher . type " >
< option * ngFor = "let o of typeOptions" [ ngValue ] = " o . value " > {{o.name}}< / option >
< / select >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-6" >
< div class = "form-group" >
< label for = "name" > {{'name' | i18n}}< / label >
< input id = "name" class = "form-control" type = "text" name = "Name" [ ( ngModel ) ] = " cipher . name " [ appAutofocus ] = " ! editMode " >
< / div >
< / div >
< / div >
< div class = "box" >
< div class = "box-content" >
<!-- Login -->
< div * ngIf = "cipher.type === cipherType.Login" >
< div class = "box-content-row" appBoxRow >
< label for = "loginUsername" > {{'username' | i18n}}< / label >
< input id = "loginUsername" type = "text" name = "Login.Username" [ ( ngModel ) ] = " cipher . login . username " >
2018-06-06 23:25:57 +02:00
< / div >
2018-06-07 15:05:25 +02:00
< div class = "box-content-row box-content-row-flex" appBoxRow >
< div class = "row-main" >
< label for = "loginPassword" > {{'password' | i18n}}< / label >
< input id = "loginPassword" class = "monospaced" type = "{{showPassword ? 'text' : 'password'}}" name = "Login.Password" [ ( ngModel ) ] = " cipher . login . password " >
2018-06-07 05:23:14 +02:00
< / div >
2018-06-07 15:05:25 +02:00
< div class = "action-buttons" >
< button type = "button" # checkPasswordBtn class = "row-btn btn" appBlurClick title = "{{'checkPassword' | i18n}}" ( click ) = " checkPassword ( ) "
[appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading">
< i class = "fa fa-lg fa-check-circle" [ hidden ] = " checkPasswordBtn . loading " > < / i >
< i class = "fa fa-lg fa-spinner fa-spin" [ hidden ] = " ! checkPasswordBtn . loading " > < / i >
< / button >
< a class = "row-btn" href = "#" appStopClick appBlurClick title = "{{'toggleVisibility' | i18n}}" ( click ) = " togglePassword ( ) " >
< i class = "fa fa-lg" [ ngClass ] = " { ' fa-eye ' : ! showPassword , ' fa-eye-slash ' : showPassword } " > < / i >
< / a >
< a class = "row-btn" href = "#" appStopClick appBlurClick title = "{{'generatePassword' | i18n}}" ( click ) = " generatePassword ( ) " >
< i class = "fa fa-lg fa-refresh" > < / i >
< / a >
2018-06-07 05:23:14 +02:00
< / div >
2018-06-06 23:25:57 +02:00
< / div >
2018-06-07 15:05:25 +02:00
< div class = "box-content-row" appBoxRow >
< label for = "loginTotp" > {{'authenticatorKeyTotp' | i18n}}< / label >
< input id = "loginTotp" type = "text" name = "Login.Totp" class = "monospaced" [ ( ngModel ) ] = " cipher . login . totp " >
< / div >
2018-06-06 23:25:57 +02:00
< / div >
2018-06-07 15:05:25 +02:00
<!-- Card -->
< div * ngIf = "cipher.type === cipherType.Card" >
< div class = "box-content-row" appBoxRow >
< label for = "cardCardholderName" > {{'cardholderName' | i18n}}< / label >
< input id = "cardCardholderName" type = "text" name = "Card.CardCardholderName" [ ( ngModel ) ] = " cipher . card . cardholderName " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "cardNumber" > {{'number' | i18n}}< / label >
< input id = "cardNumber" type = "text" name = "Card.Number" [ ( ngModel ) ] = " cipher . card . number " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "cardBrand" > {{'brand' | i18n}}< / label >
< select id = "cardBrand" name = "Card.Brand" [ ( ngModel ) ] = " cipher . card . brand " >
< option * ngFor = "let o of cardBrandOptions" [ ngValue ] = " o . value " > {{o.name}}< / option >
< / select >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "cardExpMonth" > {{'expirationMonth' | i18n}}< / label >
< select id = "cardExpMonth" name = "Card.ExpMonth" [ ( ngModel ) ] = " cipher . card . expMonth " >
< option * ngFor = "let o of cardExpMonthOptions" [ ngValue ] = " o . value " > {{o.name}}< / option >
< / select >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "cardExpYear" > {{'expirationYear' | i18n}}< / label >
< input id = "cardExpYear" type = "text" name = "Card.ExpYear" [ ( ngModel ) ] = " cipher . card . expYear " placeholder = "{{'ex' | i18n}} 2019" >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "cardCode" > {{'securityCode' | i18n}}< / label >
< input id = "cardCode" type = "text" name = "Card.Code" [ ( ngModel ) ] = " cipher . card . code " >
< / div >
< / div >
<!-- Identity -->
< div * ngIf = "cipher.type === cipherType.Identity" >
< div class = "box-content-row" appBoxRow >
< label for = "idTitle" > {{'title' | i18n}}< / label >
< select id = "idTitle" name = "Identity.Title" [ ( ngModel ) ] = " cipher . identity . title " >
< option * ngFor = "let o of identityTitleOptions" [ ngValue ] = " o . value " > {{o.name}}< / option >
< / select >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idFirstName" > {{'firstName' | i18n}}< / label >
< input id = "idFirstName" type = "text" name = "Identity.FirstName" [ ( ngModel ) ] = " cipher . identity . firstName " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idMiddleName" > {{'middleName' | i18n}}< / label >
< input id = "idMiddleName" type = "text" name = "Identity.MiddleName" [ ( ngModel ) ] = " cipher . identity . middleName " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idLastName" > {{'lastName' | i18n}}< / label >
< input id = "idLastName" type = "text" name = "Identity.LastName" [ ( ngModel ) ] = " cipher . identity . lastName " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idUsername" > {{'username' | i18n}}< / label >
< input id = "idUsername" type = "text" name = "Identity.Username" [ ( ngModel ) ] = " cipher . identity . username " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idCompany" > {{'company' | i18n}}< / label >
< input id = "idCompany" type = "text" name = "Identity.Company" [ ( ngModel ) ] = " cipher . identity . company " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idSsn" > {{'ssn' | i18n}}< / label >
< input id = "idSsn" type = "text" name = "Identity.SSN" [ ( ngModel ) ] = " cipher . identity . ssn " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idPassportNumber" > {{'passportNumber' | i18n}}< / label >
< input id = "idPassportNumber" type = "text" name = "Identity.PassportNumber" [ ( ngModel ) ] = " cipher . identity . passportNumber " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idLicenseNumber" > {{'licenseNumber' | i18n}}< / label >
< input id = "idLicenseNumber" type = "text" name = "Identity.LicenseNumber" [ ( ngModel ) ] = " cipher . identity . licenseNumber " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idEmail" > {{'email' | i18n}}< / label >
< input id = "idEmail" type = "text" name = "Identity.Email" [ ( ngModel ) ] = " cipher . identity . email " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idPhone" > {{'phone' | i18n}}< / label >
< input id = "idPhone" type = "text" name = "Identity.Phone" [ ( ngModel ) ] = " cipher . identity . phone " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idAddress1" > {{'address1' | i18n}}< / label >
< input id = "idAddress1" type = "text" name = "Identity.Address1" [ ( ngModel ) ] = " cipher . identity . address1 " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idAddress2" > {{'address2' | i18n}}< / label >
< input id = "idAddress2" type = "text" name = "Identity.Address2" [ ( ngModel ) ] = " cipher . identity . address2 " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idAddress3" > {{'address3' | i18n}}< / label >
< input id = "idAddress3" type = "text" name = "Identity.Address3" [ ( ngModel ) ] = " cipher . identity . address3 " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idCity" > {{'cityTown' | i18n}}< / label >
< input id = "idCity" type = "text" name = "Identity.City" [ ( ngModel ) ] = " cipher . identity . city " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idState" > {{'stateProvince' | i18n}}< / label >
< input id = "idState" type = "text" name = "Identity.State" [ ( ngModel ) ] = " cipher . identity . state " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idPostalCode" > {{'zipPostalCode' | i18n}}< / label >
< input id = "idPostalCode" type = "text" name = "Identity.PostalCode" [ ( ngModel ) ] = " cipher . identity . postalCode " >
< / div >
< div class = "box-content-row" appBoxRow >
< label for = "idCountry" > {{'country' | i18n}}< / label >
< input id = "idCountry" type = "text" name = "Identity.Country" [ ( ngModel ) ] = " cipher . identity . country " >
2018-06-07 05:23:14 +02:00
< / div >
2018-06-06 23:25:57 +02:00
< / div >
2018-06-07 15:05:25 +02:00
< / div >
< / div >
< div class = "box" * ngIf = "cipher.type === cipherType.Login" >
< div class = "box-content" >
< ng-container * ngIf = "cipher.login.hasUris" >
< div class = "box-content-row box-content-row-multi" appBoxRow * ngFor = "let u of cipher.login.uris; let i = index" >
< a href = "#" appStopClick ( click ) = " removeUri ( u ) " title = "{{'remove' | i18n}}" >
< i class = "fa fa-minus-circle fa-lg" > < / i >
< / a >
< div class = "row-main" >
< label for = "loginUri{{i}}" > {{'uriPosition' | i18n : (i + 1)}}< / label >
< input id = "loginUri{{i}}" type = "text" name = "Login.Uris[{{i}}].Uri" [ ( ngModel ) ] = " u . uri " placeholder = "{{'ex' | i18n}} https://google.com" >
< label for = "loginUriMatch{{i}}" class = "sr-only" >
{{'matchDetection' | i18n}} {{(i + 1)}}
< / label >
< select id = "loginUriMatch{{i}}" name = "Login.Uris[{{i}}].Match" [ ( ngModel ) ] = " u . match " [ hidden ] = " u . showOptions = == false | | ( u . showOptions = = null & & u . match = = null ) "
(change)="loginUriMatchChanged(u)">
< option * ngFor = "let o of uriMatchOptions" [ ngValue ] = " o . value " > {{o.name}}< / option >
2018-06-07 05:23:14 +02:00
< / select >
< / div >
2018-06-07 15:05:25 +02:00
< div class = "action-buttons" >
< a class = "row-btn" href = "#" appStopClick appBlurClick title = "{{'toggleOptions' | i18n}}" ( click ) = " toggleUriOptions ( u ) " >
< i class = "fa fa-lg fa-cog" > < / i >
< / a >
2018-06-07 05:23:14 +02:00
< / div >
< / div >
2018-06-07 15:05:25 +02:00
< / ng-container >
< a href = "#" appStopClick appBlurClick ( click ) = " addUri ( ) " class = "box-content-row" >
< i class = "fa fa-plus-circle fa-fw fa-lg" > < / i > {{'newUri' | i18n}}
< / a >
< / div >
< / div >
< div class = "box" >
< div class = "box-content" >
< div class = "box-content-row" appBoxRow >
< label for = "folder" > {{'folder' | i18n}}< / label >
< select id = "folder" name = "FolderId" [ ( ngModel ) ] = " cipher . folderId " >
< option * ngFor = "let f of folders" [ ngValue ] = " f . id " > {{f.name}}< / option >
< / select >
2018-06-06 23:25:57 +02:00
< / div >
2018-06-07 15:05:25 +02:00
< div class = "box-content-row box-content-row-checkbox" appBoxRow >
< label for = "favorite" > {{'favorite' | i18n}}< / label >
< input id = "favorite" type = "checkbox" name = "Favorite" [ ( ngModel ) ] = " cipher . favorite " >
2018-06-06 23:25:57 +02:00
< / div >
2018-06-07 15:05:25 +02:00
< a class = "box-content-row box-content-row-flex text-default" href = "#" appStopClick appBlurClick ( click ) = " attachments ( ) " * ngIf = "editMode" >
< div class = "row-main" > {{'attachments' | i18n}}< / div >
< i class = "fa fa-chevron-right row-sub-icon" > < / i >
< / a >
< / div >
< / div >
< div class = "box" >
< div class = "box-header" >
< label for = "notes" > {{'notes' | i18n}}< / label >
< / div >
< div class = "box-content" >
< div class = "box-content-row" appBoxRow >
< textarea id = "notes" name = "Notes" rows = "6" [ ( ngModel ) ] = " cipher . notes " > < / textarea >
< / div >
< / div >
< / div >
< div class = "box" >
< div class = "box-header" >
{{'customFields' | i18n}}
< / div >
< div class = "box-content" >
< ng-container * ngIf = "cipher.hasFields" >
< div class = "box-content-row box-content-row-multi" appBoxRow * ngFor = "let f of cipher.fields; let i = index" [ ngClass ] = " { ' box-content-row-checkbox ' : f . type = == fieldType . Boolean } " >
< a href = "#" appStopClick ( click ) = " removeField ( f ) " title = "{{'remove' | i18n}}" >
< i class = "fa fa-minus-circle fa-lg" > < / i >
< / a >
< label for = "fieldName{{i}}" class = "sr-only" > {{'name' | i18n}}< / label >
< label for = "fieldValue{{i}}" class = "sr-only" > {{'value' | i18n}}< / label >
< div class = "row-main" >
< input id = "fieldName{{i}}" type = "text" name = "Field.Name{{i}}" [ ( ngModel ) ] = " f . name " class = "row-label" placeholder = "{{'name' | i18n}}" >
< input id = "fieldValue{{i}}" type = "text" name = "Field.Value{{i}}" [ ( ngModel ) ] = " f . value " * ngIf = "f.type === fieldType.Text" placeholder = "{{'value' | i18n}}" >
< input id = "fieldValue{{i}}" type = "{{f.showValue ? 'text' : 'password'}}" name = "Field.Value{{i}}" [ ( ngModel ) ] = " f . value " class = "monospaced"
*ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
< / div >
< input id = "fieldValue{{i}}" name = "Field.Value{{i}}" type = "checkbox" [ ( ngModel ) ] = " f . value " * ngIf = "f.type === fieldType.Boolean"
appTrueFalseValue trueValue="true" falseValue="false">
< div class = "action-buttons" * ngIf = "f.type === fieldType.Hidden" >
< a class = "row-btn" href = "#" appStopClick appBlurClick title = "{{'toggleVisibility' | i18n}}" ( click ) = " toggleFieldValue ( f ) " >
< i class = "fa fa-lg" [ ngClass ] = " { ' fa-eye ' : ! f . showValue , ' fa-eye-slash ' : f . showValue } " > < / i >
2018-06-07 05:23:14 +02:00
< / a >
< / div >
2018-06-06 23:25:57 +02:00
< / div >
2018-06-07 15:05:25 +02:00
< / ng-container >
< div class = "box-content-row" appBoxRow >
< a href = "#" appStopClick ( click ) = " addField ( ) " >
< i class = "fa fa-plus-circle fa-fw fa-lg" > < / i > {{'newCustomField' | i18n}}
< / a >
< label for = "addFieldType" class = "sr-only" > {{'type' | i18n}}< / label >
< select id = "addFieldType" name = "AddFieldType" [ ( ngModel ) ] = " addFieldType " class = "field-type" >
< option * ngFor = "let o of addFieldTypeOptions" [ ngValue ] = " o . value " > {{o.name}}< / option >
< / select >
2018-06-06 23:25:57 +02:00
< / div >
2018-06-07 05:23:14 +02:00
< / div >
< / div >
2018-06-07 15:05:25 +02:00
< / div >
< div class = "modal-footer" >
< button appBlurClick type = "submit" class = "primary" title = "{{'save' | i18n}}" [ disabled ] = " form . loading " >
< i class = "fa fa-save fa-lg fa-fw" [ hidden ] = " form . loading " > < / i >
< i class = "fa fa-spinner fa-spin fa-lg fa-fw" [ hidden ] = " ! form . loading " > < / i >
< / button >
< button appBlurClick type = "button" ( click ) = " cancel ( ) " title = "{{'cancel' | i18n}}" >
{{'cancel' | i18n}}
< / button >
< div class = "right" >
< button # deleteBtn appBlurClick type = "button" ( click ) = " delete ( ) " class = "danger" title = "{{'delete' | i18n}}" * ngIf = "editMode"
[disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
< i class = "fa fa-trash-o fa-lg fa-fw" [ hidden ] = " deleteBtn . loading " > < / i >
< i class = "fa fa-spinner fa-spin fa-lg fa-fw" [ hidden ] = " ! deleteBtn . loading " > < / i >
2018-06-07 05:23:14 +02:00
< / button >
2018-06-06 23:25:57 +02:00
< / div >
< / div >
2018-06-07 05:23:14 +02:00
< / form >
2018-06-06 23:25:57 +02:00
< / div >
2018-06-07 05:23:14 +02:00
< / div >