feat: add claim confirmation functionality to activity feed

- Add confirm button functionality to ActivityListItem
- Implement confirmation logic in HomeView
- Add proper button state handling and validation

Technical Changes:
- Add canConfirm computed property to validate confirmation ability
- Add handleConfirmClick method with proper error handling
- Pass required props (isRegistered, activeDid, confirmerIdList)
- Add confirmation dialog with user verification
- Implement claim submission with proper cleanup
- Add visual feedback for button states
- Update feed after successful confirmation

UI/UX Improvements:
- Add disabled state styling for confirm button
- Show proper error messages for invalid confirmation attempts
- Add loading and success notifications
- Improve button accessibility with proper states

Bug Fixes:
- Make apiServer optional in settings type
- Fix settings update during registration
- Add proper type checking for claim confirmation

This adds the ability to confirm claims directly from the
activity feed with proper validation, error handling, and
user feedback. The confirmation flow matches the existing
claim view confirmation functionality.
This commit is contained in:
Matthew Raymer
2025-03-07 10:22:53 +00:00
parent 4b9a09f343
commit 3168416bfa
3 changed files with 174 additions and 64 deletions

View File

@@ -255,9 +255,13 @@
:key="record.jwtId"
:record="record"
:lastViewedClaimId="feedLastViewedClaimId"
:isRegistered="isRegistered"
:activeDid="activeDid"
:confirmerIdList="record.confirmerIdList"
@loadClaim="onClickLoadClaim"
@viewImage="openImageViewer"
@cacheImage="cacheImageData"
@confirmClaim="confirmClaim"
/>
</ul>
</InfiniteScroll>
@@ -336,6 +340,7 @@ import {
OnboardPage,
registerSaveAndActivatePasskey,
} from "../libs/util";
import * as serverUtil from "../libs/endorserServer";
// import { fa0 } from "@fortawesome/free-solid-svg-icons";
interface GiveRecordWithContactInfo extends GiveSummaryRecord {
@@ -461,6 +466,7 @@ export default class HomeView extends Vue {
if (resp.status === 200) {
await updateAccountSettings(this.activeDid, {
isRegistered: true,
...await retrieveSettingsForActiveAccount()
});
this.isRegistered = true;
}
@@ -904,5 +910,61 @@ export default class HomeView extends Vue {
this.selectedImage = imageUrl;
this.isImageViewerOpen = true;
}
async confirmClaim(record: GiveRecordWithContactInfo) {
this.$notify(
{
group: "modal",
type: "confirm",
title: "Confirm",
text: "Do you personally confirm that this is true?",
onYes: async () => {
const goodClaim = serverUtil.removeSchemaContext(
serverUtil.removeVisibleToDids(
serverUtil.addLastClaimOrHandleAsIdIfMissing(
record.fullClaim,
record.jwtId,
record.handleId
)
)
);
const confirmationClaim = {
"@context": "https://schema.org",
"@type": "AgreeAction",
object: goodClaim
};
const result = await serverUtil.createAndSubmitClaim(
confirmationClaim,
this.activeDid,
this.apiServer,
this.axios
);
if (result.type === "success") {
this.$notify({
group: "alert",
type: "success",
title: "Success",
text: "Confirmation submitted."
}, 3000);
// Refresh the feed to show updated confirmation status
await this.updateAllFeed();
} else {
console.error("Error submitting confirmation:", result);
this.$notify({
group: "alert",
type: "danger",
title: "Error",
text: "There was a problem submitting the confirmation."
}, 5000);
}
}
},
-1
);
}
}
</script>