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

Merge branch 'browser_action' into 'master' 

rev 0 User Interface

See merge request !6
parents d42b985d 4d125483
No related branches found
No related tags found
1 merge request!6rev 0 User Interface
Hide whitespace changes
Inline Side-by-side
src/src/browser_action/browser_action.html
+ 22
− 13
View file @ 6a738334
<!doctype html> <!doctype html>
<html> <html id="page">
<head> <head>
<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>
<!-- Add focusing on textboxes, reformating, info button at bottom right to show how to use, more javascript functions, make look professional, options button to link to ivans code, valid options, find a better pretzel flaticon.com, save different options for different domains and manage <!-- Add focusing on textboxes, reformating, make look professional, valid options, save different options for different domains and manage
...@@ -13,23 +13,31 @@ ...@@ -13,23 +13,31 @@
<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-->
<a href="../options/options.html">
<div id="settingsbtn" >
Settings
</div>
</a>
</div> </div>
<div id="how"> <div id="how">
<p>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>
<li>You, the user chooses a key (you will need to remember this)</li> <li>You <em>(the user)</em>, chooses a key <strong>(you will need to remember this)</strong></li>
<li>The system uses the key from the user, the domain of the webpage, and a salt stored locally</li> <li>The system uses the key provided the user, the domain of the webpage, and a salt(random string) stored locally</li>
<li>It concatenates the results from above and hashes the result many times</li> <li>The program concatenates the inputs from the step above and hashes the result several times</li>
<li>The options page allows you to customize the settings of the password</li> <li>The options page (settings button) allows you to customize the srequirements for your password</li>
<li>And the system gives you a secure password that you can use for the website</li> <li>The system returns a secure password that matches the preferences</li>
<li>You will no longer need to memorize complicated passwords to protect your personal info</li> <li>This password can be used for the current website.</li>
<li>Memorization is not important as the password will always be the same when given the same inputs.</li>
</ul> </ul>
</div> </div>
<div id="toggleField"> <div id="toggleField">
<form> <form>
Domain: <input class="inputbox" id="domain" type="text" value="Domain"><br> Domain: <input class="inputbox" id="domain" type="text" value="Domain" readonly><br>
UserKey: <input class="inputbox" id="master" type="password" name="userKey"><br> UserKey: <input class="inputbox" id="master" type="password" name="userKey"><br>
Password: <input class="inputbox" id="output" type="text" value="Please enter your User Key Above" readonly><br> Password: <input class="inputbox" id="output" type="text" value="Please enter your User Key Above" readonly><br>
...@@ -42,11 +50,12 @@ ...@@ -42,11 +50,12 @@
</label> </label>
</form> </form>
</div> </div>
<div id="infocircle"> <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="testing"> <p>
<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>
</body> </body>
......
src/src/browser_action/css/browser_action.css
+ 99
− 22
View file @ 6a738334
html{
background: #e6e6e6;
border: 2px solid #000000;
width: 500px;
height: 270px;
}
body{ body{
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-family: "Times New Roman"; font-family: "Times New Roman";
width: 500px;
height: 400px;
postion: relative; postion: relative;
} }
...@@ -13,9 +17,12 @@ body{ ...@@ -13,9 +17,12 @@ body{
display: inline; display: inline;
position: relative; position: relative;
top: 10px; top: 20px;
left: 80px; left: 60px;
margin:2px 5px 10px 5px; padding: 0 auto;
margin: 5 auto;
text-align: center;
} }
...@@ -24,7 +31,7 @@ body{ ...@@ -24,7 +31,7 @@ body{
float: left; float: left;
width: 50px; width: 50px;
height: 50px; height: 50px;
margin:2px 0px 10px 0px; margin:5px 10px 10px 10px;
} }
...@@ -42,10 +49,13 @@ body{ ...@@ -42,10 +49,13 @@ body{
position: relative; position: relative;
top: 5px; top: 5px;
/*visibility: hidden;*/ /*visibility: hidden;*/
display: none;
} }
#toggleField{ #toggleField{
margin: 2px 20px 2px 20px;
border: 2px dashed #000000; border: 2px dashed #000000;
padding: 10px; padding: 10px;
...@@ -74,7 +84,7 @@ body{ ...@@ -74,7 +84,7 @@ body{
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #ccc; background-color: #737373;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }
...@@ -118,26 +128,93 @@ input:checked + .slider:before { ...@@ -118,26 +128,93 @@ input:checked + .slider:before {
border-radius: 50%; border-radius: 50%;
} }
#infocircle{
clear: both; #infobtn {
float: right; height: 15px;
width: 20px; width: 15px;
height: 20px; background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%; border-radius: 100%;
background-color: #1a75ff; font-family: Georgia;
color: white; color: #1a0f00;
font-size: 15px;
padding: 3px;
text-decoration: none;
float: right;
text-align: center; text-align: center;
line-height: 20px; padding: 0 auto;
} margin: 4px;
}
#infobtn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #1aff8c, #00cc66);
background-image: -moz-linear-gradient(top, #1aff8c, #00cc66);
background-image: -ms-linear-gradient(top, #1aff8c, #00cc66);
background-image: -o-linear-gradient(top, #1aff8c, #00cc66);
background-image: linear-gradient(to bottom, #1aff8c, #00cc66);
/*
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
*/
text-decoration: none;
}
#settingsbtn {
margin: 10px 10px 10px 10px;
height: 20px;
background: #00cc66;
color: #1a0f00;
background-image: -webkit-linear-gradient(top, #ff9900, #b36b00);
background-image: -moz-linear-gradient(top, #ff9900, #b36b00);
background-image: -ms-linear-gradient(top, #ff9900, #b36b00);
background-image: -o-linear-gradient(top, #ff9900, #b36b00);
background-image: linear-gradient(to bottom, #ff9900, #b36b00);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Georgia;
/*color: #ffffff; white*/
font-size: 16px;
padding: 5px 20px 5px 20px;
text-decoration: none;
float: right;
#infocircle:focus{ /* ctrl s to save
background-color: red; auto allows centering from left to right
this is applicable for both margin and padding*/
padding: 0 auto;
width: 11%;
} }
#infocircle:hover{ #settingsbtn:hover {
background-color: #85adad; background: #3cb0fd;
border: 2px solid #b3d1ff; /*different colors for the top and bottom half*/
color: #404040;
background-image: -webkit-linear-gradient(top, #1aff8c, #00cc66);
background-image: -moz-linear-gradient(top, #1aff8c, #00cc66);
background-image: -ms-linear-gradient(top, #1aff8c, #00cc66);
background-image: -o-linear-gradient(top, #1aff8c, #00cc66);
background-image: linear-gradient(to bottom, #1aff8c, #00cc66);
text-decoration: none;
}
.larger{
font-size: 16px;
} }
#credit{
text-align: center;
padding: 0 auto;
}
\ No newline at end of file
src/src/browser_action/js/browser_action.js
+ 39
− 18
View file @ 6a738334
...@@ -16,18 +16,49 @@ ...@@ -16,18 +16,49 @@
} }
tabChanged() tabChanged()
togglePasswordField.addEventListener("click", function(){ function togglePass(){
var value=passField.value; togglePasswordField.addEventListener("click", function(){
if(passField.type=='text'){ var value=passField.value;
passField.type='password' if(passField.type=='text'){
passField.type='password'
}
else{
passField.type='text'
}
passField.value = value;
});
}
togglePass()
function infoView () {
var begin=true;
var infoButton = document.getElementById('infobtn')
var instructions = document.getElementById('how')
var cool = document.getElementById('testing')
/*var htmlpage=document.getElementsByTagName('html');*/
var htmlpage=document.getElementById('page');
infoButton.addEventListener("click", function(){
/*Javascript || && are the logical operators*/
if( begin===true || instructions.style.display ==="none" ){
instructions.style.display="inline";
htmlpage.style.width= "500px";
htmlpage.style.height= "400px";
cool.innerHTML=instructions.style.display;
begin=false;
} }
else{ else{
passField.type='text' instructions.style.display="none";
} htmlpage.style.width= "500px";
passField.value = value; htmlpage.style.height= "270px";
}); cool.innerHTML=instructions.style.display;
}
});
}
infoView()
passField.addEventListener('keyup', generate.bind(this)) passField.addEventListener('keyup', generate.bind(this))
domain.addEventListener('keyup', generate.bind(this)) domain.addEventListener('keyup', generate.bind(this))
...@@ -47,15 +78,5 @@ ...@@ -47,15 +78,5 @@
})(); })();
(function info () {
var infoButton = document.getElementById('infocircle')
var instructions = document.getElementById('how')
infoButton.addEventListener("click", function(){
instructions.style.visibility="visible";
/*instructions.setAttribute("display","inline")*/
});
})();
\ 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