Skip to content
Snippets Groups Projects
Commit 47a07680 authored by Mullen Thomas's avatar Mullen Thomas
Browse files

Merge branch 'browser_action' into 'master' 

Browser action Merging

See merge request !8
parents 28c2d23b 0061b5e5
No related branches found
No related tags found
1 merge request!8Browser action Merging
Expand all Hide whitespace changes
Inline Side-by-side
src/src/browser_action/browser_action.html
+ 39
− 14
View file @ 47a07680
<!doctype html> <!doctype html>
<html id="page"> <html id="page">
<head> <head>
<!-- Links to Bootstrap and customized css page-->
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/browser_action.css"> <link rel="stylesheet" type="text/css" href="./css/browser_action.css">
</head> </head>
<body> <body>
<!--Header of the application-->
<!-- Add focusing on textboxes, reformating, make look professional, valid options, save different options for different domains and manage
-->
<div class="header"> <div class="header">
<img id="pretzel" src="./../../../icons/icon128.png"/> <img id="pretzel" src="./../../../icons/icon128.png"/>
<h2 class="title" >Welcome to <strong>Pretzel Pass</strong>!</h2> <h2 class="title">Welcome to <strong>Pretzel Pass</strong>!</h2>
<!-- relative from current location ../../../src etc--> <!--Link to options/preferences page -->
<a href="../options/options.html"> <a href="../options/options.html">
<div id="settingsbtn" > <div id="settingsbtn" >
Options <span class="centerOptions">Options</span>
</div> </div>
</a> </a>
</div> </div>
<!--How to instructions for the application.
These are hidden unless the user clicks the info button on the bottom right of the page -->
<div id="how"> <div id="how">
<p class="larger">Here is what our app does and how it works:</p> <p class="larger">Here is what our app does and how it works:</p>
<ul> <ul>
...@@ -35,12 +34,33 @@ ...@@ -35,12 +34,33 @@
</ul> </ul>
</div> </div>
<!--This section allows the user to give the application input and receive a password
This is the body of the application -->
<div id="toggleField"> <div id="toggleField">
<form> <form>
Domain: <input class="inputbox" id="domain" type="text" value="Domain" readonly><br>
UserKey: <input class="inputbox" id="master" type="password" name="userKey"><br> <div class="row">
Password: <input class="inputbox" id="output" type="text" value="Please enter your User Key Above" readonly><br> <div class="col-xs-3">
Domain:
</div>
<div class="col-xs-9">
<input class="inputbox" id="domain" type="text" value="Domain" >
</div>
<div class="col-xs-3">
UserKey:
</div>
<div class="col-xs-9">
<input class="inputbox" id="master" type="password" name="userKey">
</div>
<div class="col-xs-3">
Password:
</div>
<div class="col-xs-9">
<input class="inputbox" id="output" type="text" value="Please enter your User Key Above" readonly>
</div>
</div>
<!--Allows the user to toggle the view of the user key -->
<p>Show UserKey?</p> <p>Show UserKey?</p>
<!-- Rounded switch --> <!-- Rounded switch -->
...@@ -51,12 +71,17 @@ ...@@ -51,12 +71,17 @@
</form> </form>
</div> </div>
<!--This is the info button that is provided to help the user -->
<div id="infobtn" > <div id="infobtn" >
i i
</div> </div>
<p id="credit"><strong>Brought to you by:</strong> Phillip Pavlich, Ivan Bauer and Thomas Mullen <p> <p id="credit"><strong>Brought to you by:</strong> Phillip Pavlich, Ivan Bauer and Thomas Mullen <p>
<p id="testing"> <p>
<!--Links to JavaScript Scripts that execute behind the scenes actions -->
<script src="js/browser_action.js"></script> <script src="js/browser_action.js"></script>
<script src="./../module/dist/bundle.js"></script> <script src="./../module/dist/bundle.js"></script>
<!--uncomment below if testing to UI is being done -->
<script src="js/browser_action_Testing.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
src/src/browser_action/css/bootstrap.min.css 0 → 100644
+ 14
− 0
View file @ 47a07680
This diff is collapsed.
src/src/browser_action/css/browser_action.css
+ 16
− 12
View file @ 47a07680
...@@ -2,12 +2,13 @@ html{ ...@@ -2,12 +2,13 @@ html{
background: #e6e6e6; background: #e6e6e6;
border: 2px solid #000000; border: 2px solid #000000;
width: 500px; width: 500px;
height: 270px; height: 280px;
} }
body{ body{
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-family: "Times New Roman"; font-family: "Times New Roman";
/*font-size: 14px;*/
postion: relative; postion: relative;
} }
...@@ -58,11 +59,10 @@ body{ ...@@ -58,11 +59,10 @@ body{
margin: 2px 20px 2px 20px; margin: 2px 20px 2px 20px;
border: 2px dashed #000000; border: 2px dashed #000000;
padding: 10px; padding: 10px;
font-size: 12px;
} }
.switch { .switch {
position: relative; position: relative;
...@@ -144,13 +144,14 @@ input:checked + .slider:before { ...@@ -144,13 +144,14 @@ input:checked + .slider:before {
font-family: Georgia; font-family: Georgia;
color: #1a0f00; color: #1a0f00;
font-size: 15px; font-size: 15px;
padding: 3px;
text-decoration: none; text-decoration: none;
float: right; float: right;
text-align: center; text-align: center;
padding: 0 auto; padding: 0 auto;
margin: 4px; margin: 4px;
} }
#infobtn:hover { #infobtn:hover {
...@@ -172,7 +173,7 @@ input:checked + .slider:before { ...@@ -172,7 +173,7 @@ input:checked + .slider:before {
#settingsbtn { #settingsbtn {
margin: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;
height: 20px; height: 26px;
background: #00cc66; background: #00cc66;
color: #1a0f00; color: #1a0f00;
background-image: -webkit-linear-gradient(top, #ff9900, #b36b00); background-image: -webkit-linear-gradient(top, #ff9900, #b36b00);
...@@ -186,16 +187,13 @@ input:checked + .slider:before { ...@@ -186,16 +187,13 @@ input:checked + .slider:before {
font-family: Georgia; font-family: Georgia;
/*color: #ffffff; white*/ /*color: #ffffff; white*/
font-size: 16px; font-size: 16px;
padding: 5px 20px 5px 20px;
text-decoration: none; text-decoration: none;
float: right; float: right;
width: 15%;
text-align: center;
vertical-align: center;
padding: 5px 0px; /* height 26 text size 16 padding 5 on each side */
/* ctrl s to save
auto allows centering from left to right
this is applicable for both margin and padding*/
padding: 0 auto;
width: 11%;
} }
#settingsbtn:hover { #settingsbtn:hover {
...@@ -217,4 +215,10 @@ input:checked + .slider:before { ...@@ -217,4 +215,10 @@ input:checked + .slider:before {
#credit{ #credit{
text-align: center; text-align: center;
padding: 0 auto; padding: 0 auto;
}
.centerOptions{
text-align: center;
margin: 0 auto;
padding: 0 auto;
} }
\ No newline at end of file
src/src/browser_action/js/browser_action.js
+ 24
− 9
View file @ 47a07680
/* globals chrome, localStorage, URL, PretzelPass */ /* globals chrome, localStorage, URL, PretzelPass */
(function () { /*This JavaScript file is used to deal with all user interactions.
This includes event listeners for the user interface.
This code also calls on other scripts for password data. */
(function mainThread() {
var togglePasswordField = document.getElementById('togglePasswordField') var togglePasswordField = document.getElementById('togglePasswordField')
var passField = document.getElementById('master') var passField = document.getElementById('master')
var domainField = document.getElementById('domain') var domainField = document.getElementById('domain')
...@@ -9,7 +15,7 @@ ...@@ -9,7 +15,7 @@
chrome.tabs.onUpdated.addListener(tabChanged.bind(this)) chrome.tabs.onUpdated.addListener(tabChanged.bind(this))
chrome.tabs.onCreated.addListener(tabChanged.bind(this)) chrome.tabs.onCreated.addListener(tabChanged.bind(this))
// get or generate salt // Gets or generates a salt for the password
var salt = JSON.parse(window.localStorage.getItem('salt') || 'null') var salt = JSON.parse(window.localStorage.getItem('salt') || 'null')
if (!salt) { if (!salt) {
salt = Array.from(window.crypto.getRandomValues(new Uint8Array(256))) // 2048 bits! salt = Array.from(window.crypto.getRandomValues(new Uint8Array(256))) // 2048 bits!
...@@ -17,6 +23,8 @@ ...@@ -17,6 +23,8 @@
} }
console.log(salt) console.log(salt)
/*Detects the current tab
Returns the domain of the current tab */
function tabChanged (tab) { function tabChanged (tab) {
chrome.tabs.getSelected(null, function (tab) { chrome.tabs.getSelected(null, function (tab) {
domain = new URL(tab.url).hostname domain = new URL(tab.url).hostname
...@@ -25,6 +33,7 @@ ...@@ -25,6 +33,7 @@
} }
tabChanged() tabChanged()
/*Toggles the text type of the input box for the userkey */
function togglePass () { function togglePass () {
togglePasswordField.addEventListener('click', function () { togglePasswordField.addEventListener('click', function () {
var value = passField.value var value = passField.value
...@@ -37,27 +46,26 @@ ...@@ -37,27 +46,26 @@
}) })
} }
togglePass() togglePass()
/*Allows the user to select the info button.
This toggles the help information on the main screen.
It can either hide the information or unhide the information */
function infoView () { function infoView () {
var begin = true var begin = true
var infoButton = document.getElementById('infobtn') var infoButton = document.getElementById('infobtn')
var instructions = document.getElementById('how') var instructions = document.getElementById('how')
var cool = document.getElementById('testing')
/* var htmlpage=document.getElementsByTagName('html'); */
var htmlpage = document.getElementById('page') var htmlpage = document.getElementById('page')
infoButton.addEventListener('click', function () { infoButton.addEventListener('click', function () {
/* Javascript || && are the logical operators */
if (begin === true || instructions.style.display === 'none') { if (begin === true || instructions.style.display === 'none') {
instructions.style.display = 'inline' instructions.style.display = 'inline'
htmlpage.style.width = '500px' htmlpage.style.width = '500px'
htmlpage.style.height = '400px' htmlpage.style.height = '480px'
cool.innerHTML = instructions.style.display
begin = false begin = false
} else { } else {
instructions.style.display = 'none' instructions.style.display = 'none'
htmlpage.style.width = '500px' htmlpage.style.width = '500px'
htmlpage.style.height = '270px' htmlpage.style.height = '280px'
cool.innerHTML = instructions.style.display
} }
}) })
} }
...@@ -66,6 +74,9 @@ ...@@ -66,6 +74,9 @@
passField.addEventListener('keyup', generate.bind(this)) passField.addEventListener('keyup', generate.bind(this))
domainField.addEventListener('keyup', generate.bind(this)) domainField.addEventListener('keyup', generate.bind(this))
/*This function creates a Pretzel Pass object to call on JS methods from the password module
It uses local storage to grab the current domain, the salt file, the user key
The password is outputted and displayed to the main screen */
function generate () { function generate () {
var masterPassword = document.getElementById('master').value var masterPassword = document.getElementById('master').value
var output = document.getElementById('output') var output = document.getElementById('output')
...@@ -78,4 +89,8 @@ ...@@ -78,4 +89,8 @@
output.value = generatedPassword output.value = generatedPassword
} }
})() })()
src/src/browser_action/js/browser_action_Testing.js 0 → 100644
+ 75
− 0
View file @ 47a07680
/*This file is used for testing the user interface */
(function(){
/*This function tests the ability for the user key button to hide and
unhide the text for the user key*/
function testingUserKeyHidden(){
var togglePasswordField = document.getElementById('togglePasswordField')
var passField = document.getElementById('master')
togglePasswordField.addEventListener('click', function () {
console.log("TestCase 1: ")
console.log("The user key button has been clicked")
if (passField.type === 'text') {
console.log("User Key type was text!")
console.log("User Key type is now password!")
} else {
console.log("User Key type was password!")
console.log("User Key type is now text!")
}
})
}
testingUserKeyHidden()
/*This function tests the info button to verify that it
correctly displays the help information*/
function testingInfoButton(){
var begin = true
var infoButton = document.getElementById('infobtn')
var instructions = document.getElementById('how')
var htmlpage = document.getElementById('page')
infoButton.addEventListener('click', function () {
console.log("TestCase 2: ")
console.log("The info button has been clicked!")
/*The other script is run prior to switch the value. Testing must be opposite */
if (begin === true || instructions.style.display !== 'none') {
console.log("The help information should now be visible!")
begin = false
} else {
console.log("The help information should no longer visible!")
}
})
}
testingInfoButton()
/*This function tests the programs ability to get the correct
domain of the current tab upon clicking on the main page */
function testingTabChanged (tab) {
var wholePage = document.getElementById('page')
wholePage.addEventListener('click', function () {
console.log("TestCase 3: ")
var domainField = document.getElementById('domain')
chrome.tabs.getSelected(null, function (tab) {
domain = new URL(tab.url).hostname
console.log("This is the value of the actual domain: "+ domain)
})
var domainFieldNew = document.getElementById('domain')
console.log("This is the value of the domain box: "+domainFieldNew.value)
})
}
testingTabChanged()
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
})()
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment