|
|
|
<template>
|
|
|
|
<div >
|
|
|
|
<ClientOnly>
|
|
|
|
<MDBCard>
|
|
|
|
<MDBCardBody>
|
|
|
|
<MDBCardTitle>Login</MDBCardTitle>
|
|
|
|
<MDBCardText>
|
|
|
|
|
|
|
|
<MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm">
|
|
|
|
<MDBCol md="4">
|
|
|
|
<MDBInput
|
|
|
|
label="First name"
|
|
|
|
v-model="input1"
|
|
|
|
invalidFeedback="Please provide your first name"
|
|
|
|
validFeedback="Looks good!"
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
</MDBCol>
|
|
|
|
<MDBCol md="4">
|
|
|
|
<MDBInput
|
|
|
|
label="Last name"
|
|
|
|
v-model="input2"
|
|
|
|
invalidFeedback="Please provide your last name"
|
|
|
|
validFeedback="Looks good!"
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
</MDBCol>
|
|
|
|
<MDBCol md="4">
|
|
|
|
<MDBInput
|
|
|
|
inputGroup
|
|
|
|
aria-label="Username"
|
|
|
|
aria-describedby="basic-addon1"
|
|
|
|
placeholder="Username"
|
|
|
|
v-model="input3"
|
|
|
|
invalidFeedback="Please choose a username."
|
|
|
|
validFeedback="Looks good!"
|
|
|
|
required
|
|
|
|
>
|
|
|
|
<template v-slot:prepend>
|
|
|
|
<span class="input-group-text" id="basic-addon1">@</span>
|
|
|
|
</template></MDBInput
|
|
|
|
>
|
|
|
|
</MDBCol>
|
|
|
|
<MDBCol md="6">
|
|
|
|
<MDBInput
|
|
|
|
label="City"
|
|
|
|
v-model="input4"
|
|
|
|
invalidFeedback="Please provide a valid city."
|
|
|
|
validFeedback="Looks good!"
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
</MDBCol>
|
|
|
|
<MDBCol md="6">
|
|
|
|
<MDBInput
|
|
|
|
label="Zip"
|
|
|
|
v-model="input5"
|
|
|
|
invalidFeedback="Please provide a valid zip."
|
|
|
|
validFeedback="Looks good!"
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
</MDBCol>
|
|
|
|
<MDBCol col="12">
|
|
|
|
<MDBCheckbox
|
|
|
|
label="Agree to terms and conditions"
|
|
|
|
v-model="checkbox1"
|
|
|
|
invalidFeedback="You must agree before submitting."
|
|
|
|
validFeedback="Looks good!"
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
</MDBCol>
|
|
|
|
<MDBCol col="12">
|
|
|
|
<MDBBtn color="primary" type="submit">Submit form</MDBBtn>
|
|
|
|
</MDBCol>
|
|
|
|
</MDBRow>
|
|
|
|
|
|
|
|
</MDBCardText>
|
|
|
|
</MDBCardBody>
|
|
|
|
</MDBCard>
|
|
|
|
</ClientOnly>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow } from "mdb-vue-ui-kit";
|
|
|
|
import { ref } from "vue";
|
|
|
|
|
|
|
|
const checkForm = (event: Event) => {
|
|
|
|
event.target.classList.add("was-validated");
|
|
|
|
};
|
|
|
|
const input1 = ref("Mark");
|
|
|
|
const input2 = ref("Otto");
|
|
|
|
const input3 = ref("");
|
|
|
|
const input4 = ref("");
|
|
|
|
const input5 = ref("");
|
|
|
|
const checkbox1 = ref(false);
|
|
|
|
</script>
|