add: options page to store user email

dsernst · Dec 6, 2014 · a632701 · a632701
1 parent 239ac8b
commit a632701
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 7 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,9 +1,10 @@
 {
   "name": "Share with Letsfix.net",
   "description": "Post the current URL to letsfix.net",
-  "version": "0.3",
+  "version": "0.5",
+  "options_page": "options.html",
   "permissions": [
-    "tabs", "http://*/*", "https://*/*", "*://*.amazonaws.com/*"
+    "tabs", "http://*/*", "https://*/*", "*://*.amazonaws.com/*", "storage"
   ],
   "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",
   "icons": { "16": "icon16.png",

diff --git a/options.html b/options.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Lfx-Post Options</title>
+    <link href="style.css" type="text/css" rel="stylesheet">
+	</head>
+	<body class="optionsPage">
+		<section class="userInfo">
+			<span>Your email address: </span>
+	    <input id="userEmail" type="email" placeholder="[email protected]" required>
+			<div id="status"></div>
+			<button id="save">Save</button>
+		</section>
+		<iframe style="margin: 105px auto 0; display: block;" width="420" height="315" src="https://www.youtube.com/embed/AjPau5QYtYs" frameborder="0" allowfullscreen></iframe>
+		<script src="options.js"></script>
+	</body>
+</html>
diff --git a/options.js b/options.js
@@ -0,0 +1,27 @@
+// Saves options to chrome.storage
+function save_options() {
+  var email = document.getElementById('userEmail').value;
+  chrome.storage.sync.set({
+    user: email,
+  }, function () {
+    // Update status to let user know options were saved.
+    var status = document.getElementById('status');
+    status.textContent = 'Options saved.';
+    setTimeout(function () {
+      status.textContent = '';
+    }, 750);
+  });
+}
+
+// Restores the preferences stored in chrome.storage.
+function restore_options() {
+  // Use default value user = ''.
+  chrome.storage.sync.get({
+    user: '',
+  }, function (items) {
+    document.getElementById('userEmail').value = items.user;
+  });
+}
+document.addEventListener('DOMContentLoaded', restore_options);
+document.getElementById('save').addEventListener('click',
+    save_options);
diff --git a/style.css b/style.css
@@ -8,12 +8,55 @@
   width: 100%;
 }
 
-.userInfo {
-  min-width: 239px;
-  min-height: 70px;
-  width: 97.5%;
-}
 
 .hidden {
   display: none;
+}
+
+.optionsPage {
+  background-color: #283544;
+}
+
+.userInfo {
+  width: 500px;
+  margin: 20px auto;
+  padding: 30px;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0px 6px 30px 0px rgba(0,0,0,0.6);
+}
+
+.userInfo span {
+  font-size: 16px;
+}
+
+#userEmail {
+  width: 53%;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+.userInfo #save {
+  font-size: 16px;
+  padding: 6px 12px;
+  border-radius: 5px;
+  border: 0px;
+  color: #fff;
+  background-color: #337ab7;
+  border-color: #2e6da4;
+  position: relative;
+  left: 88%;
+  top: 14px;
+}
+
+.userInfo #save:hover {
+  background-color: #286090;
+  border-color: #204d74;
 }