Add support for optional email input field

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+.vscode/

CHANGELOG.md

@@ -4,6 +4,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [v0.0.1] - 2020-10-03
+## [v0.2.0] - 2020-10-21
 ### Added
-- 
+- support for optional email input field

README.md

@@ -80,7 +80,7 @@ You will have to handle the submission on the backend yourself. [feedback-js](ht
 ```json
 {
     "id": "example",
-    "user": "[email protected]",
+    "email": "[email protected]",
     "feedbackType": "issue",
     "url": "https://example.com",
     "message": "When I click x nothing happens."
@@ -95,9 +95,9 @@ const app = express()
 const port = 3000
 
 app.post('/feedback', async (req, res) => {
-	const { id, feedbackType, message, user, url } = req.body
+	const { id, feedbackType, message, email, url } = req.body
 
-	console.log(`New ${ feedbackType } feedback for form ${ id } from user ${ user } on page ${ url }: ${ message }`)
+	console.log(`New ${ feedbackType } feedback for form ${ id } from user ${ email } on page ${ url }: ${ message }`)
 	// do something with feedback
 
 	res.send('ok')
@@ -114,7 +114,7 @@ If you don't want to show the button and send feedback programatically you can u
 
 ```javascript
 const feedback = new Feedback(options);
-feedback.sendFeedback('feedbackType', 'message', 'url');
+feedback.send('feedbackType', 'message', 'url', 'email');
 ```
 
 ## ⚙️ Options
@@ -125,7 +125,7 @@ You can customize [feedback-js](https://github.com/BetaHuhn/feedback-js) by pass
 const options = {
     id: 'feedback', // id to identify the form on the backend
     endpoint: 'https://example.com/feedback', // enpoint of your backend to handle the submission
-    user: '[email protected]', // userId in your system, email address or other identifier
+    emailField: true, // show email input field, default: false
     btnTitle: 'Feedback', // title of button
     title: 'Company Feedback', // text at the top
     contactText: 'Or send an email!', // text for other contact option

example/index.html

@@ -22,7 +22,7 @@
     function addFeedback() {
         const options = {
             id: 'test',
-            endpoint: 'http://192.168.44.30:6600/form/feedback',
+            endpoint: 'http://172.21.52.196:6600/form/feedback',
 			contactLink: 'mailto:[email protected]?subject=Feedback'
         }
 

example/server.js

@@ -4,10 +4,10 @@ const app = express()
 const port = 3000
 
 app.post('/feedback', async (req, res) => {
-	const { id, feedbackType, message, user, url } = req.body
+	const { id, feedbackType, message, email, url } = req.body
 
-	console.log(`New ${ feedbackType } feedback for form ${ id } from user ${ user } on page ${ url }: ${ message }`)
-	// do something with feedback
+	console.log(`New ${ feedbackType } feedback for form ${ id } from user ${ email } on page ${ url }: ${ message }`)
+	// do something with data
 
 	res.send('ok')
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedback-js",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "main": "dist/feedback-js.min.js",
   "scripts": {

src/feedback.js

@@ -14,7 +14,7 @@ export default class Feedback {
 		const defaultOptions = {
 			id: 'feedback',
 			endpoint: '',
-			user: 'anonymous',
+			emailField: false,
 			btnTitle: 'Feedback',
 			title: 'Feedback',
 			contactText: 'Want to chat?',
@@ -124,6 +124,7 @@ export default class Feedback {
 						<p>${ title }</p>
 					</div>
 					<div class="feedback-content">
+							${ this.options.emailField ? '<input id="feedback-email" type="email" name="email" placeholder="Email address (optional)">' : '' }
 							<textarea id="feedback-message" name="feedback" autofocus type="text" maxlength="500" rows="5" placeholder="${ message }"></textarea>
 							<div id="feedback-actions" class="feedback-actions">
 								<button type="button" id="feedback-back">Back</button>
@@ -142,6 +143,8 @@ export default class Feedback {
 		this.current = type
 		this.root.innerHTML = html
 
+		document.getElementById('feedback-message').focus()
+
 		const button = document.getElementById('feedback-close')
 		button.addEventListener('click', () => {
 			this._renderButton()
@@ -155,7 +158,8 @@ export default class Feedback {
 		const submit = document.getElementById('feedback-submit')
 		submit.addEventListener('click', () => {
 			const message = document.getElementById('feedback-message').value
-			this.sendFeedback(this.current, message, window.location.href)
+			const email = this.options.emailField ? document.getElementById('feedback-email').value : ''
+			this.send(this.current, message, window.location.href, email.length > 0 ? email : undefined)
 		})
 	}
 
@@ -225,17 +229,18 @@ export default class Feedback {
 	 * Send feedback to backend
 	 * @param {string} feedbackType - type of feedback
 	 * @param {string} message - the actual feedback message
-	 * @param {string} url - url/page the feedback was collected on
+	 * @param {string} [url] - url/page the feedback was collected on
+	 * @param {string} [email] - email of user optional
 	 */
-	sendFeedback(feedbackType, message, url) {
+	send(feedbackType, message, url, email) {
 		if (!feedbackType || !message) {
 			if (!this.root) throw new Error('missing parameters')
 			return
 		}
 
 		const parsedData = {
 			id: this.options.id,
-			user: this.options.user,
+			email: email,
 			feedbackType: feedbackType,
 			url: url,
 			message: message
@@ -348,18 +353,38 @@ export default class Feedback {
 				margin-bottom: 0.6rem;
 			}
 
+			.feedback-content input{
+				border: 3px solid ${ this.options.background };
+				filter: brightness(95%);
+				border-radius: 10px;
+				outline: 0;
+				padding: 10px;
+				margin-bottom: 0.5rem;
+				width: 100%;
+				box-sizing: border-box;
+				font-size: 1rem;
+				font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+			}
+
 			.feedback-content textarea{
 				overflow: auto;
-				border: 3px solid ${ this.options.primary };
+				border: 3px solid ${ this.options.background };
+				filter: brightness(95%);
 				border-radius: 10px;
 				outline: 0;
 				padding: 10px;
 				width: 100%;
 				box-sizing: border-box;
 				resize: none;
+				font-size: 1rem;
 				font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
 			}
 
+			.feedback-content textarea:focus,
+			.feedback-content input:focus{
+				border: 3px solid ${ this.options.primary };
+			}
+
 			.feedback-actions{
 				display: flex;
 				margin-top: 1rem;
@@ -449,7 +474,6 @@ export default class Feedback {
 				}
 			}
 			  
-
 			.feedback-content-list{
 				display: flex;
 				flex-direction: column;