Refactor: create reusable component version of registration/onboarding notice #179
Open
jose
wants to merge 4 commits from onboard-alert-component into master
5 changed files with 169 additions and 210 deletions
@ -1,33 +1,154 @@ |
|||||
|
/** * @file RegistrationNotice.vue * @description Reusable component for |
||||
|
displaying user registration status and related actions. * Shows registration |
||||
|
notice when user is not registered, with options to show identifier info * or |
||||
|
access advanced options. * * @author Matthew Raymer * @version 1.0.0 * @created |
||||
|
2025-08-21T17:25:28-08:00 */ |
||||
|
|
||||
<template> |
<template> |
||||
<div |
<div |
||||
v-if="!isRegistered && show" |
id="noticeSomeoneMustRegisterYou" |
||||
id="noticeBeforeAnnounce" |
class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 my-4" |
||||
class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mt-4" |
|
||||
role="alert" |
|
||||
aria-live="polite" |
|
||||
> |
> |
||||
<p class="mb-4"> |
<p class="mb-4">{{ message }}</p> |
||||
Before you can publicly announce a new project or time commitment, a |
<div class="grid grid-cols-1 gap-2 sm:flex sm:justify-center"> |
||||
friend needs to register you. |
<button |
||||
</p> |
class="inline-block text-md font-bold 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-4 py-2 rounded-md" |
||||
<button |
@click="showNameThenIdDialog" |
||||
class="inline-block text-md 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-4 py-2 rounded-md" |
> |
||||
@click="shareInfo" |
Show them {{ passkeysEnabled ? "default" : "your" }} identifier info |
||||
> |
</button> |
||||
Share Your Info |
<button |
||||
</button> |
class="inline-block text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md" |
||||
|
@click="openAdvancedOptions" |
||||
|
> |
||||
|
See advanced options |
||||
|
</button> |
||||
|
</div> |
||||
</div> |
</div> |
||||
|
<UserNameDialog ref="userNameDialog" /> |
||||
|
<ChoiceButtonDialog ref="choiceButtonDialog" /> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts"> |
<script lang="ts"> |
||||
import { Component, Vue, Prop, Emit } from "vue-facing-decorator"; |
import { Component, Vue, Prop } from "vue-facing-decorator"; |
||||
|
import { Router } from "vue-router"; |
||||
|
import { Capacitor } from "@capacitor/core"; |
||||
|
import UserNameDialog from "./UserNameDialog.vue"; |
||||
|
import ChoiceButtonDialog from "./ChoiceButtonDialog.vue"; |
||||
|
|
||||
@Component({ name: "RegistrationNotice" }) |
/** |
||||
|
* RegistrationNotice Component |
||||
|
* |
||||
|
* Displays registration status notice and provides actions for unregistered users. |
||||
|
* Handles all registration-related flows internally without requiring parent component intervention. |
||||
|
* |
||||
|
* Template Usage: |
||||
|
* ```vue |
||||
|
* <RegistrationNotice |
||||
|
* v-if="!isUserRegistered" |
||||
|
* :passkeys-enabled="PASSKEYS_ENABLED" |
||||
|
* :given-name="givenName" |
||||
|
* message="Custom registration message here" |
||||
|
* /> |
||||
|
* ``` |
||||
|
* |
||||
|
* Component Dependencies: |
||||
|
* - UserNameDialog: Dialog for entering user name |
||||
|
* - ChoiceButtonDialog: Dialog for sharing method selection |
||||
|
*/ |
||||
|
@Component({ |
||||
|
name: "RegistrationNotice", |
||||
|
components: { |
||||
|
UserNameDialog, |
||||
|
ChoiceButtonDialog, |
||||
|
}, |
||||
|
}) |
||||
export default class RegistrationNotice extends Vue { |
export default class RegistrationNotice extends Vue { |
||||
@Prop({ required: true }) isRegistered!: boolean; |
$router!: Router; |
||||
@Prop({ required: true }) show!: boolean; |
|
||||
|
/** |
||||
|
* Whether passkeys are enabled in the application |
||||
|
*/ |
||||
|
@Prop({ required: true }) |
||||
|
passkeysEnabled!: boolean; |
||||
|
|
||||
|
/** |
||||
|
* User's given name for dialog pre-population |
||||
|
*/ |
||||
|
@Prop({ required: true }) |
||||
|
givenName!: string; |
||||
|
|
||||
|
/** |
||||
|
* Custom message to display in the registration notice |
||||
|
* Defaults to "To share, someone must register you." |
||||
|
*/ |
||||
|
@Prop({ default: "To share, someone must register you." }) |
||||
|
message!: string; |
||||
|
|
||||
|
/** |
||||
|
* Shows name input dialog if needed |
||||
|
* Handles the full flow internally without requiring parent component intervention |
||||
|
*/ |
||||
|
showNameThenIdDialog() { |
||||
|
this.openUserNameDialog(() => { |
||||
|
this.promptForShareMethod(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Opens advanced options page |
||||
|
* Navigates directly to the start page |
||||
|
*/ |
||||
|
openAdvancedOptions() { |
||||
|
this.$router.push({ name: "start" }); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Shows dialog for sharing method selection |
||||
|
* Provides options for different sharing scenarios |
||||
|
*/ |
||||
|
promptForShareMethod() { |
||||
|
(this.$refs.choiceButtonDialog as ChoiceButtonDialog).open({ |
||||
|
title: "How can you share your info?", |
||||
|
text: "", |
||||
|
option1Text: "We are in a meeting together", |
||||
|
option2Text: "We are nearby with cameras", |
||||
|
option3Text: "We will share some other way", |
||||
|
onOption1: () => { |
||||
|
this.$router.push({ name: "onboard-meeting-list" }); |
||||
|
}, |
||||
|
onOption2: () => { |
||||
|
this.handleQRCodeClick(); |
||||
|
}, |
||||
|
onOption3: () => { |
||||
|
this.$router.push({ name: "share-my-contact-info" }); |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Handles QR code sharing based on platform |
||||
|
* Navigates to appropriate QR code page |
||||
|
*/ |
||||
|
private handleQRCodeClick() { |
||||
|
if (Capacitor.isNativePlatform()) { |
||||
|
this.$router.push({ name: "contact-qr-scan-full" }); |
||||
|
} else { |
||||
|
this.$router.push({ name: "contact-qr" }); |
||||
|
} |
||||
|
} |
||||
|
|
||||
@Emit("share-info") |
/** |
||||
shareInfo() {} |
* Opens the user name dialog if needed |
||||
|
* |
||||
|
* @param callback Function to call after name is entered |
||||
|
*/ |
||||
|
openUserNameDialog(callback: () => void) { |
||||
|
if (!this.givenName) { |
||||
|
(this.$refs.userNameDialog as UserNameDialog).open(callback); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|||||
Loading…
Reference in new issue