Skip to content

Instantly share code, notes, and snippets.

@connor11528
Last active April 11, 2020 22:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save connor11528/8e446c4cf17414df8b2a06fe559a35c2 to your computer and use it in GitHub Desktop.
Save connor11528/8e446c4cf17414df8b2a06fe559a35c2 to your computer and use it in GitHub Desktop.
The Vue component for handling the candidate apply form on the Employbl website
<template>
<form method="POST" action="/" @submit.prevent="submitCandidateApplication" class="form">
<div class="alert alert-success" v-if="success">
{{ success }}
</div>
<div class="alert alert-danger" role="alert" v-if="errors">
Woops had some problems saving
</div>
<div class="form-group row">
<div class="col">
<label>First Name</label>
<input type="text" class="form-control" v-model="candidate.first_name">
<span class="text-danger" v-if="errors && errors.first_name">{{ errors.first_name[0] }}</span>
</div>
<div class="col">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control" v-model="candidate.last_name">
<span class="text-danger" v-if="errors && errors.last_name">{{ errors.last_name[0] }}</span>
</div>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" name="email" class="form-control" v-model="candidate.email" placeholder="myemail@domain.com">
<span class="text-danger" v-if="errors && errors.email">{{ errors.email[0] }}</span>
</div>
<div class="form-group">
<label>LinkedIn URL</label>
<input type="url" name="linkedin_url" class="form-control" v-model="candidate.linkedin_url" placeholder="https://www.linkedin.com/in/username">
<span class="text-danger" v-if="errors && errors.linkedin_url">{{ errors.linkedin_url[0] }}</span>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" name="phone_number" class="form-control" v-model="candidate.phone_number" placeholder="4158765309">
<span class="text-danger" v-if="errors && errors.phone_number">{{ errors.phone_number[0] }}</span>
</div>
<div class="form-group">
<label>What is your work authorization status in the USA?</label>
<select class="custom-select d-block w-100" v-model="candidate.work_authorization">
<option v-for="(status,key) in workAuthStatuses" selected="state == candidate.locationInfo.work_authorization" :value="status" :key="key">
{{status}}
</option>
</select>
<span class="text-danger" v-if="errors && errors.work_authorization">{{ errors.work_authorization[0] }}</span>
</div>
<div class="form-group">
<div>Where in the US are you currently located?</div>
<div class="row">
<div class="col">
<label>City</label>
<input type="text" name="city" class="form-control" v-model="candidate.city" placeholder="Oakland">
<span class="text-danger" v-if="errors && errors.city">{{ errors.city[0] }}</span>
</div>
<div class="col">
<label>State</label>
<select class="custom-select d-block w-100" v-model="candidate.state">
<option v-for="(state,key) in stateAbbreviations"
selected="state == candidateInfo.state"
:value="state"
:key="key"
:selected="candidate.state">
{{state}}
</option>
</select>
<span class="text-danger" v-if="errors && errors.state">{{ errors.state[0] }}</span>
</div>
</div>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-lg btn-primary">Apply</button>
</div>
</form>
</template>
<script>
import _ from 'lodash';
const candidate = {
first_name: '',
last_name: '',
city: '',
state: 'CA',
zip: '',
phone_number: '',
linkedin_url: '',
work_authorization: '',
email: '',
};
const stateAbbreviations = ["AK", "AL", "AR", "AZ", "CA", "CO", "CT", "DC",
"DE", "FL", "GA", "HI", "IA", "ID", "IL", "IN", "KS", "KY", "LA",
"MA", "MD", "ME", "MI", "MN", "MO", "MS", "MT", "NC", "ND", "NE",
"NH", "NJ", "NM", "NV", "NY", "OH", "OK", "OR", "PA", "RI", "SC",
"SD", "TN", "TX", "UT", "VA", "VT", "WA", "WI", "WV", "WY"];
const workAuthStatuses = ["US Citizen", "Green Card", "H1B", "OPT/F1", "None", "Other"];
export default {
data() {
return {
candidate: _.cloneDeep(candidate),
errors: false,
success: false,
stateAbbreviations,
workAuthStatuses,
};
},
methods: {
submitCandidateApplication() {
this.$store
.dispatch('submitCandidateApplication', this.candidate)
.then((response) => {
this.errors = false;
this.candidate = candidate;
this.success = response.message;
})
.catch(error => {
this.success = false;
if (_.get(error, 'response.status') === 422) {
this.errors = error.response.data.errors || {};
}
});
}
}
}
</script>
@connor11528
Copy link
Author

Full tutorial about authentication and approval here: https://employbl.com/blog/user-approval-laravel-artisan-welcome-email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment