From 41d6b6bd2168ae65cdb6e3ae28e4e16b633fe09b Mon Sep 17 00:00:00 2001
From: dgoodman-bw <109169446+dgoodman-bw@users.noreply.github.com>
Date: Tue, 25 Oct 2022 12:24:21 -0700
Subject: [PATCH] Ps 976 moving of read only organization collection items to
 different folder not possible (#3474)

* PS-976 - when user has cipher readonly permissions, prevent user from editing cipher fields and make separate api call that only updates Favorite and Folder values

* PS-976 - in the readonly edit cipher view, hide non-operable buttons and display select values as readonly input text

* PS-976 - update failing test

* PS-976 - split cipher saveWithServer call into Create and Update calls

* PS-976 - replace property with function call to get the card expiration month for the readonly view

* MM-976 - when user has readonly permissions hide "delete" button on View Item view, hide generate username/password buttons on Edit Item view

* PS-976 - rename cipherPartialRequest file to align with new naming convention
---
 .../src/background/notification.background.ts |   4 +-
 .../add-edit-custom-fields.component.html     |  18 ++-
 .../src/popup/vault/add-edit.component.html   | 107 +++++++++++---
 .../src/popup/vault/view.component.html       |   8 +-
 .../browser/src/popup/vault/view.component.ts |   2 +-
 apps/cli/src/commands/create.command.ts       |   2 +-
 apps/cli/src/commands/edit.command.ts         |   2 +-
 .../add-edit-custom-fields.component.html     |  14 +-
 .../src/app/vault/add-edit.component.html     | 107 ++++++++++++--
 .../desktop/src/app/vault/view.component.html |   2 +-
 .../encryptedMessageHandlerService.ts         |   4 +-
 .../add-edit-custom-fields.component.html     |  11 +-
 .../web/src/app/vault/add-edit.component.html | 136 +++++++++++++-----
 .../src/components/add-edit.component.ts      |   8 +-
 libs/common/src/abstractions/api.service.ts   |   2 +
 .../common/src/abstractions/cipher.service.ts |   3 +-
 .../models/request/cipher-partial.request.ts  |  11 ++
 libs/common/src/services/api.service.ts       |   6 +
 libs/common/src/services/cipher.service.ts    |  31 ++--
 19 files changed, 382 insertions(+), 96 deletions(-)
 create mode 100644 libs/common/src/models/request/cipher-partial.request.ts

diff --git a/apps/browser/src/background/notification.background.ts b/apps/browser/src/background/notification.background.ts
index 569a77abe7..64b7ca8a7e 100644
--- a/apps/browser/src/background/notification.background.ts
+++ b/apps/browser/src/background/notification.background.ts
@@ -394,7 +394,7 @@ export default class NotificationBackground {
     }
 
     const cipher = await this.cipherService.encrypt(model);
-    await this.cipherService.saveWithServer(cipher);
+    await this.cipherService.createWithServer(cipher);
   }
 
   private async getDecryptedCipherById(cipherId: string) {
@@ -409,7 +409,7 @@ export default class NotificationBackground {
     if (cipher != null && cipher.type === CipherType.Login) {
       cipher.login.password = newPassword;
       const newCipher = await this.cipherService.encrypt(cipher);
-      await this.cipherService.saveWithServer(newCipher);
+      await this.cipherService.updateWithServer(newCipher);
     }
   }
 
diff --git a/apps/browser/src/popup/vault/add-edit-custom-fields.component.html b/apps/browser/src/popup/vault/add-edit-custom-fields.component.html
index def0af3003..8464655c20 100644
--- a/apps/browser/src/popup/vault/add-edit-custom-fields.component.html
+++ b/apps/browser/src/popup/vault/add-edit-custom-fields.component.html
@@ -19,6 +19,7 @@
           appStopClick
           (click)="removeField(f)"
           appA11yTitle="{{ 'remove' | i18n }}"
+          *ngIf="!(!cipher.edit && editMode)"
         >
           <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
         </button>
@@ -33,6 +34,7 @@
             class="row-label"
             placeholder="{{ 'name' | i18n }}"
             appInputVerbatim
+            [readonly]="!cipher.edit && editMode"
           />
           <!-- Text -->
           <input
@@ -44,6 +46,7 @@
             placeholder="{{ 'value' | i18n }}"
             appInputVerbatim
             attr.aria-describedby="fieldName{{ i }}"
+            [readonly]="!cipher.edit && editMode"
           />
           <!-- Hidden -->
           <input
@@ -57,6 +60,7 @@
             placeholder="{{ 'value' | i18n }}"
             [disabled]="!cipher.viewPassword && !f.newField"
             attr.aria-describedby="fieldName{{ i }}"
+            [readonly]="!cipher.edit && editMode"
           />
           <!-- Linked -->
           <select
@@ -80,6 +84,7 @@
           trueValue="true"
           falseValue="false"
           attr.aria-describedby="fieldName{{ i }}"
+          [readonly]="!cipher.edit && editMode"
         />
         <div
           class="action-buttons"
@@ -100,13 +105,22 @@
             ></i>
           </button>
         </div>
-        <div class="drag-handle" appA11yTitle="{{ 'dragToSort' | i18n }}" cdkDragHandle>
+        <div
+          class="drag-handle"
+          appA11yTitle="{{ 'dragToSort' | i18n }}"
+          *ngIf="!(!cipher.edit && editMode)"
+          cdkDragHandle
+        >
           <i class="bwi bwi-hamburger" aria-hidden="true"></i>
         </div>
       </div>
     </div>
     <!-- Add new custom field -->
-    <div class="box-content-row box-content-row-newmulti" appBoxRow>
+    <div
+      class="box-content-row box-content-row-newmulti"
+      *ngIf="!(!cipher.edit && editMode)"
+      appBoxRow
+    >
       <button type="button" appStopClick (click)="addField()">
         <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
         {{ "newCustomField" | i18n }}
diff --git a/apps/browser/src/popup/vault/add-edit.component.html b/apps/browser/src/popup/vault/add-edit.component.html
index 95c8644e03..77c94c8108 100644
--- a/apps/browser/src/popup/vault/add-edit.component.html
+++ b/apps/browser/src/popup/vault/add-edit.component.html
@@ -30,7 +30,13 @@
         </div>
         <div class="box-content-row" appBoxRow>
           <label for="name">{{ "name" | i18n }}</label>
-          <input id="name" type="text" name="Name" [(ngModel)]="cipher.name" />
+          <input
+            id="name"
+            type="text"
+            name="Name"
+            [(ngModel)]="cipher.name"
+            [readonly]="!cipher.edit && editMode"
+          />
         </div>
         <!-- Login -->
         <div *ngIf="cipher.type === cipherType.Login">
@@ -44,6 +50,7 @@
                 [(ngModel)]="cipher.login.username"
                 inputmode="email"
                 appInputVerbatim
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="action-buttons">
@@ -53,6 +60,7 @@
                 appStopClick
                 appA11yTitle="{{ 'generateUsername' | i18n }}"
                 (click)="generateUsername()"
+                *ngIf="!(!cipher.edit && editMode)"
               >
                 <i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
               </button>
@@ -69,6 +77,7 @@
                 [(ngModel)]="cipher.login.password"
                 appInputVerbatim
                 [disabled]="!cipher.viewPassword"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="action-buttons">
@@ -114,7 +123,7 @@
                 appStopClick
                 appA11yTitle="{{ 'generatePassword' | i18n }}"
                 (click)="generatePassword()"
-                *ngIf="cipher.viewPassword"
+                *ngIf="cipher.viewPassword && !(!cipher.edit && editMode)"
               >
                 <i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
               </button>
@@ -130,6 +139,7 @@
               [(ngModel)]="cipher.login.totp"
               appInputVerbatim
               [disabled]="!cipher.viewPassword"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
         </div>
@@ -142,6 +152,7 @@
               type="text"
               name="Card.CardCardholderName"
               [(ngModel)]="cipher.card.cardholderName"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row box-content-row-flex" appBoxRow>
@@ -154,6 +165,7 @@
                 name="Card.Number"
                 [(ngModel)]="cipher.card.number"
                 appInputVerbatim
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="action-buttons">
@@ -175,17 +187,39 @@
           </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>
+            <span *ngIf="!(!cipher.edit && editMode); else readonlyCardBrand">
+              <select id="cardBrand" name="Card.Brand" [(ngModel)]="cipher.card.brand">
+                <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">{{ o.name }}</option>
+              </select>
+            </span>
+            <ng-template #readonlyCardBrand>
+              <input
+                id="cardBrand"
+                name="Card.Brand"
+                type="text"
+                [readonly]="true"
+                [value]="cipher.card.brand"
+              />
+            </ng-template>
           </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>
+            <span *ngIf="!(!cipher.edit && editMode); else readonlyCardExpMonth">
+              <select id="cardExpMonth" name="Card.ExpMonth" [(ngModel)]="cipher.card.expMonth">
+                <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">
+                  {{ o.name }}
+                </option>
+              </select>
+            </span>
+            <ng-template #readonlyCardExpMonth>
+              <input
+                id="cardExpMonth"
+                name="Card.ExpMonth"
+                type="text"
+                [readonly]="true"
+                [value]="getCardExpMonthDisplay()"
+              />
+            </ng-template>
           </div>
           <div class="box-content-row" appBoxRow>
             <label for="cardExpYear">{{ "expirationYear" | i18n }}</label>
@@ -195,6 +229,7 @@
               name="Card.ExpYear"
               [(ngModel)]="cipher.card.expYear"
               placeholder="{{ 'ex' | i18n }} {{ currentDate | date: 'yyyy' }}"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row box-content-row-flex" appBoxRow>
@@ -207,6 +242,7 @@
                 name="Card.Code"
                 [(ngModel)]="cipher.card.code"
                 appInputVerbatim
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="action-buttons">
@@ -231,11 +267,22 @@
         <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>
+            <span *ngIf="!(!cipher.edit && editMode); else readonlyIdTitle">
+              <select id="idTitle" name="Identity.Title" [(ngModel)]="cipher.identity.title">
+                <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">
+                  {{ o.name }}
+                </option>
+              </select>
+            </span>
+            <ng-template #readonlyIdTitle>
+              <input
+                id="idTitle"
+                name="Identity.Title"
+                type="text"
+                [readonly]="true"
+                [value]="cipher.identity.title"
+              />
+            </ng-template>
           </div>
           <div class="box-content-row" appBoxRow>
             <label for="idFirstName">{{ "firstName" | i18n }}</label>
@@ -244,6 +291,7 @@
               type="text"
               name="Identity.FirstName"
               [(ngModel)]="cipher.identity.firstName"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -253,6 +301,7 @@
               type="text"
               name="Identity.MiddleName"
               [(ngModel)]="cipher.identity.middleName"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -262,6 +311,7 @@
               type="text"
               name="Identity.LastName"
               [(ngModel)]="cipher.identity.lastName"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -272,6 +322,7 @@
               name="Identity.Username"
               [(ngModel)]="cipher.identity.username"
               appInputVerbatim
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -281,6 +332,7 @@
               type="text"
               name="Identity.Company"
               [(ngModel)]="cipher.identity.company"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -291,6 +343,7 @@
               name="Identity.SSN"
               [(ngModel)]="cipher.identity.ssn"
               appInputVerbatim
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -301,6 +354,7 @@
               name="Identity.PassportNumber"
               [(ngModel)]="cipher.identity.passportNumber"
               appInputVerbatim
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -311,6 +365,7 @@
               name="Identity.LicenseNumber"
               [(ngModel)]="cipher.identity.licenseNumber"
               appInputVerbatim
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -321,6 +376,7 @@
               name="Identity.Email"
               [(ngModel)]="cipher.identity.email"
               appInputVerbatim
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -330,6 +386,7 @@
               type="text"
               name="Identity.Phone"
               [(ngModel)]="cipher.identity.phone"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -339,6 +396,7 @@
               type="text"
               name="Identity.Address1"
               [(ngModel)]="cipher.identity.address1"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -348,6 +406,7 @@
               type="text"
               name="Identity.Address2"
               [(ngModel)]="cipher.identity.address2"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -357,6 +416,7 @@
               type="text"
               name="Identity.Address3"
               [(ngModel)]="cipher.identity.address3"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -366,6 +426,7 @@
               type="text"
               name="Identity.City"
               [(ngModel)]="cipher.identity.city"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -375,6 +436,7 @@
               type="text"
               name="Identity.State"
               [(ngModel)]="cipher.identity.state"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -384,6 +446,7 @@
               type="text"
               name="Identity.PostalCode"
               [(ngModel)]="cipher.identity.postalCode"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="box-content-row" appBoxRow>
@@ -393,6 +456,7 @@
               type="text"
               name="Identity.Country"
               [(ngModel)]="cipher.identity.country"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
         </div>
@@ -484,6 +548,7 @@
           appStopClick
           (click)="addUri()"
           class="box-content-row box-content-row-newmulti"
+          *ngIf="!(!cipher.edit && editMode)"
         >
           <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
         </button>
@@ -535,6 +600,7 @@
             name="PasswordPrompt"
             [ngModel]="reprompt"
             (change)="repromptChanged()"
+            [disabled]="!cipher.edit && editMode"
           />
         </div>
         <button
@@ -574,11 +640,18 @@
       </h2>
       <div class="box-content">
         <div class="box-content-row" appBoxRow>
-          <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
+          <textarea
+            id="notes"
+            name="Notes"
+            rows="6"
+            [(ngModel)]="cipher.notes"
+            [readonly]="!cipher.edit && editMode"
+          ></textarea>
         </div>
       </div>
     </div>
     <app-vault-add-edit-custom-fields
+      *ngIf="!(!cipher.hasFields && !cipher.edit && editMode)"
       [cipher]="cipher"
       [thisCipherType]="cipher.type"
       [editMode]="editMode"
@@ -628,7 +701,7 @@
         </div>
       </div>
     </div>
-    <div class="box list" *ngIf="editMode && !cloneMode">
+    <div class="box list" *ngIf="editMode && !cloneMode && !(!cipher.edit && editMode)">
       <div class="box-content single-line">
         <button
           type="button"
diff --git a/apps/browser/src/popup/vault/view.component.html b/apps/browser/src/popup/vault/view.component.html
index 3857dc2ba0..73d75b662b 100644
--- a/apps/browser/src/popup/vault/view.component.html
+++ b/apps/browser/src/popup/vault/view.component.html
@@ -620,7 +620,13 @@
           <span>{{ "restoreItem" | i18n }}</span>
         </div>
       </button>
-      <button type="button" class="box-content-row" appStopClick (click)="delete()">
+      <button
+        type="button"
+        class="box-content-row"
+        appStopClick
+        (click)="delete()"
+        *ngIf="cipher.edit"
+      >
         <div class="row-main text-danger">
           <div class="icon text-danger" aria-hidden="true">
             <i class="bwi bwi-trash bwi-lg bwi-fw"></i>
diff --git a/apps/browser/src/popup/vault/view.component.ts b/apps/browser/src/popup/vault/view.component.ts
index 905b515f54..75ab73b6dd 100644
--- a/apps/browser/src/popup/vault/view.component.ts
+++ b/apps/browser/src/popup/vault/view.component.ts
@@ -218,7 +218,7 @@ export class ViewComponent extends BaseViewComponent {
 
       try {
         const cipher: Cipher = await this.cipherService.encrypt(this.cipher);
-        await this.cipherService.saveWithServer(cipher);
+        await this.cipherService.updateWithServer(cipher);
         this.platformUtilsService.showToast(
           "success",
           null,
diff --git a/apps/cli/src/commands/create.command.ts b/apps/cli/src/commands/create.command.ts
index 2cebe22508..334573b3df 100644
--- a/apps/cli/src/commands/create.command.ts
+++ b/apps/cli/src/commands/create.command.ts
@@ -77,7 +77,7 @@ export class CreateCommand {
   private async createCipher(req: CipherExport) {
     const cipher = await this.cipherService.encrypt(CipherExport.toView(req));
     try {
-      await this.cipherService.saveWithServer(cipher);
+      await this.cipherService.createWithServer(cipher);
       const newCipher = await this.cipherService.get(cipher.id);
       const decCipher = await newCipher.decrypt();
       const res = new CipherResponse(decCipher);
diff --git a/apps/cli/src/commands/edit.command.ts b/apps/cli/src/commands/edit.command.ts
index 6c3dd9d2ef..a8ed1b0f28 100644
--- a/apps/cli/src/commands/edit.command.ts
+++ b/apps/cli/src/commands/edit.command.ts
@@ -84,7 +84,7 @@ export class EditCommand {
     cipherView = CipherExport.toView(req, cipherView);
     const encCipher = await this.cipherService.encrypt(cipherView);
     try {
-      await this.cipherService.saveWithServer(encCipher);
+      await this.cipherService.updateWithServer(encCipher);
       const updatedCipher = await this.cipherService.get(cipher.id);
       const decCipher = await updatedCipher.decrypt();
       const res = new CipherResponse(decCipher);
diff --git a/apps/desktop/src/app/vault/add-edit-custom-fields.component.html b/apps/desktop/src/app/vault/add-edit-custom-fields.component.html
index 7afbab45b3..c7efaad70b 100644
--- a/apps/desktop/src/app/vault/add-edit-custom-fields.component.html
+++ b/apps/desktop/src/app/vault/add-edit-custom-fields.component.html
@@ -17,6 +17,7 @@
           appStopClick
           (click)="removeField(f)"
           appA11yTitle="{{ 'remove' | i18n }}"
+          *ngIf="!(!cipher.edit && editMode)"
         >
           <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
         </button>
@@ -31,6 +32,7 @@
             class="row-label"
             placeholder="{{ 'name' | i18n }}"
             appInputVerbatim
+            [readonly]="!cipher.edit && editMode"
           />
           <!-- Text -->
           <input
@@ -42,6 +44,7 @@
             placeholder="{{ 'value' | i18n }}"
             appInputVerbatim
             attr.aria-describedby="fieldName{{ i }}"
+            [readonly]="!cipher.edit && editMode"
           />
           <!-- Password -->
           <input
@@ -55,6 +58,7 @@
             [disabled]="!cipher.viewPassword && !f.newField"
             appInputVerbatim
             attr.aria-describedby="fieldName{{ i }}"
+            [readonly]="!cipher.edit && editMode"
           />
           <!-- Linked -->
           <select
@@ -78,6 +82,7 @@
           trueValue="true"
           falseValue="false"
           attr.aria-describedby="fieldName{{ i }}"
+          [readonly]="!cipher.edit && editMode"
         />
         <div
           class="action-buttons"
@@ -99,13 +104,18 @@
             ></i>
           </button>
         </div>
-        <div class="drag-handle" appA11yTitle="{{ 'dragToSort' | i18n }}" cdkDragHandle>
+        <div
+          class="drag-handle"
+          appA11yTitle="{{ 'dragToSort' | i18n }}"
+          *ngIf="!(!cipher.edit && editMode)"
+          cdkDragHandle
+        >
           <i class="bwi bwi-hamburger" aria-hidden="true"></i>
         </div>
       </div>
     </div>
     <!-- Add new custom field -->
-    <div class="box-content-row" appBoxRow>
+    <div class="box-content-row" *ngIf="!(!cipher.edit && editMode)" appBoxRow>
       <button type="button" appStopClick (click)="addField()">
         <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
         {{ "newCustomField" | i18n }}
diff --git a/apps/desktop/src/app/vault/add-edit.component.html b/apps/desktop/src/app/vault/add-edit.component.html
index d0e8581362..25de9f6f7b 100644
--- a/apps/desktop/src/app/vault/add-edit.component.html
+++ b/apps/desktop/src/app/vault/add-edit.component.html
@@ -23,6 +23,7 @@
               name="Name"
               [(ngModel)]="cipher.name"
               [appAutofocus]="!editMode"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <!-- Login -->
@@ -36,6 +37,7 @@
                   name="Login.Username"
                   [(ngModel)]="cipher.login.username"
                   appInputVerbatim
+                  [readonly]="!cipher.edit && editMode"
                 />
               </div>
               <div class="action-buttons">
@@ -45,6 +47,7 @@
                   appStopClick
                   appA11yTitle="{{ 'generateUsername' | i18n }}"
                   (click)="generateUsername()"
+                  *ngIf="!(!cipher.edit && editMode)"
                 >
                   <i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
                 </button>
@@ -60,6 +63,7 @@
                   name="Login.Password"
                   [(ngModel)]="cipher.login.password"
                   [disabled]="!cipher.viewPassword"
+                  [readonly]="!cipher.edit && editMode"
                   appInputVerbatim
                 />
               </div>
@@ -104,6 +108,7 @@
                   appStopClick
                   appA11yTitle="{{ 'generatePassword' | i18n }}"
                   (click)="generatePassword()"
+                  *ngIf="!(!cipher.edit && editMode)"
                 >
                   <i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
                 </button>
@@ -118,6 +123,7 @@
                 class="monospaced"
                 [(ngModel)]="cipher.login.totp"
                 [disabled]="!cipher.viewPassword"
+                [readonly]="!cipher.edit && editMode"
                 appInputVerbatim
               />
             </div>
@@ -131,6 +137,7 @@
                 type="text"
                 name="Card.CardCardholderName"
                 [(ngModel)]="cipher.card.cardholderName"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row box-content-row-flex" appBoxRow>
@@ -143,6 +150,7 @@
                   name="Card.Number"
                   [(ngModel)]="cipher.card.number"
                   appInputVerbatim
+                  [readonly]="!cipher.edit && editMode"
                 />
               </div>
               <div class="action-buttons">
@@ -164,17 +172,41 @@
             </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>
+              <span *ngIf="!(!cipher.edit && editMode); else readonlyCardBrand">
+                <select id="cardBrand" name="Card.Brand" [(ngModel)]="cipher.card.brand">
+                  <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">
+                    {{ o.name }}
+                  </option>
+                </select>
+              </span>
+              <ng-template #readonlyCardBrand>
+                <input
+                  id="cardBrand"
+                  name="Card.Brand"
+                  type="text"
+                  [readonly]="true"
+                  [value]="cipher.card.brand"
+                />
+              </ng-template>
             </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>
+              <span *ngIf="!(!cipher.edit && editMode); else readonlyCardExpMonth">
+                <select id="cardExpMonth" name="Card.ExpMonth" [(ngModel)]="cipher.card.expMonth">
+                  <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">
+                    {{ o.name }}
+                  </option>
+                </select>
+              </span>
+              <ng-template #readonlyCardExpMonth>
+                <input
+                  id="cardExpMonth"
+                  type="text"
+                  name="Card.ExpMonth"
+                  [readonly]="true"
+                  [value]="getCardExpMonthDisplay()"
+                />
+              </ng-template>
             </div>
             <div class="box-content-row" appBoxRow>
               <label for="cardExpYear">{{ "expirationYear" | i18n }}</label>
@@ -184,6 +216,7 @@
                 name="Card.ExpYear"
                 [(ngModel)]="cipher.card.expYear"
                 placeholder="{{ 'ex' | i18n }} {{ currentDate | date: 'yyyy' }}"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row box-content-row-flex" appBoxRow>
@@ -196,6 +229,7 @@
                   name="Card.Code"
                   [(ngModel)]="cipher.card.code"
                   appInputVerbatim
+                  [readonly]="!cipher.edit && editMode"
                 />
               </div>
               <div class="action-buttons">
@@ -220,11 +254,22 @@
           <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>
+              <span *ngIf="!(!cipher.edit && editMode); else readonlyIdTitle">
+                <select id="idTitle" name="Identity.Title" [(ngModel)]="cipher.identity.title">
+                  <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">
+                    {{ o.name }}
+                  </option>
+                </select>
+              </span>
+              <ng-template #readonlyIdTitle>
+                <input
+                  id="idTitle"
+                  name="Identity.Title"
+                  type="text"
+                  [readonly]="true"
+                  [value]="cipher.identity.title"
+                />
+              </ng-template>
             </div>
             <div class="box-content-row" appBoxRow>
               <label for="idFirstName">{{ "firstName" | i18n }}</label>
@@ -233,6 +278,7 @@
                 type="text"
                 name="Identity.FirstName"
                 [(ngModel)]="cipher.identity.firstName"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -242,6 +288,7 @@
                 type="text"
                 name="Identity.MiddleName"
                 [(ngModel)]="cipher.identity.middleName"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -251,6 +298,7 @@
                 type="text"
                 name="Identity.LastName"
                 [(ngModel)]="cipher.identity.lastName"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -261,6 +309,7 @@
                 name="Identity.Username"
                 [(ngModel)]="cipher.identity.username"
                 appInputVerbatim
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -270,6 +319,7 @@
                 type="text"
                 name="Identity.Company"
                 [(ngModel)]="cipher.identity.company"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -280,6 +330,7 @@
                 name="Identity.SSN"
                 [(ngModel)]="cipher.identity.ssn"
                 appInputVerbatim
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -290,6 +341,7 @@
                 name="Identity.PassportNumber"
                 [(ngModel)]="cipher.identity.passportNumber"
                 appInputVerbatim
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -300,6 +352,7 @@
                 name="Identity.LicenseNumber"
                 [(ngModel)]="cipher.identity.licenseNumber"
                 appInputVerbatim
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -310,6 +363,7 @@
                 name="Identity.Email"
                 [(ngModel)]="cipher.identity.email"
                 appInputVerbatim
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -319,6 +373,7 @@
                 type="text"
                 name="Identity.Phone"
                 [(ngModel)]="cipher.identity.phone"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -328,6 +383,7 @@
                 type="text"
                 name="Identity.Address1"
                 [(ngModel)]="cipher.identity.address1"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -337,6 +393,7 @@
                 type="text"
                 name="Identity.Address2"
                 [(ngModel)]="cipher.identity.address2"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -346,6 +403,7 @@
                 type="text"
                 name="Identity.Address3"
                 [(ngModel)]="cipher.identity.address3"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -355,6 +413,7 @@
                 type="text"
                 name="Identity.City"
                 [(ngModel)]="cipher.identity.city"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -364,6 +423,7 @@
                 type="text"
                 name="Identity.State"
                 [(ngModel)]="cipher.identity.state"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -373,6 +433,7 @@
                 type="text"
                 name="Identity.PostalCode"
                 [(ngModel)]="cipher.identity.postalCode"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="box-content-row" appBoxRow>
@@ -382,6 +443,7 @@
                 type="text"
                 name="Identity.Country"
                 [(ngModel)]="cipher.identity.country"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -402,6 +464,7 @@
                 appStopClick
                 (click)="removeUri(u)"
                 appA11yTitle="{{ 'remove' | i18n }}"
+                [disabled]="!cipher.edit && editMode"
               >
                 <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
               </button>
@@ -446,7 +509,13 @@
               </div>
             </div>
           </ng-container>
-          <button type="button" appStopClick (click)="addUri()" class="box-content-row">
+          <button
+            type="button"
+            appStopClick
+            (click)="addUri()"
+            class="box-content-row"
+            *ngIf="!(!cipher.edit && editMode)"
+          >
             <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
             {{ "newUri" | i18n }}
           </button>
@@ -481,6 +550,7 @@
               name="PasswordPrompt"
               [ngModel]="reprompt"
               (change)="repromptChanged()"
+              [disabled]="!cipher.edit && editMode"
             />
           </div>
           <button
@@ -511,11 +581,18 @@
         </h2>
         <div class="box-content">
           <div class="box-content-row" appBoxRow>
-            <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
+            <textarea
+              id="notes"
+              name="Notes"
+              rows="6"
+              [(ngModel)]="cipher.notes"
+              [readonly]="!cipher.edit && editMode"
+            ></textarea>
           </div>
         </div>
       </div>
       <app-vault-add-edit-custom-fields
+        *ngIf="!(!cipher.hasFields && !cipher.edit && editMode)"
         [cipher]="cipher"
         [thisCipherType]="cipher.type"
         [editMode]="editMode"
diff --git a/apps/desktop/src/app/vault/view.component.html b/apps/desktop/src/app/vault/view.component.html
index ec68f7e4a6..8b1b044574 100644
--- a/apps/desktop/src/app/vault/view.component.html
+++ b/apps/desktop/src/app/vault/view.component.html
@@ -537,7 +537,7 @@
   >
     <i class="bwi bwi-files bwi-fw bwi-lg" aria-hidden="true"></i>
   </button>
-  <div class="right">
+  <div class="right" *ngIf="cipher.edit">
     <button
       type="button"
       (click)="delete()"
diff --git a/apps/desktop/src/services/encryptedMessageHandlerService.ts b/apps/desktop/src/services/encryptedMessageHandlerService.ts
index a064e031c8..719b6bed08 100644
--- a/apps/desktop/src/services/encryptedMessageHandlerService.ts
+++ b/apps/desktop/src/services/encryptedMessageHandlerService.ts
@@ -159,7 +159,7 @@ export class EncryptedMessageHandlerService {
 
     try {
       const encrypted = await this.cipherService.encrypt(cipherView);
-      await this.cipherService.saveWithServer(encrypted);
+      await this.cipherService.createWithServer(encrypted);
 
       // Notify other clients of new login
       await this.messagingService.send("addedCipher");
@@ -198,7 +198,7 @@ export class EncryptedMessageHandlerService {
       cipherView.login.uris[0].uri = credentialUpdatePayload.uri;
       const encrypted = await this.cipherService.encrypt(cipherView);
 
-      await this.cipherService.saveWithServer(encrypted);
+      await this.cipherService.updateWithServer(encrypted);
 
       // Notify other clients of update
       await this.messagingService.send("editedCipher");
diff --git a/apps/web/src/app/vault/add-edit-custom-fields.component.html b/apps/web/src/app/vault/add-edit-custom-fields.component.html
index 3d02f2d3b8..c524f34641 100644
--- a/apps/web/src/app/vault/add-edit-custom-fields.component.html
+++ b/apps/web/src/app/vault/add-edit-custom-fields.component.html
@@ -29,6 +29,7 @@
           class="form-control"
           appInputVerbatim
           [disabled]="cipher.isDeleted || viewOnly"
+          [readonly]="!cipher.edit && editMode"
         />
       </div>
       <div class="col-7 form-group">
@@ -44,6 +45,7 @@
               [(ngModel)]="f.value"
               appInputVerbatim
               [disabled]="cipher.isDeleted || viewOnly"
+              [readonly]="!cipher.edit && editMode"
               attr.aria-describedby="fieldName{{ i }}"
             />
             <div class="input-group-append">
@@ -68,6 +70,7 @@
               appInputVerbatim
               autocomplete="new-password"
               [disabled]="cipher.isDeleted || viewOnly || (!cipher.viewPassword && !f.newField)"
+              [readonly]="!cipher.edit && editMode"
               attr.aria-describedby="fieldName{{ i }}"
             />
             <div class="input-group-append">
@@ -130,7 +133,7 @@
             class="btn btn-link text-danger ml-2"
             (click)="removeField(f)"
             appA11yTitle="{{ 'remove' | i18n }}"
-            *ngIf="!cipher.isDeleted && !viewOnly"
+            *ngIf="!cipher.isDeleted && !viewOnly && !(!cipher.edit && editMode)"
           >
             <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
           </button>
@@ -138,7 +141,7 @@
             type="button"
             class="btn btn-link text-muted cursor-move"
             appA11yTitle="{{ 'dragToSort' | i18n }}"
-            *ngIf="!cipher.isDeleted && !viewOnly"
+            *ngIf="!cipher.isDeleted && !viewOnly && !(!cipher.edit && editMode)"
           >
             <i class="bwi bwi-hamburger bwi-lg" aria-hidden="true"></i>
           </button>
@@ -152,11 +155,11 @@
     appStopClick
     (click)="addField()"
     class="d-inline-block mb-2"
-    *ngIf="!cipher.isDeleted && !viewOnly"
+    *ngIf="!cipher.isDeleted && !viewOnly && !(!cipher.edit && editMode)"
   >
     <i class="bwi bwi-plus-circle bwi-fw" aria-hidden="true"></i> {{ "newCustomField" | i18n }}
   </a>
-  <div class="row" *ngIf="!cipher.isDeleted && !viewOnly">
+  <div class="row" *ngIf="!cipher.isDeleted && !viewOnly && !(!cipher.edit && editMode)">
     <div class="col-5">
       <label for="addFieldType" class="sr-only">{{ "type" | i18n }}</label>
       <select id="addFieldType" class="form-control" name="AddFieldType" [(ngModel)]="addFieldType">
diff --git a/apps/web/src/app/vault/add-edit.component.html b/apps/web/src/app/vault/add-edit.component.html
index e936ef7ba6..0f5730b70a 100644
--- a/apps/web/src/app/vault/add-edit.component.html
+++ b/apps/web/src/app/vault/add-edit.component.html
@@ -49,6 +49,7 @@
               [(ngModel)]="cipher.name"
               required
               [disabled]="cipher.isDeleted || viewOnly"
+              [readonly]="!cipher.edit && editMode"
             />
           </div>
           <div class="col-6 form-group" *ngIf="!organization">
@@ -78,6 +79,7 @@
                   [(ngModel)]="cipher.login.username"
                   appInputVerbatim
                   [disabled]="cipher.isDeleted || viewOnly"
+                  [readonly]="!cipher.edit && editMode"
                 />
                 <div class="input-group-append" *ngIf="!cipher.isDeleted">
                   <button
@@ -101,7 +103,7 @@
                     appStopClick
                     appA11yTitle="{{ 'generatePassword' | i18n }}"
                     (click)="generatePassword()"
-                    *ngIf="cipher.viewPassword"
+                    *ngIf="cipher.viewPassword && !(!cipher.edit && editMode)"
                   >
                     <i class="bwi bwi-lg bwi-fw bwi-generate" aria-hidden="true"></i>
                   </a>
@@ -138,6 +140,7 @@
                   appInputVerbatim
                   autocomplete="new-password"
                   [disabled]="cipher.isDeleted || !cipher.viewPassword || viewOnly"
+                  [readonly]="!cipher.edit && editMode"
                 />
                 <div class="input-group-append">
                   <button
@@ -177,6 +180,7 @@
                 [(ngModel)]="cipher.login.totp"
                 appInputVerbatim
                 [disabled]="cipher.isDeleted || !cipher.viewPassword || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="tw-mb-4 tw-ml-4 tw-flex tw-w-1/2 tw-items-end" [ngClass]="{ low: totpLow }">
@@ -358,7 +362,7 @@
             appStopClick
             (click)="addUri()"
             class="d-inline-block mb-3"
-            *ngIf="!cipher.isDeleted && !viewOnly"
+            *ngIf="!cipher.isDeleted && !viewOnly && !(!cipher.edit && editMode)"
           >
             <i class="bwi bwi-plus-circle bwi-fw" aria-hidden="true"></i> {{ "newUri" | i18n }}
           </a>
@@ -375,19 +379,34 @@
                 name="Card.CardCardholderName"
                 [(ngModel)]="cipher.card.cardholderName"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-6 form-group">
               <label for="cardBrand">{{ "brand" | i18n }}</label>
-              <select
-                id="cardBrand"
-                class="form-control"
-                name="Card.Brand"
-                [(ngModel)]="cipher.card.brand"
-                [disabled]="cipher.isDeleted || viewOnly"
-              >
-                <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">{{ o.name }}</option>
-              </select>
+              <span *ngIf="!(!cipher.edit && editMode); else readonlyCardBrand">
+                <select
+                  id="cardBrand"
+                  class="form-control"
+                  name="Card.Brand"
+                  [(ngModel)]="cipher.card.brand"
+                  [disabled]="cipher.isDeleted || viewOnly"
+                >
+                  <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">
+                    {{ o.name }}
+                  </option>
+                </select>
+              </span>
+              <ng-template #readonlyCardBrand>
+                <input
+                  id="cardBrand"
+                  class="form-control"
+                  name="Card.Brand"
+                  type="text"
+                  [readonly]="true"
+                  [value]="cipher.card.brand"
+                />
+              </ng-template>
             </div>
           </div>
           <div class="row">
@@ -403,6 +422,7 @@
                   appInputVerbatim
                   autocomplete="new-password"
                   [disabled]="cipher.isDeleted || viewOnly"
+                  [readonly]="!cipher.edit && editMode"
                 />
                 <div class="input-group-append">
                   <button
@@ -433,17 +453,29 @@
             </div>
             <div class="col form-group">
               <label for="cardExpMonth">{{ "expirationMonth" | i18n }}</label>
-              <select
-                id="cardExpMonth"
-                class="form-control"
-                name="Card.ExpMonth"
-                [(ngModel)]="cipher.card.expMonth"
-                [disabled]="cipher.isDeleted || viewOnly"
-              >
-                <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">
-                  {{ o.name }}
-                </option>
-              </select>
+              <span *ngIf="!(!cipher.edit && editMode); else readonlyCardExpMonth">
+                <select
+                  id="cardExpMonth"
+                  class="form-control"
+                  name="Card.ExpMonth"
+                  [(ngModel)]="cipher.card.expMonth"
+                  [disabled]="cipher.isDeleted || viewOnly"
+                >
+                  <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">
+                    {{ o.name }}
+                  </option>
+                </select>
+              </span>
+              <ng-template #readonlyCardExpMonth>
+                <input
+                  id="cardExpMonth"
+                  class="form-control"
+                  type="text"
+                  name="Card.ExpMonth"
+                  [readonly]="true"
+                  [value]="getCardExpMonthDisplay()"
+                />
+              </ng-template>
             </div>
             <div class="col form-group">
               <label for="cardExpYear">{{ "expirationYear" | i18n }}</label>
@@ -455,6 +487,7 @@
                 [(ngModel)]="cipher.card.expYear"
                 placeholder="{{ 'ex' | i18n }} 2019"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -471,6 +504,7 @@
                   appInputVerbatim
                   autocomplete="new-password"
                   [disabled]="cipher.isDeleted || viewOnly"
+                  [readonly]="!cipher.edit && editMode"
                 />
                 <div class="input-group-append">
                   <button
@@ -503,17 +537,29 @@
           <div class="row">
             <div class="col-4 form-group">
               <label for="idTitle">{{ "title" | i18n }}</label>
-              <select
-                id="idTitle"
-                class="form-control"
-                name="Identity.Title"
-                [(ngModel)]="cipher.identity.title"
-                [disabled]="cipher.isDeleted || viewOnly"
-              >
-                <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">
-                  {{ o.name }}
-                </option>
-              </select>
+              <span *ngIf="!(!cipher.edit && editMode); else readonlyIdTitle">
+                <select
+                  id="idTitle"
+                  class="form-control"
+                  name="Identity.Title"
+                  [(ngModel)]="cipher.identity.title"
+                  [disabled]="cipher.isDeleted || viewOnly"
+                >
+                  <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">
+                    {{ o.name }}
+                  </option>
+                </select>
+              </span>
+              <ng-template #readonlyIdTitle>
+                <input
+                  id="idTitle"
+                  class="form-control"
+                  name="Identity.Title"
+                  type="text"
+                  [readonly]="true"
+                  [value]="cipher.identity.title"
+                />
+              </ng-template>
             </div>
           </div>
           <div class="row">
@@ -526,6 +572,7 @@
                 name="Identity.FirstName"
                 [(ngModel)]="cipher.identity.firstName"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-4 form-group">
@@ -537,6 +584,7 @@
                 name="Identity.MiddleName"
                 [(ngModel)]="cipher.identity.middleName"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-4 form-group">
@@ -548,6 +596,7 @@
                 name="Identity.LastName"
                 [(ngModel)]="cipher.identity.lastName"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -562,6 +611,7 @@
                 [(ngModel)]="cipher.identity.username"
                 appInputVerbatim
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-4 form-group">
@@ -573,6 +623,7 @@
                 name="Identity.Company"
                 [(ngModel)]="cipher.identity.company"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -587,6 +638,7 @@
                 [(ngModel)]="cipher.identity.ssn"
                 appInputVerbatim
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-4 form-group">
@@ -599,6 +651,7 @@
                 [(ngModel)]="cipher.identity.passportNumber"
                 appInputVerbatim
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-4 form-group">
@@ -611,6 +664,7 @@
                 [(ngModel)]="cipher.identity.licenseNumber"
                 appInputVerbatim
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -626,6 +680,7 @@
                 [(ngModel)]="cipher.identity.email"
                 appInputVerbatim
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-6 form-group">
@@ -638,6 +693,7 @@
                 name="Identity.Phone"
                 [(ngModel)]="cipher.identity.phone"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -651,6 +707,7 @@
                 name="Identity.Address1"
                 [(ngModel)]="cipher.identity.address1"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-6 form-group">
@@ -662,6 +719,7 @@
                 name="Identity.Address2"
                 [(ngModel)]="cipher.identity.address2"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -675,6 +733,7 @@
                 name="Identity.Address3"
                 [(ngModel)]="cipher.identity.address3"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-6 form-group">
@@ -686,6 +745,7 @@
                 name="Identity.City"
                 [(ngModel)]="cipher.identity.city"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -699,6 +759,7 @@
                 name="Identity.State"
                 [(ngModel)]="cipher.identity.state"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
             <div class="col-6 form-group">
@@ -710,6 +771,7 @@
                 name="Identity.PostalCode"
                 [(ngModel)]="cipher.identity.postalCode"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -723,6 +785,7 @@
                 name="Identity.Country"
                 [(ngModel)]="cipher.identity.country"
                 [disabled]="cipher.isDeleted || viewOnly"
+                [readonly]="!cipher.edit && editMode"
               />
             </div>
           </div>
@@ -735,14 +798,17 @@
             rows="6"
             [(ngModel)]="cipher.notes"
             [disabled]="cipher.isDeleted || viewOnly"
+            [readonly]="!cipher.edit && editMode"
             class="form-control"
           ></textarea>
         </div>
         <app-vault-add-edit-custom-fields
+          *ngIf="!(!cipher.hasFields && !cipher.edit && editMode)"
           [cipher]="cipher"
           [thisCipherType]="cipher.type"
           [viewOnly]="viewOnly"
           [copy]="copy.bind(this)"
+          [editMode]="editMode"
         ></app-vault-add-edit-custom-fields>
         <ng-container *ngIf="allowOwnershipAssignment()">
           <h3 class="mt-4">{{ "ownership" | i18n }}</h3>
@@ -819,7 +885,7 @@
               (change)="repromptChanged()"
               id="passwordPrompt"
               name="passwordPrompt"
-              [disabled]="cipher.isDeleted || viewOnly"
+              [disabled]="cipher.isDeleted || viewOnly || (!cipher.edit && editMode)"
             />
             <label class="form-check-label" for="passwordPrompt">{{
               "passwordPrompt" | i18n
@@ -868,7 +934,7 @@
             (click)="delete()"
             class="btn btn-outline-danger"
             appA11yTitle="{{ (cipher.isDeleted ? 'permanentlyDelete' : 'delete') | i18n }}"
-            *ngIf="editMode && !cloneMode"
+            *ngIf="editMode && !cloneMode && !(!cipher.edit && editMode)"
             [disabled]="deleteBtn.loading"
             [appApiAction]="deletePromise"
           >
diff --git a/libs/angular/src/components/add-edit.component.ts b/libs/angular/src/components/add-edit.component.ts
index f70cdd999a..371cc8d575 100644
--- a/libs/angular/src/components/add-edit.component.ts
+++ b/libs/angular/src/components/add-edit.component.ts
@@ -363,6 +363,10 @@ export class AddEditComponent implements OnInit, OnDestroy {
     }
   }
 
+  getCardExpMonthDisplay() {
+    return this.cardExpMonthOptions.find((x) => x.value == this.cipher.card.expMonth)?.name;
+  }
+
   trackByFunction(index: number, item: any) {
     return index;
   }
@@ -580,7 +584,9 @@ export class AddEditComponent implements OnInit, OnDestroy {
   }
 
   protected saveCipher(cipher: Cipher) {
-    return this.cipherService.saveWithServer(cipher);
+    return this.cipher.id == null
+      ? this.cipherService.createWithServer(cipher)
+      : this.cipherService.updateWithServer(cipher);
   }
 
   protected deleteCipher() {
diff --git a/libs/common/src/abstractions/api.service.ts b/libs/common/src/abstractions/api.service.ts
index 76c163b4ff..14dc26cc59 100644
--- a/libs/common/src/abstractions/api.service.ts
+++ b/libs/common/src/abstractions/api.service.ts
@@ -8,6 +8,7 @@ import { CipherBulkRestoreRequest } from "../models/request/cipher-bulk-restore.
 import { CipherBulkShareRequest } from "../models/request/cipher-bulk-share.request";
 import { CipherCollectionsRequest } from "../models/request/cipher-collections.request";
 import { CipherCreateRequest } from "../models/request/cipher-create.request";
+import { CipherPartialRequest } from "../models/request/cipher-partial.request";
 import { CipherShareRequest } from "../models/request/cipher-share.request";
 import { CipherRequest } from "../models/request/cipher.request";
 import { CollectionRequest } from "../models/request/collection.request";
@@ -257,6 +258,7 @@ export abstract class ApiService {
   postCipherCreate: (request: CipherCreateRequest) => Promise<CipherResponse>;
   postCipherAdmin: (request: CipherCreateRequest) => Promise<CipherResponse>;
   putCipher: (id: string, request: CipherRequest) => Promise<CipherResponse>;
+  putPartialCipher: (id: string, request: CipherPartialRequest) => Promise<CipherResponse>;
   putCipherAdmin: (id: string, request: CipherRequest) => Promise<CipherResponse>;
   deleteCipher: (id: string) => Promise<any>;
   deleteCipherAdmin: (id: string) => Promise<any>;
diff --git a/libs/common/src/abstractions/cipher.service.ts b/libs/common/src/abstractions/cipher.service.ts
index 96f30c55fa..b551f20991 100644
--- a/libs/common/src/abstractions/cipher.service.ts
+++ b/libs/common/src/abstractions/cipher.service.ts
@@ -33,7 +33,8 @@ export abstract class CipherService {
   updateLastUsedDate: (id: string) => Promise<void>;
   updateLastLaunchedDate: (id: string) => Promise<void>;
   saveNeverDomain: (domain: string) => Promise<void>;
-  saveWithServer: (cipher: Cipher) => Promise<any>;
+  createWithServer: (cipher: Cipher) => Promise<any>;
+  updateWithServer: (cipher: Cipher) => Promise<any>;
   shareWithServer: (
     cipher: CipherView,
     organizationId: string,
diff --git a/libs/common/src/models/request/cipher-partial.request.ts b/libs/common/src/models/request/cipher-partial.request.ts
new file mode 100644
index 0000000000..6037dff6cb
--- /dev/null
+++ b/libs/common/src/models/request/cipher-partial.request.ts
@@ -0,0 +1,11 @@
+import { Cipher } from "../domain/cipher";
+
+export class CipherPartialRequest {
+  folderId: string;
+  favorite: boolean;
+
+  constructor(cipher: Cipher) {
+    this.folderId = cipher.folderId;
+    this.favorite = cipher.favorite;
+  }
+}
diff --git a/libs/common/src/services/api.service.ts b/libs/common/src/services/api.service.ts
index a4d3a0fb54..bab17eb43f 100644
--- a/libs/common/src/services/api.service.ts
+++ b/libs/common/src/services/api.service.ts
@@ -14,6 +14,7 @@ import { CipherBulkMoveRequest } from "../models/request/cipher-bulk-move.reques
 import { CipherBulkShareRequest } from "../models/request/cipher-bulk-share.request";
 import { CipherCollectionsRequest } from "../models/request/cipher-collections.request";
 import { CipherCreateRequest } from "../models/request/cipher-create.request";
+import { CipherPartialRequest } from "../models/request/cipher-partial.request";
 import { CipherShareRequest } from "../models/request/cipher-share.request";
 import { CipherRequest } from "../models/request/cipher.request";
 import { CollectionRequest } from "../models/request/collection.request";
@@ -609,6 +610,11 @@ export class ApiService implements ApiServiceAbstraction {
     return new CipherResponse(r);
   }
 
+  async putPartialCipher(id: string, request: CipherPartialRequest): Promise<CipherResponse> {
+    const r = await this.send("PUT", "/ciphers/" + id + "/partial", request, true, true);
+    return new CipherResponse(r);
+  }
+
   async putCipherAdmin(id: string, request: CipherRequest): Promise<CipherResponse> {
     const r = await this.send("PUT", "/ciphers/" + id + "/admin", request, true, true);
     return new CipherResponse(r);
diff --git a/libs/common/src/services/cipher.service.ts b/libs/common/src/services/cipher.service.ts
index 415cbe6910..b9aeff659d 100644
--- a/libs/common/src/services/cipher.service.ts
+++ b/libs/common/src/services/cipher.service.ts
@@ -37,6 +37,7 @@ import { CipherBulkRestoreRequest } from "../models/request/cipher-bulk-restore.
 import { CipherBulkShareRequest } from "../models/request/cipher-bulk-share.request";
 import { CipherCollectionsRequest } from "../models/request/cipher-collections.request";
 import { CipherCreateRequest } from "../models/request/cipher-create.request";
+import { CipherPartialRequest } from "../models/request/cipher-partial.request";
 import { CipherShareRequest } from "../models/request/cipher-share.request";
 import { CipherRequest } from "../models/request/cipher.request";
 import { CipherResponse } from "../models/response/cipher.response";
@@ -157,6 +158,7 @@ export class CipherService implements CipherServiceAbstraction {
     cipher.collectionIds = model.collectionIds;
     cipher.revisionDate = model.revisionDate;
     cipher.reprompt = model.reprompt;
+    cipher.edit = model.edit;
 
     if (key == null && cipher.organizationId != null) {
       key = await this.cryptoService.getOrgKey(cipher.organizationId);
@@ -594,20 +596,29 @@ export class CipherService implements CipherServiceAbstraction {
     await this.stateService.setNeverDomains(domains);
   }
 
-  async saveWithServer(cipher: Cipher): Promise<any> {
+  async createWithServer(cipher: Cipher): Promise<any> {
     let response: CipherResponse;
-    if (cipher.id == null) {
-      if (cipher.collectionIds != null) {
-        const request = new CipherCreateRequest(cipher);
-        response = await this.apiService.postCipherCreate(request);
-      } else {
-        const request = new CipherRequest(cipher);
-        response = await this.apiService.postCipher(request);
-      }
-      cipher.id = response.id;
+    if (cipher.collectionIds != null) {
+      const request = new CipherCreateRequest(cipher);
+      response = await this.apiService.postCipherCreate(request);
     } else {
+      const request = new CipherRequest(cipher);
+      response = await this.apiService.postCipher(request);
+    }
+    cipher.id = response.id;
+
+    const data = new CipherData(response, cipher.collectionIds);
+    await this.upsert(data);
+  }
+
+  async updateWithServer(cipher: Cipher): Promise<any> {
+    let response: CipherResponse;
+    if (cipher.edit) {
       const request = new CipherRequest(cipher);
       response = await this.apiService.putCipher(cipher.id, request);
+    } else {
+      const request = new CipherPartialRequest(cipher);
+      response = await this.apiService.putPartialCipher(cipher.id, request);
     }
 
     const data = new CipherData(response, cipher.collectionIds);