@monster_property_services/monster-job-form - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/index.js

package.json

		{
		"name": "@monster_property_services/monster-job-form",
		"version": "1.0.3",
		"version": "1.1.0",
		"description": "This is a web component with a standard form to handle job requests. The logic to submit the data to a service must be handled by the user of this component.",
		@@ -5,0 +5,0 @@ "main": "index.js",

127

README.md

		@@ -9,3 +9,3 @@ ## Monster Job form 📝
		```html
		<script type="module" src="https://unpkg.com/@monster_property_services/monster-job-form@1.0.3"></script>
		<script type="module" src="https://unpkg.com/@monster_property_services/monster-job-form@1.1.0"></script>
		```
		@@ -19,6 +19,14 @@
		## Usage 🎉
		The job form doesn't have dynamic inputs just yet. However, it has the basic standard job applications inputs.
		The job form have a required input called `successfulSubmit` in which the user can control the state of the form.
		like this:
		```
		sending: 'the user is filling out the form'
		success: 'the form was sent successfully'
		fail: 'the form submission failed'
		```

		By default (initially) you have to set the `successfulSubmit` to `sending`.

		```jsx
		<monster-job-form></monster-job-form>
		<monster-job-form successfulSubmit="sending"></monster-job-form>
		```
		@@ -29,3 +37,3 @@
		```html
		<monster-job-form></monster-job-form>
		<monster-job-form successfulSubmit="sending"></monster-job-form>
		<script>
		@@ -37,2 +45,7 @@ const formElement = document.querySelector('monster-job-form');
		// Your api implementation goes here
		if(success) {
		formElement.setAttribute('successfulSubmit', 'success');
		} else {
		formElement.setAttribute('successfulSubmit', 'fail');
		}
		});
		@@ -65,4 +78,110 @@ </script>

		## Working with google reCaptcha ✅🔐
		You can use your own google reCaptcha implementation like this:

		1. In the selector we need to send the attribute `hasCaptcha` with a `true` string value.
		Moreover, you'll have to render the captcha element as a child of `monster-job-form`.
		```html
		<monster-job-form hasCaptcha="true">
		<div id="html_element" style="margin: 0 auto"></div>
		</monster-job-form>
		```

		2. Then the form won't let the user trigger the submit event until the captcha is valid.
		You'll be responsible of handling the reCaptcha logic to validate the user response.
		Like this:

		```html
		<script>
		var onloadCallback = function() {
		grecaptcha.render('html_element', {
		'sitekey' : 'your-site-key',
		});
		};
		const formElement = document.querySelector('monster-job-form');

		formElement.addEventListener('form-submit', (event) => {
		console.log(event.detail);
		});
		</script>
		<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
		```

		3. The event detail object will look like this:
		```ts
		{
		"form": {
		"firstName": "Jhon",
		"email": "john@mail.com",
		"address": "312 Skeep road",
		"province": "Ontario",
		"lastName": "Doe",
		"phone": "444-115-5522",
		"city": "Toronto",
		"postalCode": "M3S SS6",
		"pastExperience": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus sunt voluptatem ut odit exercitationem eaque ducimus repellat. Quod, facere sequi quae, voluptatibus nobis architecto repellat est quam placeat eos voluptates!",
		"greatFit": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus sunt voluptatem ut odit exercitationem eaque ducimus repellat. Quod, facere sequi quae, voluptatibus nobis architecto repellat est quam placeat eos voluptates!",
		"position": "Senior Team Leader/Plow Operator",
		"driversLicense": "Ontario G",
		"ageOver25": "Yes",
		"experience": "None",
		"tickets": "None",
		"source": "Word of Mouth",
		"cv": {}
		},
		"captcha": 'your-recaptcha-token-response or null in case there is no recpatcha'
		}
		```

		## Full implementation example 🚀
		Here an example of a full implementation with captcha and feedback control:

		```html
		<body style="font-family: Oswald;">
		<monster-job-form successfulSubmit="sending" hasCaptcha="true">
		<div id="html_element" style="margin: 0 auto"></div>
		</monster-job-form>
		</body>
		<script>
		var onloadCallback = function() {
		grecaptcha.render('html_element', {
		'sitekey' : 'your_captcha_key',
		});
		};

		const formElement = document.querySelector('monster-job-form');

		formElement.addEventListener('form-submit', (event) => {
		grecaptcha.reset();
		const {name, email, message} = event.detail;
		fetch("your_api_url", {
		method: 'POST',
		body: {
		FullName: name,
		Email: email,
		Message: message
		},
		headers: {
		'Authorization': `Bearer your_api_token`,
		'Content-Type': 'application/json'
		}
		})
		.then((response) => {
		const objectResponse = response.json();
		if(!response.ok) {
		throw new Error('Request failed');
		}
		formElement.setAttribute('successfulSubmit', 'success');
		})
		.catch(error => {
		formElement.setAttribute('successfulSubmit', 'fail');
		});
		});

		</script>
		<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
		```

		## Preview 📸
		There's an example of this in here
		[https://codepen.io/Andres2D/pen/mdYRWaK](https://codepen.io/Andres2D/pen/mdYRWaK)

index.js

@monster_property_services/monster-job-form - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics