set defaults when adding

src/popup2/vault/add-edit.component.html

@@ -27,7 +27,7 @@
                 </div>
                 <div class="box-content-row" appBoxRow>
                     <label for="name">{{'name' | i18n}}</label>
-                    <input id="name" type="text" name="Name" [(ngModel)]="cipher.name" [appAutofocus]="!editMode">
+                    <input id="name" type="text" name="Name" [(ngModel)]="cipher.name">
                 </div>
                 <!-- Login -->
                 <div *ngIf="cipher.type === cipherType.Login">

src/popup2/vault/add-edit.component.ts

@@ -11,6 +11,8 @@ import {
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
+import { CipherType } from 'jslib/enums/cipherType';
+
 import { AuditService } from 'jslib/abstractions/audit.service';
 import { CipherService } from 'jslib/abstractions/cipher.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
@@ -40,9 +42,35 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit {
             if (params.cipherId) {
                 this.cipherId = params.cipherId;
             }
+            if (params.folderId) {
+                this.folderId = params.folderId;
+            }
+            if (params.type) {
+                const type = parseInt(params.type, null);
+                this.type = type;
+            }
             this.editMode = !params.cipherId;
             await this.load();
+
+            if (!this.editMode) {
+                if (params.name) {
+                    this.cipher.name = params.name;
+                }
+                if (params.uri) {
+                    this.cipher.login.uris[0].uri = params.uri;
+                }
+            }
         });
+
+        setTimeout(() => {
+            if (!this.editMode) {
+                if (this.cipher.name != null && this.cipher.name !== '') {
+                    document.getElementById('loginUsername').focus();
+                } else {
+                    document.getElementById('name').focus();
+                }
+            }
+        }, 200);
     }
 
     async submit(): Promise<boolean> {

src/popup2/vault/ciphers.component.ts

@@ -38,6 +38,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
     searchText: string;
     state: any;
     showAdd = true;
+    folderId: string = null;
+    type: CipherType = null;
 
     constructor(cipherService: CipherService, private route: ActivatedRoute,
         private router: Router, private location: Location,
@@ -52,8 +54,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
         this.route.queryParams.subscribe(async (params) => {
             if (params.type) {
                 this.searchPlaceholder = this.i18nService.t('searchType');
-                const t = parseInt(params.type, null);
+                this.type = parseInt(params.type, null);
-                switch (t) {
+                switch (this.type) {
                     case CipherType.Login:
                         this.groupingTitle = this.i18nService.t('logins');
                         break;
@@ -69,19 +71,19 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
                     default:
                         break;
                 }
-                await super.load((c) => c.type === t);
+                await super.load((c) => c.type === this.type);
             } else if (params.folderId) {
-                const folderId = params.folderId === 'none' ? null : params.folderId;
+                this.folderId = params.folderId === 'none' ? null : params.folderId;
                 this.searchPlaceholder = this.i18nService.t('searchFolder');
-                if (folderId != null) {
+                if (this.folderId != null) {
-                    const folder = await this.folderService.get(folderId);
+                    const folder = await this.folderService.get(this.folderId);
                     if (folder != null) {
                         this.groupingTitle = (await folder.decrypt()).name;
                     }
                 } else {
                     this.groupingTitle = this.i18nService.t('noneFolder');
                 }
-                await super.load((c) => c.folderId === folderId);
+                await super.load((c) => c.folderId === this.folderId);
             } else if (params.collectionId) {
                 this.showAdd = false;
                 this.searchPlaceholder = this.i18nService.t('searchCollection');
@@ -89,7 +91,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
                 if (collection != null) {
                     this.groupingTitle = (await collection.decrypt()).name;
                 }
-                await super.load((c) => c.collectionIds.indexOf(params.collectionId) > -1);
+                await super.load((c) => c.collectionIds != null && c.collectionIds.indexOf(params.collectionId) > -1);
             } else {
                 this.groupingTitle = this.i18nService.t('allItems');
                 await super.load();
@@ -131,7 +133,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
 
     addCipher() {
         super.addCipher();
-        this.router.navigate(['/add-cipher']);
+        this.router.navigate(['/add-cipher'], { queryParams: { folderId: this.folderId, type: this.type } });
     }
 
     back() {

src/popup2/vault/current-tab.component.html

@@ -17,7 +17,9 @@
     </div>
 </header>
 <content>
-    <p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
+    <div class="no-items" *ngIf="!loaded">
+        <i class="fa fa-spinner fa-spin fa-3x"></i>
+    </div>
     <ng-container *ngIf="loaded">
         <div class="box list" *ngIf="loginCiphers">
             <div class="box-header">
@@ -26,10 +28,17 @@
             </div>
             <div class="box-content">
                 <app-ciphers-list [ciphers]="loginCiphers" title="{{'autoFill' | i18n}}" [showView]="true"
-                                  (onSelected)="fillCipher($event)" (onView)="viewCipher($event)"></app-ciphers-list>
+                                  (onSelected)="fillCipher($event)" (onView)="viewCipher($event)"
+                                  *ngIf="loginCiphers.length"></app-ciphers-list>
+                <div class="box-content-row text-center padded no-hover" *ngIf="!loginCiphers.length">
+                    {{'autoFillInfo' | i18n}}
+                    <button type="button" class="btn primary link block" (click)="addCipher()">
+                        {{'addLogin' | i18n}}
+                    </button>
+                </div>
             </div>
         </div>
-        <div class="box list" *ngIf="cardCiphers">
+        <div class="box list" *ngIf="cardCiphers && cardCiphers.length">
             <div class="box-header">
                 {{'cards' | i18n}}
                 <span class="flex-right">{{cardCiphers.length}}</span>
@@ -39,7 +48,7 @@
                                   (onSelected)="fillCipher($event)" (onView)="viewCipher($event)"></app-ciphers-list>
             </div>
         </div>
-        <div class="box list" *ngIf="identityCiphers">
+        <div class="box list" *ngIf="identityCiphers && identityCiphers.length">
             <div class="box-header">
                 {{'identities' | i18n}}
                 <span class="flex-right">{{identityCiphers.length}}</span>

src/popup2/vault/current-tab.component.ts

@@ -98,7 +98,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
     }
 
     addCipher() {
-        this.router.navigate(['/add-cipher']);
+        this.router.navigate(['/add-cipher'], { queryParams: { name: this.domain, uri: this.url } });
     }
 
     viewCipher(cipher: CipherView) {

src/scss/box.scss

@@ -322,7 +322,7 @@
 
         &.no-hover .box-content-row, .box-content-row.no-hover {
             &:hover, &:focus {
-                background-color: initial;
+                background-color: initial !important;
             }
         }
     }
@@ -340,6 +340,11 @@
                 color: $text-color;
                 text-decoration: none;
 
+                &.padded {
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+                }
+
                 &:hover, &:focus, &.active {
                     background-color: $list-item-hover;
                 }

src/scss/buttons.scss

@@ -54,5 +54,9 @@
     &.link {
         border: none !important;
         background: none !important;
+
+        &:focus {
+            text-decoration: underline;
+        }
     }
 }