Browse Source

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

- 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.
pull/133/head
Matt Raymer 3 weeks ago
parent
commit
e4155e1a20
  1. 2
      BUILDING.md
  2. 67
      src/components/ImageMethodDialog.vue
  3. 4
      src/components/PhotoDialog.vue
  4. 27
      src/views/AccountViewView.vue

2
BUILDING.md

@ -54,7 +54,7 @@ Install dependencies:
1. Run the production build:
```bash
npm run build
npm run build:web
```
The built files will be in the `dist` directory.

67
src/components/ImageMethodDialog.vue

@ -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

@ -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(

27
src/views/AccountViewView.vue

@ -83,18 +83,23 @@
/>
</span>
<div v-else class="text-center">
<div class @click="openImageDialog()">
<font-awesome
icon="image-portrait"
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-l"
/>
<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-r"
/>
</div>
<template v-if="isRegistered">
<div class @click="openImageDialog()">
<font-awesome
icon="image-portrait"
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-l"
/>
<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-r"
/>
</div>
</template>
<template v-else>
<div class="text-center text-lg text-slate-500 py-8">Register to Upload a Photo</div>
</template>
</div>
<ImageMethodDialog ref="imageMethodDialog" />
<ImageMethodDialog ref="imageMethodDialog" :isRegistered="isRegistered" />
</div>
<div class="mt-6">
<div class="flex justify-center text-center">

Loading…
Cancel
Save