You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.1 KiB
104 lines
3.1 KiB
<template>
|
|
<div id="formAddNewContact" class="mt-4 mb-4 flex items-stretch">
|
|
<!-- Action Buttons -->
|
|
<span v-if="isRegistered" class="flex">
|
|
<router-link
|
|
:to="{ name: 'invite-one' }"
|
|
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
|
|
>
|
|
<font-awesome icon="envelope-open-text" class="fa-fw text-2xl" />
|
|
</router-link>
|
|
|
|
<button
|
|
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
|
|
@click="$emit('show-onboard-meeting')"
|
|
>
|
|
<font-awesome icon="chair" class="fa-fw text-2xl" />
|
|
</button>
|
|
</span>
|
|
<span v-else class="flex">
|
|
<span
|
|
class="flex items-center 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-1.5 py-1 mr-1 rounded-md"
|
|
>
|
|
<font-awesome
|
|
icon="envelope-open-text"
|
|
class="fa-fw text-2xl"
|
|
@click="$emit('registration-required')"
|
|
/>
|
|
</span>
|
|
<span
|
|
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
|
|
>
|
|
<font-awesome
|
|
icon="chair"
|
|
class="fa-fw text-2xl"
|
|
@click="$emit('navigate-onboard-meeting')"
|
|
/>
|
|
</span>
|
|
</span>
|
|
|
|
<!-- QR Code Button -->
|
|
<button
|
|
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
|
|
@click="$emit('qr-scan')"
|
|
>
|
|
<font-awesome icon="qrcode" class="fa-fw text-2xl" />
|
|
</button>
|
|
|
|
<!-- Contact Input -->
|
|
<textarea
|
|
v-model="inputValue"
|
|
type="text"
|
|
placeholder="New URL or DID, Name, Public Key, Next Public Key Hash"
|
|
class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2 h-10"
|
|
/>
|
|
|
|
<!-- Add Button -->
|
|
<button
|
|
class="px-4 rounded-r bg-green-200 border border-green-400"
|
|
@click="$emit('submit', inputValue)"
|
|
>
|
|
<font-awesome icon="plus" class="fa-fw" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-facing-decorator";
|
|
|
|
/**
|
|
* ContactInputForm - Contact input form component
|
|
*
|
|
* Provides a form for adding new contacts with various input formats.
|
|
* Includes action buttons for invites, meetings, and QR scanning.
|
|
*
|
|
* @author Matthew Raymer
|
|
*/
|
|
@Component({
|
|
name: "ContactInputForm",
|
|
emits: [
|
|
"submit",
|
|
"show-onboard-meeting",
|
|
"registration-required",
|
|
"navigate-onboard-meeting",
|
|
"qr-scan",
|
|
"update:modelValue",
|
|
],
|
|
})
|
|
export default class ContactInputForm extends Vue {
|
|
@Prop({ required: true }) isRegistered!: boolean;
|
|
|
|
@Prop({ type: String, default: "" }) modelValue!: string;
|
|
|
|
/**
|
|
* Computed property for v-model binding
|
|
*/
|
|
get inputValue(): string {
|
|
return this.modelValue;
|
|
}
|
|
|
|
set inputValue(value: string) {
|
|
this.$emit("update:modelValue", value);
|
|
}
|
|
}
|
|
</script>
|
|
|