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.
98 lines
3.0 KiB
98 lines
3.0 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, Model } 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",
|
|
})
|
|
export default class ContactInputForm extends Vue {
|
|
@Prop({ required: true }) isRegistered!: boolean;
|
|
|
|
@Model("input", { type: String, default: "" })
|
|
inputValue!: string;
|
|
|
|
/**
|
|
* Update the input value and emit change event
|
|
*/
|
|
set input(value: string) {
|
|
this.inputValue = value;
|
|
this.$emit("input", value);
|
|
}
|
|
|
|
get input(): string {
|
|
return this.inputValue;
|
|
}
|
|
}
|
|
</script>
|