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> |
|||
<div |
|||
v-if="!isRegistered && show" |
|||
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 mt-4" |
|||
role="alert" |
|||
aria-live="polite" |
|||
id="noticeSomeoneMustRegisterYou" |
|||
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" |
|||
> |
|||
<p class="mb-4"> |
|||
Before you can publicly announce a new project or time commitment, a |
|||
friend needs to register you. |
|||
</p> |
|||
<p class="mb-4">{{ message }}</p> |
|||
<div class="grid grid-cols-1 gap-2 sm:flex sm:justify-center"> |
|||
<button |
|||
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" |
|||
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" |
|||
@click="showNameThenIdDialog" |
|||
> |
|||
Share Your Info |
|||
Show them {{ passkeysEnabled ? "default" : "your" }} identifier 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> |
|||
<UserNameDialog ref="userNameDialog" /> |
|||
<ChoiceButtonDialog ref="choiceButtonDialog" /> |
|||
</template> |
|||
|
|||
<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 { |
|||
@Prop({ required: true }) isRegistered!: boolean; |
|||
@Prop({ required: true }) show!: boolean; |
|||
$router!: Router; |
|||
|
|||
/** |
|||
* 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(); |
|||
}); |
|||
} |
|||
|
|||
@Emit("share-info") |
|||
shareInfo() {} |
|||
/** |
|||
* 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" }); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 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> |
|||
|
|||
Loading…
Reference in new issue