ui elements for add cipher
This commit is contained in:
Kyle Spearrin
parent
8840f07032
commit
f5459f4c85
|
|
@ -8,7 +8,7 @@ import { LoginComponent } from './accounts/login.component';
|
|||
import { VaultComponent } from './vault/vault.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: '/login', pathMatch: 'full' },
|
||||
{ path: '', redirectTo: '/vault', pathMatch: 'full' },
|
||||
{ path: 'login', component: LoginComponent },
|
||||
{ path: 'vault', component: VaultComponent },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,31 +1,163 @@
|
|||
<div class="content">
|
||||
<div class="inner-content">
|
||||
<div class="inner-content" *ngIf="cipher">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
{{'itemInformation' | i18n}}
|
||||
</div>
|
||||
<div class="box-content" *ngIf="cipher">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row">
|
||||
<span class="row-label">{{'name' | i18n}}</span>
|
||||
{{cipher.name}}
|
||||
</div>
|
||||
<div *ngIf="cipher.login">
|
||||
<div class="box-content-row">
|
||||
<span class="row-label">{{'uri' | i18n}}</span>
|
||||
{{cipher.login.uri}}
|
||||
<label for="type">{{'type' | 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 class="box-content-row">
|
||||
<span class="row-label">{{'username' | i18n}}</span>
|
||||
{{cipher.login.username}}
|
||||
<label for="name">{{'name' | i18n}}</label>
|
||||
<input id="name" type="text" name="Name" [(ngModel)]="cipher.name">
|
||||
</div>
|
||||
<!-- Login -->
|
||||
<div *ngIf="cipher.type === cipherType.Login">
|
||||
<div class="box-content-row">
|
||||
<label for="loginUri">{{'uri' | i18n}}</label>
|
||||
<input id="loginUri" type="text" name="Login.Uri" [(ngModel)]="cipher.login.uri">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<span class="row-label">{{'password' | i18n}}</span>
|
||||
{{cipher.login.password}}
|
||||
<label for="loginUsername">{{'username' | i18n}}</label>
|
||||
<input id="loginUsername" type="text" name="Login.Username"
|
||||
[(ngModel)]="cipher.login.username">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="loginPassword">{{'password' | i18n}}</label>
|
||||
<input id="loginPassword" type="text" name="Login.Password"
|
||||
[(ngModel)]="cipher.login.password">
|
||||
</div>
|
||||
<a class="box-content-row" href="#" appStopClick (click)="generatePassword()">
|
||||
{{'generatePassword' | i18n}}
|
||||
<i class="fa fa-chevron-right icon-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div *ngIf="cipher.type === cipherType.Card">
|
||||
<div class="box-content-row">
|
||||
<label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
|
||||
<input id="cardCardholderName" type="text" name="Card.CardCardholderName"
|
||||
[(ngModel)]="cipher.card.cardholderName">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="cardNumber">{{'number' | i18n}}</label>
|
||||
<input id="cardNumber" type="text" name="Card.Number" [(ngModel)]="cipher.card.number">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<label for="idFirstName">{{'firstName' | i18n}}</label>
|
||||
<input id="idFirstName" type="text" name="Identity.FirstName"
|
||||
[(ngModel)]="cipher.identity.firstName">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idMiddleName">{{'middleName' | i18n}}</label>
|
||||
<input id="idMiddleName" type="text" name="Identity.MiddleName"
|
||||
[(ngModel)]="cipher.identity.middleName">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idLastName">{{'lastName' | i18n}}</label>
|
||||
<input id="idLastName" type="text" name="Identity.LastName"
|
||||
[(ngModel)]="cipher.identity.lastName">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idUsername">{{'username' | i18n}}</label>
|
||||
<input id="idUsername" type="text" name="Identity.Username"
|
||||
[(ngModel)]="cipher.identity.username">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idCompany">{{'company' | i18n}}</label>
|
||||
<input id="idCompany" type="text" name="Identity.Company"
|
||||
[(ngModel)]="cipher.identity.company">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idSsn">{{'ssn' | i18n}}</label>
|
||||
<input id="idSsn" type="text" name="Identity.SSN" [(ngModel)]="cipher.identity.ssn">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
|
||||
<input id="idPassportNumber" type="text" name="Identity.PassportNumber"
|
||||
[(ngModel)]="cipher.identity.passportNumber">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
|
||||
<input id="idLicenseNumber" type="text" name="Identity.LicenseNumber"
|
||||
[(ngModel)]="cipher.identity.licenseNumber">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idEmail">{{'email' | i18n}}</label>
|
||||
<input id="idEmail" type="text" name="Identity.Email" [(ngModel)]="cipher.identity.email">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idPhone">{{'phone' | i18n}}</label>
|
||||
<input id="idPhone" type="text" name="Identity.Phone" [(ngModel)]="cipher.identity.phone">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idAddress1">{{'address1' | i18n}}</label>
|
||||
<input id="idAddress1" type="text" name="Identity.Address1"
|
||||
[(ngModel)]="cipher.identity.address1">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idAddress2">{{'address2' | i18n}}</label>
|
||||
<input id="idAddress2" type="text" name="Identity.Address2"
|
||||
[(ngModel)]="cipher.identity.address2">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idAddress3">{{'address3' | i18n}}</label>
|
||||
<input id="idAddress3" type="text" name="Identity.Address3"
|
||||
[(ngModel)]="cipher.identity.address3">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idCity">{{'cityTown' | i18n}}</label>
|
||||
<input id="idCity" type="text" name="Identity.City" [(ngModel)]="cipher.identity.city">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idState">{{'stateProvince' | i18n}}</label>
|
||||
<input id="idState" type="text" name="Identity.State" [(ngModel)]="cipher.identity.state">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idPostalCode">{{'zipPostalCode' | i18n}}</label>
|
||||
<input id="idPostalCode" type="text" name="Identity.PostalCode"
|
||||
[(ngModel)]="cipher.identity.postalCode">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="idCountry">{{'country' | i18n}}</label>
|
||||
<input id="idCountry" type="text" name="Identity.Country"
|
||||
[(ngModel)]="cipher.identity.country">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
Some footer information for add.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,16 @@ import {
|
|||
} from '@angular/core';
|
||||
|
||||
import { CipherType } from 'jslib/enums/cipherType';
|
||||
import { FieldType } from 'jslib/enums/fieldType';
|
||||
import { SecureNoteType } from 'jslib/enums/secureNoteType';
|
||||
|
||||
import { CipherService } from 'jslib/abstractions/cipher.service';
|
||||
import { FolderService } from 'jslib/abstractions/folder.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
|
||||
import { CardView } from 'jslib/models/view/cardView';
|
||||
import { CipherView } from 'jslib/models/view/cipherView';
|
||||
import { FolderView } from 'jslib/models/view/folderView';
|
||||
import { IdentityView } from 'jslib/models/view/identityView';
|
||||
import { LoginView } from 'jslib/models/view/loginView';
|
||||
import { SecureNoteView } from 'jslib/models/view/secureNoteView';
|
||||
|
|
@ -24,8 +28,56 @@ import { SecureNoteView } from 'jslib/models/view/secureNoteView';
|
|||
export class AddComponent implements OnChanges {
|
||||
@Input() folderId: string;
|
||||
cipher: CipherView;
|
||||
folders: FolderView[];
|
||||
cipherType = CipherType;
|
||||
fieldType = FieldType;
|
||||
typeOptions: any[];
|
||||
cardBrandOptions: any[];
|
||||
cardExpMonthOptions: any[];
|
||||
identityTitleOptions: any[];
|
||||
|
||||
constructor(private cipherService: CipherService) {
|
||||
constructor(private cipherService: CipherService, private folderService: FolderService,
|
||||
private i18nService: I18nService) {
|
||||
this.typeOptions = [
|
||||
{ name: i18nService.t('typeLogin'), value: CipherType.Login },
|
||||
{ name: i18nService.t('typeCard'), value: CipherType.Card },
|
||||
{ name: i18nService.t('typeIdentity'), value: CipherType.Identity },
|
||||
{ name: i18nService.t('typeSecureNote'), value: CipherType.SecureNote },
|
||||
];
|
||||
this.cardBrandOptions = [
|
||||
{ name: '-- ' + i18nService.t('select') + ' --', value: null },
|
||||
{ name: 'Visa', value: 'Visa' },
|
||||
{ name: 'Mastercard', value: 'Mastercard' },
|
||||
{ name: 'American Express', value: 'Amex' },
|
||||
{ name: 'Discover', value: 'Discover' },
|
||||
{ name: 'Diners Club', value: 'Diners Club' },
|
||||
{ name: 'JCB', value: 'JCB' },
|
||||
{ name: 'Maestro', value: 'Maestro' },
|
||||
{ name: 'UnionPay', value: 'UnionPay' },
|
||||
{ name: i18nService.t('other'), value: 'Other' },
|
||||
];
|
||||
this.cardExpMonthOptions = [
|
||||
{ name: '-- ' + i18nService.t('select') + ' --', value: null },
|
||||
{ name: '01 - ' + i18nService.t('january'), value: '1' },
|
||||
{ name: '02 - ' + i18nService.t('february'), value: '2' },
|
||||
{ name: '03 - ' + i18nService.t('march'), value: '3' },
|
||||
{ name: '04 - ' + i18nService.t('april'), value: '4' },
|
||||
{ name: '05 - ' + i18nService.t('may'), value: '5' },
|
||||
{ name: '06 - ' + i18nService.t('june'), value: '6' },
|
||||
{ name: '07 - ' + i18nService.t('july'), value: '7' },
|
||||
{ name: '08 - ' + i18nService.t('august'), value: '8' },
|
||||
{ name: '09 - ' + i18nService.t('september'), value: '9' },
|
||||
{ name: '10 - ' + i18nService.t('october'), value: '10' },
|
||||
{ name: '11 - ' + i18nService.t('november'), value: '11' },
|
||||
{ name: '12 - ' + i18nService.t('december'), value: '12' },
|
||||
];
|
||||
this.identityTitleOptions = [
|
||||
{ name: '-- ' + i18nService.t('select') + ' --', value: null },
|
||||
{ name: i18nService.t('mr'), value: i18nService.t('mr') },
|
||||
{ name: i18nService.t('mrs'), value: i18nService.t('mrs') },
|
||||
{ name: i18nService.t('ms'), value: i18nService.t('ms') },
|
||||
{ name: i18nService.t('dr'), value: i18nService.t('dr') },
|
||||
];
|
||||
}
|
||||
|
||||
async ngOnChanges() {
|
||||
|
|
@ -37,5 +89,7 @@ export class AddComponent implements OnChanges {
|
|||
this.cipher.identity = new IdentityView();
|
||||
this.cipher.secureNote = new SecureNoteView();
|
||||
this.cipher.secureNote.type = SecureNoteType.Generic;
|
||||
|
||||
this.folders = await this.folderService.getAllDecrypted();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -142,5 +142,107 @@
|
|||
},
|
||||
"error": {
|
||||
"message": "Error"
|
||||
},
|
||||
"january": {
|
||||
"message": "January"
|
||||
},
|
||||
"february": {
|
||||
"message": "February"
|
||||
},
|
||||
"march": {
|
||||
"message": "March"
|
||||
},
|
||||
"april": {
|
||||
"message": "April"
|
||||
},
|
||||
"may": {
|
||||
"message": "May"
|
||||
},
|
||||
"june": {
|
||||
"message": "June"
|
||||
},
|
||||
"july": {
|
||||
"message": "July"
|
||||
},
|
||||
"august": {
|
||||
"message": "August"
|
||||
},
|
||||
"september": {
|
||||
"message": "September"
|
||||
},
|
||||
"october": {
|
||||
"message": "October"
|
||||
},
|
||||
"november": {
|
||||
"message": "November"
|
||||
},
|
||||
"december": {
|
||||
"message": "December"
|
||||
},
|
||||
"ex": {
|
||||
"message": "ex."
|
||||
},
|
||||
"title": {
|
||||
"message": "Title"
|
||||
},
|
||||
"mr": {
|
||||
"message": "Mr"
|
||||
},
|
||||
"mrs": {
|
||||
"message": "Mrs"
|
||||
},
|
||||
"ms": {
|
||||
"message": "Ms"
|
||||
},
|
||||
"dr": {
|
||||
"message": "Dr"
|
||||
},
|
||||
"expirationMonth": {
|
||||
"message": "Expiration Month"
|
||||
},
|
||||
"expirationYear": {
|
||||
"message": "Expiration Year"
|
||||
},
|
||||
"select": {
|
||||
"message": "Select"
|
||||
},
|
||||
"other": {
|
||||
"message": "Other"
|
||||
},
|
||||
"generatePassword": {
|
||||
"message": "Generate Password"
|
||||
},
|
||||
"type": {
|
||||
"message": "Type"
|
||||
},
|
||||
"firstName": {
|
||||
"message": "First Name"
|
||||
},
|
||||
"middleName": {
|
||||
"message": "Middle Name"
|
||||
},
|
||||
"lastName": {
|
||||
"message": "Last Name"
|
||||
},
|
||||
"address1": {
|
||||
"message": "Address 1"
|
||||
},
|
||||
"address2": {
|
||||
"message": "Address 2"
|
||||
},
|
||||
"address3": {
|
||||
"message": "Address 3"
|
||||
},
|
||||
"cityTown": {
|
||||
"message": "City / Town"
|
||||
},
|
||||
"stateProvince": {
|
||||
"message": "State / Province"
|
||||
},
|
||||
"zipPostalCode": {
|
||||
"message": "Zip / Postal Code"
|
||||
},
|
||||
"country": {
|
||||
"message": "Country"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -635,7 +635,7 @@ a {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
.row-label, label {
|
||||
font-size: $font-size-small;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
|
|
@ -644,7 +644,24 @@ a {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
input:not([type="checkbox"]), select, textarea {
|
||||
border: none;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
font-size: $font-size-base;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: lighten($gray-light, 35%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
|
|
|
|||
Loading…
Reference in New Issue