https://saddleback.com/scripts/MinistryDetails/NewPersonForm.js?v=517cdeafa93af7720f65d0a6f449ca34186eeedc

1export default {
2    emits: ['sign-out', 'sign-up', 'sign-in'],
3
4    template: `
5        <div class="person-form">
6            <div class="form-input">
7                <label for="firstName">
8                    First Name
9                    <span class="required" v-if="!person.firstName">*</span>
10                </label>
11                <input type="text" id="firstName" class="saddleback-input" v-model="person.firstName" />
12            </div>
13
14            <div class="form-input">
15                <label for="lastName">
16                    Last Name
17                    <span class="required" v-if="!person.lastName">*</span>
18                </label>
19                <input type="text" id="lastName" class="saddleback-input" v-model="person.lastName" />
20            </div>
21
22            <div class="form-input">
23                <label for="email">
24                    Email Address
25                    <span class="required" v-if="!person.email">*</span>
26                </label>
27                <input type="text" id="email" class="saddleback-input" v-model="person.email" />
28            </div>
29        </div>
30
31        <div class="buttons">
32            <button
33                class="btn complete-registration"
34                v-on:click="$emit('sign-up', person)"
35                :disabled="!isFormValid"
36            >
37                Sign Up
38            </button>
39
40            <div class="have-account">
41                <p>Already have an account?</p>
42                <a v-on:click="$emit('sign-in')" href="javascript:;">
43                    Sign In
44                </a>
45            </div>
46        </div>
47    `,
48
49    data() {
50        return {
51            person: {},
52        }
53    },
54
55    computed: {
56        isFormValid() {
57            return this.person.firstName && this.person.lastName && this.person.email;
58        },
59    },
60};