add button to update key/credential name

backend/authschemes/webauthn/types.go

@@ -27,6 +27,12 @@ type WebAuthnRegistrationInfo struct {
 	CredentialCreatedDate time.Time
 }
 
+type WebAuthnUpdateCredentialInfo struct {
+	UserID            int64
+	CredentialName    string
+	NewCredentialName string
+}
+
 type AShirtWebauthnExtension struct {
 	CredentialName        string    `json:"credentialName"`
 	CredentialCreatedDate time.Time `json:"credentialCreatedDate"`

backend/authschemes/webauthn/webauthn.go

@@ -10,6 +10,7 @@ import (
 	"net/http"
 	"net/url"
 	"strings"
+	"time"
 
 	"github.com/gorilla/mux"
 	"github.com/theparanoids/ashirt-server/backend"
@@ -237,6 +238,20 @@ func (a WebAuthn) BindRoutes(r *mux.Router, bridge authschemes.AShirtAuthBridge)
 		return nil, a.deleteCredential(callingUserID, credentialName, bridge)
 	}))
 
+	remux.Route(r, "PUT", "/credential", remux.JSONHandler(func(r *http.Request) (interface{}, error) {
+		callingUserID := middleware.UserID(r.Context())
+		dr := remux.DissectJSONRequest(r)
+		if dr.Error != nil {
+			return nil, dr.Error
+		}
+		info := WebAuthnUpdateCredentialInfo{
+			NewCredentialName: dr.FromBody("newCredentialName").Required().AsString(),
+			CredentialName:    dr.FromBody("credentialName").Required().AsString(),
+			UserID:            callingUserID,
+		}
+		return nil, a.updateCredentialName(info, bridge)
+	}))
+
 	remux.Route(r, "POST", "/credential/add/begin", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		remux.JSONHandler(func(r *http.Request) (interface{}, error) {
 			auth, err := bridge.FindUserAuthByContext(r.Context())
@@ -336,6 +351,36 @@ func (a WebAuthn) deleteCredential(userID int64, credentialName string, bridge a
 	return nil
 }
 
+func (a WebAuthn) updateCredentialName(info WebAuthnUpdateCredentialInfo, bridge authschemes.AShirtAuthBridge) error {
+	userAuth, err := bridge.FindUserAuthByUserID(info.UserID)
+	if err != nil {
+		return backend.WrapError("Unable to find user", err)
+	}
+	webauthRawCreds := []byte(*userAuth.JSONData)
+	var creds []AShirtWebauthnCredential
+	if err = json.Unmarshal(webauthRawCreds, &creds); err != nil {
+		return backend.WebauthnLoginError(err, "Unable to parse webauthn credentials")
+	}
+	matchingIndex, _ := helpers.Find(creds, func(item AShirtWebauthnCredential) bool {
+		return string(item.CredentialName) == string(info.CredentialName)
+	})
+	if matchingIndex == -1 {
+		return backend.WrapError("Could not find matching credential", err)
+	}
+	creds[matchingIndex].CredentialName = info.NewCredentialName
+	creds[matchingIndex].CredentialCreatedDate = time.Now()
+
+	encodedCreds, err := json.Marshal(creds)
+	if err != nil {
+		return backend.WrapError("Unable to encode credentials", err)
+	}
+	userAuth.JSONData = helpers.Ptr(string(encodedCreds))
+	if err = bridge.UpdateAuthForUser(userAuth); err != nil {
+		return backend.WrapError("Unable to update credential", err)
+	}
+	return nil
+}
+
 func (a WebAuthn) beginRegistration(w http.ResponseWriter, r *http.Request, bridge authschemes.AShirtAuthBridge, info WebAuthnRegistrationInfo) (*protocol.CredentialCreation, error) {
 	var user webauthnUser
 	if info.RegistrationType == CreateCredential {

frontend/src/authschemes/webauthn/services.ts

@@ -72,3 +72,7 @@ export async function listWebauthnCredentials(): Promise<CredentialList> {
 export async function deleteWebauthnCredential(i: { credentialName: string }): Promise<CredentialList> {
   return await req('DELETE', `/auth/webauthn/credential/${i.credentialName}`)
 }
+
+export async function modifyCredentialName(i: { credentialName: string, newCredentialName: string }): Promise<void> {
+  return await req('PUT', `/auth/webauthn/credential`, i)
+}

frontend/src/authschemes/webauthn/settings/index.tsx

@@ -9,9 +9,9 @@ import SettingsSection from 'src/components/settings_section'
 import classnames from 'classnames/bind'
 import { useForm, useFormField } from 'src/helpers/use_form'
 import { renderModals, useModal, useWiredData } from 'src/helpers'
-import { beginAddCredential, deleteWebauthnCredential, finishAddCredential, listWebauthnCredentials } from '../services'
+import { beginAddCredential, deleteWebauthnCredential, finishAddCredential, listWebauthnCredentials, modifyCredentialName } from '../services'
 import Table from 'src/components/table'
-import Button from 'src/components/button'
+import Button, { ButtonGroup } from 'src/components/button'
 import { BuildReloadBus } from 'src/helpers/reload_bus'
 import ModalForm from 'src/components/modal_form'
 import { convertToCredentialCreationOptions, encodeAsB64 } from '../helpers'
@@ -45,6 +45,7 @@ const CredentialList = (props: {
   })
 
   const deleteModal = useModal<{ credentialName: string }>(mProps => <DeleteCredentialModal {...mProps} />, wiredCredentials.reload)
+  const modifyModal = useModal<{ credentialName: string }>(mProps => <EditCredentialModal {...mProps} />, wiredCredentials.reload)
 
   return (<>
     {wiredCredentials.render(data => {
@@ -57,18 +58,21 @@ const CredentialList = (props: {
                 <tr key={credentialName}>
                   <td>{credentialName}</td>
                   <td>{toEnUSDate(dateCreated)}</td>
-                  <td>
-                    <Button small danger onClick={() => {
-                      deleteModal.show({ credentialName })
-                    }}>
-                      Delete
-                    </Button>
+                  <td className={cx('button-cell')}>
+                    <ButtonGroup className={cx('row-buttons')}>
+                      <Button small onClick={() => {
+                        modifyModal.show({ credentialName })
+                      }}>Edit</Button>
+                      <Button danger small onClick={() => {
+                        deleteModal.show({ credentialName })
+                      }}>Delete</Button>
+                    </ButtonGroup>
                   </td>
                 </tr>
               )
             })}
           </Table>
-          {renderModals(deleteModal)}
+          {renderModals(deleteModal, modifyModal)}
         </div>
       )
     })}
@@ -153,3 +157,36 @@ const DeleteCredentialModal = (props: {
     onRequestClose={props.onRequestClose}
   />
 )
+
+const EditCredentialModal = (props: {
+  credentialName: string,
+  onRequestClose: () => void,
+}) => {
+  const credentialName = useFormField("")
+
+  const formComponentProps = useForm({
+    fields: [credentialName],
+    handleSubmit: async () => {
+      if (credentialName.value === '') {
+        return Promise.reject(new Error("Credential name must be populated"))
+      }
+      await modifyCredentialName({
+        newCredentialName: credentialName.value,
+        credentialName: props.credentialName,
+      })
+    },
+    onSuccess: props.onRequestClose
+  })
+
+  return (
+    <ModalForm
+      title={"Edit Credential Name"}
+      submitText={"Edit"}
+      cancelText="Cancel"
+      onRequestClose={props.onRequestClose}
+      {...formComponentProps}
+    >
+      <Input label="New Credential name" {...credentialName} />
+    </ModalForm>
+  )
+}

frontend/src/authschemes/webauthn/settings/stylesheet.styl

@@ -13,3 +13,11 @@
 .security-credentials-section
   *
     margin-bottom: 5px
+
+.button-cell
+  position: relative
+
+.row-buttons
+  position: absolute
+  right: 5px
+  top: 10px