trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

feat(ui): disable all photo upload actions for unregistered users

Browse Source 
- Updated ImageMethodDialog.vue to accept an isRegistered prop and show "Register to Upload a Photo" message instead of upload UI when not registered.
- Updated AccountViewView.vue to pass isRegistered to ImageMethodDialog and replace all profile photo add/upload buttons with the same message for unregistered users.
- Ensures consistent UX and prevents unregistered users from accessing any photo upload features.
This commit is contained in:
Matt Raymer
2025-05-14 05:39:03 -04:00
parent 7e9682ce67
commit e4155e1a20
4 changed files with 60 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/ImageMethodDialog.vue
View File

@@ -18,36 +18,41 @@
<div>
<div class="text-center mt-8">
<div>
<font-awesome
icon="camera"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
@click="openPhotoDialog()"
/>
</div>
<div class="mt-4">
<input type="file" @change="uploadImageFile" />
</div>
<div class="mt-4">
<span class="mt-2">
... or paste a URL:
<input v-model="imageUrl" type="text" class="border-2" />
</span>
<span class="ml-2">
<template v-if="isRegistered">
<div>
<font-awesome
v-if="imageUrl"
icon="check"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md cursor-pointer"
@click="acceptUrl"
icon="camera"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
@click="openPhotoDialog()"
/>
<!-- so that there's no shifting when it becomes visible -->
<font-awesome
v-else
icon="check"
class="text-white bg-white px-2 py-2"
/>
</span>
</div>
</div>
<div class="mt-4">
<input type="file" @change="uploadImageFile" />
</div>
<div class="mt-4">
<span class="mt-2">
... or paste a URL:
<input v-model="imageUrl" type="text" class="border-2" />
</span>
<span class="ml-2">
<font-awesome
v-if="imageUrl"
icon="check"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md cursor-pointer"
@click="acceptUrl"
/>
<!-- so that there's no shifting when it becomes visible -->
<font-awesome
v-else
icon="check"
class="text-white bg-white px-2 py-2"
/>
</span>
</div>
</template>
<template v-else>
<div class="text-center text-lg text-slate-500 py-12">Register to Upload a Photo</div>
</template>
</div>
</div>
</div>
@@ -67,6 +72,12 @@ const inputImageFileNameRef = ref<Blob>();
@Component({
components: { PhotoDialog },
props: {
isRegistered: {
type: Boolean,
default: true,
},
},
})
export default class ImageMethodDialog extends Vue {
$notify!: (notification: NotificationIface, timeout?: number) => void;

4
src/components/PhotoDialog.vue
View File

@@ -83,6 +83,7 @@ PhotoDialog.vue */
<div v-else>
<div class="flex flex-col items-center justify-center gap-4 p-4">
<button
v-if="isRegistered"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
@click="takePhoto"
>
@@ -144,6 +145,8 @@ export default class PhotoDialog extends Vue {
private platformService = PlatformServiceFactory.getInstance();
URL = window.URL || window.webkitURL;
isRegistered = false;
/**
* Lifecycle hook: Initializes component and retrieves user settings
* @throws {Error} When settings retrieval fails
@@ -152,6 +155,7 @@ export default class PhotoDialog extends Vue {
try {
const settings = await retrieveSettingsForActiveAccount();
this.activeDid = settings.activeDid || "";
this.isRegistered = !!settings.isRegistered;
} catch (error: unknown) {
logger.error("Error retrieving settings from database:", error);
this.$notify(