Browse Source

Edit credential

pull/64/head
brantje 2 years ago
parent
commit
a7409c6070
No account linked to committer's email address

+ 314
- 51
css/browser_action.css View File

@@ -1,8 +1,252 @@
/* CSS used here will be applied after bootstrap.css */
/* Header Footer Styles */
.radial-progress {
display: inline-block;
left: 5px;
top: 0px;
position: relative;
width: 10px;
height: 10px;
background-color: #d6dadc;
border-radius: 50%; }
.radial-progress .circle .mask, .radial-progress .circle .fill {
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.radial-progress .circle .mask {
clip: rect(0px, 10px, 10px, 5px); }
.radial-progress .circle .mask .fill {
clip: rect(0px, 5px, 10px, 0px);
background-color: #1565c0; }

.list {
width: 100%; }
.list .list-item {
position: relative;
padding: 12px 15px; }
.list .list-item:hover {
background-color: #e4e4e4; }
.list .list-item .title {
font-weight: bold;
font-size: 15px; }
.list .list-item .info {
font-size: 13px; }
.list .list-item .extra {
font-size: 13px;
color: #737373; }
.list .list-item .edit {
position: absolute;
right: 15px;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 25px;
color: #737373; }
.list .list-item .mdi {
cursor: pointer; }

/* form starting stylings ------------------------------- */
.group {
position: relative;
margin-bottom: 45px; }

input {
font-size: 14px;
padding: 10px 10px 10px 5px;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #757575; }

input:focus {
outline: none; }

/* LABEL ======================================= */
label {
color: #999;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all; }

/* active state */
input:focus ~ label, input.ng-valid:not(.ng-empty) ~ label {
top: -20px;
font-size: 14px;
color: #1565c0; }

/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 100%; }

.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #1565c0;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all; }

.bar:before {
left: 50%; }

.bar:after {
right: 50%; }

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%; }

/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5; }

.group .mdi-content-copy, .pwField .mdi {
/*position: absolute;
right: 0;*/
margin-top: 5px;
float: right;
font-size: 15px;
cursor: pointer;
height: 32px;
padding-top: 6px;
padding-left: 9px;
width: 32px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
border-top-right-radius: 16px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
border-top-left-radius: 16px; }
.group .mdi-content-copy:hover, .pwField .mdi:hover {
text-decoration: none;
background-color: #e4e4e4; }

.pwField .mdi-content-copy ~ input {
width: calc(100% - 96px); }

.mdi-content-copy ~ input {
width: calc(100% - 32px); }

.mdi-content-copy ~ .bar {
width: calc(100% - 32px); }

/* active state */
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease; }

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from {
background: #1565c0; }
to {
width: 0;
background: transparent; } }
@-moz-keyframes inputHighlighter {
from {
background: #1565c0; }
to {
width: 0;
background: transparent; } }
@keyframes inputHighlighter {
from {
background: #1565c0; }
to {
width: 0;
background: transparent; } }
.md-btn {
position: relative;
margin: 0 15px 15px 15px;
padding: 0;
overflow: hidden;
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
color: #212121;
background-color: #fafafa;
cursor: pointer;
display: inline-block;
transition: background-color .3s; }

.md-btn.default, .btn:focus {
background-color: #106cc8;
color: rgba(255, 255, 255, 0.87); }

.md-btn.default:hover, .btn:focus {
background-color: #0159a2; }

.md-btn > * {
position: relative; }

.md-btn span {
display: inline-block;
padding: 12px 24px; }

.md-btn:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
padding-top: 0;
border-radius: 100%;
background-color: rgba(236, 240, 241, 0.3);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }

.md-btn:active:before {
width: 120%;
padding-top: 120%;
transition: width .2s ease-out, padding-top .2s ease-out; }

.md-btn.orange {
background-color: #e67e22; }

.md-btn.orange:hover, .btn.orange:focus {
background-color: #d35400; }

.md-btn.red {
background-color: #ff5722;
color: rgba(255, 255, 255, 0.87); }

.md-btn.red:hover, .btn.red:focus {
background-color: #f4511e; }

body {
width: 450px;
min-height: 350px; }
min-height: 350px;
font-family: 'Roboto', sans-serif; }

header {
width: 100%;
@@ -10,13 +254,11 @@ header {
background: #1565c0;
position: fixed;
top: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }

header.toggled {
width: calc(100% - 250px); }
z-index: 100;
-webkit-transition: all 0.250s ease;
-moz-transition: all 0.250s ease;
-o-transition: all 0.250s ease;
transition: all 0.250s ease; }

body.toggled {
overflow-x: hidden; }
@@ -24,13 +266,10 @@ body.toggled {
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }

#wrapper.toggled {
padding-left: 250px; }
-webkit-transition: all 0.250s ease;
-moz-transition: all 0.250s ease;
-o-transition: all 0.250s ease;
transition: all 0.250s ease; }

#sidebar-wrapper {
z-index: 1000;
@@ -40,11 +279,12 @@ body.toggled {
height: 100%;
margin-left: -250px;
overflow: hidden;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
background: #fff;
-webkit-transition: all 0.250s ease;
-moz-transition: all 0.250s ease;
-o-transition: all 0.250s ease;
transition: all 0.250s ease;
border-right: 1px solid #c9c9c9; }

#wrapper.toggled #sidebar-wrapper {
width: 250px;
@@ -52,8 +292,8 @@ body.toggled {

#page-content-wrapper {
width: 100%;
position: absolute;
margin-top: 60px;
/*position: absolute;*/
padding-top: 50px;
overflow-y: auto; }

#wrapper.toggled #page-content-wrapper {
@@ -61,6 +301,9 @@ body.toggled {
margin-right: -250px;
/* width: calc(100% - 250px);*/ }

.ng-hide {
display: none; }

/* Sidebar Styles */
.sidebar-nav {
position: absolute;
@@ -69,36 +312,56 @@ body.toggled {
margin: 0;
padding: 0;
list-style: none; }
.sidebar-nav li {
line-height: 55px; }
.sidebar-nav li a {
cursor: pointer;
display: block;
text-decoration: none;
color: #000; }
.sidebar-nav li a .mdi {
padding-left: 15px;
padding-right: 15px;
color: #737373;
cursor: pointer; }
.sidebar-nav li a:hover {
text-decoration: none;
background-color: #e4e4e4; }
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none; }
.sidebar-nav > .sidebar-brand {
height: 50px;
font-size: 18px;
line-height: 50px;
text-indent: 20px;
background-color: #1565c0;
border-right: 1px solid #104d92; }
.sidebar-nav > .sidebar-brand span {
display: block;
text-decoration: none;
color: #fff; }
.sidebar-nav > .sidebar-brand span:hover {
color: #fff;
background: none; }
.sidebar-nav > .sidebar-brand span .mdi {
padding-left: 15px;
padding-right: 15px;
float: right;
color: #fff;
cursor: pointer; }

.sidebar-nav li {
text-indent: 20px;
line-height: 40px; }

.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999; }

.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2); }

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none; }

.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px; }

.sidebar-nav > .sidebar-brand a {
color: #999999; }
.menuToggler {
position: absolute;
background-color: transparent;
width: calc(100% - 250px);
height: 350px;
z-index: 9999999;
right: 0; }

.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none; }
.edit_credential {
padding-top: 30px;
padding-left: 15px;
padding-right: 15px; }

.menu-icon {
padding: 8px 15px;

+ 0
- 25
css/main.css View File

@@ -149,31 +149,6 @@ input[type="password"], input[type="text"] {
.pad5 {
padding: 5px; }

.radial-progress {
display: inline-block;
left: 5px;
top: 2px;
position: relative;
width: 10px;
height: 10px;
background-color: #d6dadc;
border-radius: 50%; }
.radial-progress .circle .mask, .radial-progress .circle .fill {
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.radial-progress .circle .mask {
clip: rect(0px, 10px, 10px, 5px); }
.radial-progress .circle .mask .fill {
clip: rect(0px, 5px, 10px, 0px);
background-color: #97a71d; }

.ng-hide {
display: none; }


+ 2
- 0
css/vendor/materialdesignicons.min.css
File diff suppressed because it is too large
View File


BIN
fonts/materialdesignicons-webfont.eot View File


+ 5808
- 0
fonts/materialdesignicons-webfont.svg
File diff suppressed because it is too large
View File


BIN
fonts/materialdesignicons-webfont.ttf View File


BIN
fonts/materialdesignicons-webfont.woff View File


BIN
fonts/materialdesignicons-webfont.woff2 View File


+ 18
- 33
html/browser_action/browser_action.html View File

@@ -36,6 +36,7 @@

<script src="/js/ui/popup/controllers/main.js"></script>
<script src="/js/ui/popup/controllers/settings.js"></script>
<script src="/js/ui/popup/controllers/setup.js"></script>
<script src="/js/ui/popup/controllers/password_prompt.js"></script>
<script src="/js/ui/popup/controllers/list.js"></script>
<script src="/js/ui/popup/controllers/search.js"></script>
@@ -46,11 +47,14 @@
<script src="/js/ui/popup/directives/copyText.js"></script>
<script src="/js/ui/popup/filters/translate.js"></script>

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<link href="/css/vendor/bootstrap.css" media="all" rel="stylesheet" />
<link href="/css/vendor/bootstrap-theme.css" media="all" rel="stylesheet" />
<link href="/css/vendor/font-awesome.css" media="all" rel="stylesheet" />
<link href="/css/vendor/materialdesignicons.min.css" media="all" rel="stylesheet" />
<link href="/css/browser_action.css" media="all" rel="stylesheet" />

</head>
<body ng-controller="MainCtrl" ng-class="{'toggle': bodyOverflow}">
<div id="wrapper" ng-class="{'toggled': menuIsOpen}">
@@ -58,30 +62,24 @@
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Shortcuts</a>
<span>
Passman
<i class="mdi mdi-close" ng-click="toggleMenu()"></i>
</span>
</li>
<li>
<a href="#">Overview</a>
<a ng-click="goto('list')"><i class="mdi mdi-format-list-bulleted"></i> List</a>
</li>
<li>
<a href="#">Events</a>
<a ng-click="goto('search')" title="{{'search' | translate}}"><i class="mdi mdi-magnify"></i> Search</a>
</li>
<li>
<a href="#">About</a>
<a ng-click="goto('settings')" title="{{'settings' | translate}}"><i class="mdi mdi-settings"></i> {{'settings' | translate}}</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6YS8F97PETVU2" target="_blank"
title="{{'donate_button_title' | translate}}"
rel="nofollow noopener noreferrer"><i class="mdi mdi-credit-card"></i> Donate</a>
</li>
</ul>
</div>
@@ -89,27 +87,14 @@

<header class="header" ng-class="{'toggled': menuIsOpen}">
<div class="menu-icon" ng-click="toggleMenu()">
<i class="fa fa-bars"></i>
<i class="mdi mdi-menu"></i>
</div>
</header>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">

<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
<a class="btn btn-default" >Toggle Menu</a>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<div id="page-content-wrapper" ng-view>
</div>
<div class="menuToggler" ng-click="toggleMenu()" ng-show="menuIsOpen">

</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>

+ 55
- 1
html/browser_action/views/edit_credential.html View File

@@ -1,3 +1,56 @@
<div class="edit_credential">
<div class="group">
<copy-text text="credential.label"></copy-text>
<input type="text" ng-model="credential.label" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>{{'label' | translate}}</label>
</div>
<div class="group">
<copy-text text="credential.username"></copy-text>
<input type="text" ng-model="credential.username">
<span class="highlight"></span>
<span class="bar"></span>
<label>{{'username' | translate}}</label>
</div>
<div class="group">
<copy-text text="credential.email"></copy-text>
<input type="text" ng-model="credential.email">
<span class="highlight"></span>
<span class="bar"></span>
<label>{{ 'email' | translate}}</label>
</div>
<div class="group pwField">
<copy-text text="credential.password"></copy-text>
<i class="mdi mdi-refresh pointer" ng-click="generatePassword()"></i>
<i class="pointer mdi" ng-class="{'mdi-eye': !pwFieldShown, 'mdi-eye-off': pwFieldShown}" ng-click="togglePwField()"></i>
<input type="text" ng-model="credential.password" ng-if="pwFieldShown">
<input type="password" ng-model="credential.password" ng-if="!pwFieldShown">
<span class="highlight"></span>
<span class="bar"></span>
<label>{{'password' | translate}}</label>
</div>
<div class="group">
<input type="password" ng-model="credential.password_repeat">
<span class="highlight"></span>
<span class="bar"></span>
<label>{{'password_repeat' | translate}}</label>
</div>
<div class="group">
<copy-text text="credential.url"></copy-text>
<input type="text" ng-model="credential.url">
<span class="highlight"></span>
<span class="bar"></span>
<label>{{'url' | translate}}</label>
</div>
<button class="md-btn default" ng-click="saveCredential()" ng-disabled="saving">
<span>{{'save' | translate}}</span>
</button>
<button class="md-btn" ng-click="cancel()">
<span>{{'cancel' | translate}}</span>
</button>
</div>
<!--
<table class="editCredential table">
<tr>
<td>{{'label' | translate}}</td>
@@ -78,4 +131,5 @@
<button class="btn btn-success" ng-click="saveCredential()" ng-disabled="saving">{{'save' |
translate}}
</button>
<button class="btn btn-default" ng-click="cancel()">{{'cancel' | translate}}</button>
<button class="btn btn-default" ng-click="cancel()">{{'cancel' | translate}}</button>
-->

html/browser_action/views/main.html → html/browser_action/views/list.html View File

@@ -1,21 +1,25 @@
<div class="col-xs-12 nopadding pwcontainer">
<div ng-show="found_credentials.length === 0">
<div class="list">
<!-- <div ng-show="found_credentials.length === 0">
{{ 'no_credentials_found_for_site' | translate}}
</div>
<div ng-show="found_credentials.length > 0">{{'credentials_found_for_site' | translate:found_credentials.length.toString() }}</div>
<div class="credential" ng-repeat="credential in found_credentials">
<div class="col-xs-10 nopadding">{{credential.label}}<br/>
<small>{{credential.username}}</small><br />
<small ng-if="credential.otp.secret"> {{'one_time_password' | translate}}: <div otp-generator secret="credential.otp.secret"></div></small>
<div ng-show="found_credentials.length > 0">{{'credentials_found_for_site' | translate:found_credentials.length.toString() }}</div> -->
<div class="list-item" ng-repeat="credential in found_credentials">
<div class="title">
{{credential.label}}
</div>
<div class="info">
{{credential.username}}
</div>
<div class="extra" ng-if="credential.otp.secret">
{{'one_time_password' | translate}}: <div otp-generator secret="credential.otp.secret"></div>
</div>
<div class="edit" ng-click="editCredential(credential)">

<div class="mdi mdi-pencil"></div>
</div>
<div class="col-xs-2">

</div>
</div>
</div>
<!--
<div class="footer">
<div style="position: absolute; left: 50%; margin-top: -7px; width: 110px;">
<div style="position: relative; left: -50%; margin-top: 1.3em;">
@@ -31,6 +35,5 @@
><i class="fa fa-paypal"></i> </a>
</div>
<div class="bottomBtn pull-right" ng-click="lockExtension()" title="{{'lock_extension' | translate}}"><i class="fa fa-lock"></i></div>
<!-- <a class="btn btn-success pull-right"
>Donate</a> -->
</div>

</div> -->

+ 122
- 82
html/browser_action/views/settings.html View File

@@ -1,84 +1,124 @@
<div class="col-xs-12">
<h4 align="center">{{'please_enter_nextcloud_credentials' | translate}}:</h4>
<div class="alerts alert alert-warning" ng-if="errors.length > 0">
<li ng-repeat="error in errors">{{error}}</li>
</div>
<div>
<table class="table">
<tr>
<td>
<small>{{'server_url' | translate}}:</small>
</td>
<td><input type="url" class="form-control input-sm" id="host" ng-model="settings.nextcloud_host"
required ng-debounce="1000">
</td>
</tr>
<tr ng-if="settings.nextcloud_host.indexOf('http://') == 0">
<td colspan=2>
<div class="alert alert-warning">Warning: This connection is insecure!</div>
</td>
</tr>
<tr>
<td>
<small>{{'username' | translate}}:</small>
</td>
<td><input type="text" class="form-control input-sm" id="user" ng-model="settings.nextcloud_username"
required ng-debounce="1000"></td>
</tr>
<tr>
<td>
<small>{{'password' | translate}}:</small>
</td>
<td><input type="password" class="form-control input-sm" id="password"
ng-model="settings.nextcloud_password" required ng-debounce="1000"></td>
</tr>
<tr class="login-req" ng-if="vaults">
<td>
<small>{{'select_default_vault' | translate}}:</small>
</td>
<td><select id="defaultVault" class="form-control input-sm" ng-model="settings.default_vault" required
ng-options="vault.name for vault in vaults track by vault.guid"></select></td>
</tr>
<tr class="login-req" id="vaultPassRow" ng-show="settings.default_vault != ''">
<td valign="top">
<small>{{'vault_password' | translate}}</small>
</td>
<td>
<input type="password" class="form-control input-sm" id="vaultPassword"
ng-model="settings.vault_password">
</td>
</tr>
<tr class="login-req">
<td valign="top">
<small>{{'ignored_sites' | translate}}</small>
</td>
<td>

<h4 align="center">{{'please_enter_nextcloud_credentials' | translate}}:</h4>
<div class="alerts alert alert-warning" ng-if="errors.length > 0">
<li ng-repeat="error in errors">{{error}}</li>
</div>
<div style="max-height: 350px; overflow-y: auto;">
<table class="table">
<tr>
<td><small>{{'server_url' | translate}}:</small></td>
<td><input type="url" class="form-control input-sm" id="host" ng-model="settings.nextcloud_host" required ng-debounce="1000">
</td>
</tr>
<tr ng-if="settings.nextcloud_host.indexOf('http://') == 0">
<td colspan=2><div class="alert alert-warning">Warning: This connection is insecure!</div></td>
</tr>
<tr>
<td><small>{{'username' | translate}}:</small></td>
<td><input type="text" class="form-control input-sm" id="user" ng-model="settings.nextcloud_username" required ng-debounce="1000"></td>
</tr>
<tr>
<td><small>{{'password' | translate}}:</small></td>
<td><input type="password" class="form-control input-sm" id="password" ng-model="settings.nextcloud_password" required ng-debounce="1000"></td>
</tr>
<tr class="login-req" ng-if="vaults">
<td><small>{{'select_default_vault' | translate}}:</small></td>
<td><select id="defaultVault" class="form-control input-sm" ng-model="settings.default_vault" required ng-options="vault.name for vault in vaults track by vault.guid"></select></td>
</tr>
<tr class="login-req" id="vaultPassRow" ng-show="settings.default_vault != ''">
<td valign="top">
<small>{{'vault_password' | translate}}</small>
</td>
<td>
<input type="password" class="form-control input-sm" id="vaultPassword" ng-model="settings.vault_password">
</td>
</tr>
<tr class="login-req">
<td valign="top">
<small>{{'ignored_sites' | translate}}</small>
</td>
<td>

<ul class="ignored_sites">
<li ng-repeat="site in settings.ignored_sites">{{site}} <i class="fa fa-trash pull-right" ng-click="removeSite(site)"></i></li>
<li ng-show="settings.ignored_sites.length === 0">{{'no_sites_ignored' | translate}}</li>
<li><input type="text" class="form-control" placeholder="Enter a domain or tld" ng-model="ignoreSite" ng-enter="addSite(ignoreSite)"> </li>
</ul>
</td>
</tr>
<tr>
<td><small>{{'refresh_timer' | translate}}:</small></td>
<td><input type="text" id="timer" class="form-control input-sm" ng-model="settings.refreshTime"></td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="ignoreProtocol" ng-model="settings.ignoreProtocol"><small>{{'ignore_protocol' | translate}}</small></td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="ignoreSubdomain" ng-model="settings.ignoreSubdomain"><small>{{'ignore_subdomain' | translate}}</small></td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="ignorePath" ng-model="settings.ignorePort"><small>{{'ignore_port' | translate}}</small></td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="disableAutoFill" ng-model="settings.disableAutoFill"><small>{{'disable_autofill' | translate}}</small></td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="disableBrowserAutoFill" ng-model="settings.disable_browser_autofill"><small>{{'disable_browser_autofill' | translate}}</small></td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="disablePasswordPicker" ng-model="settings.disablePasswordPicker"><small>{{'disable_password_picker' | translate}}</small></td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="enableDebug" ng-model="settings.debug"><small>{{'enable_debug' | translate}}</small></td>
</tr>
<tr>
<td colspan=2 align="center">
<button class="btn btn-success" ng-click="saveSettings()" ng-disabled="saving"><i ng-show="saving" ng-class="{'fa-spinner fa-spin': saving}" class="fa"></i> {{'save' | translate}}</button>
<button class="btn btn-warning" ng-click="cancel()">{{'cancel' | translate}}</button>
</td>
</tr>
</table>
<div class="version">
{{extension}}
<ul class="ignored_sites">
<li ng-repeat="site in settings.ignored_sites">{{site}} <i class="fa fa-trash pull-right"
ng-click="removeSite(site)"></i></li>
<li ng-show="settings.ignored_sites.length === 0">{{'no_sites_ignored' | translate}}</li>
<li><input type="text" class="form-control" placeholder="Enter a domain or tld"
ng-model="ignoreSite" ng-enter="addSite(ignoreSite)"></li>
</ul>
</td>
</tr>
<tr>
<td>
<small>{{'refresh_timer' | translate}}:</small>
</td>
<td><input type="text" id="timer" class="form-control input-sm" ng-model="settings.refreshTime"></td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="ignoreProtocol" ng-model="settings.ignoreProtocol">
<small>{{'ignore_protocol' | translate}}</small>
</td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="ignoreSubdomain" ng-model="settings.ignoreSubdomain">
<small>{{'ignore_subdomain' | translate}}</small>
</td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="ignorePath" ng-model="settings.ignorePort">
<small>{{'ignore_port' | translate}}</small>
</td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="disableAutoFill" ng-model="settings.disableAutoFill">
<small>{{'disable_autofill' | translate}}</small>
</td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="disableBrowserAutoFill"
ng-model="settings.disable_browser_autofill">
<small>{{'disable_browser_autofill' | translate}}</small>
</td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="disablePasswordPicker"
ng-model="settings.disablePasswordPicker">
<small>{{'disable_password_picker' | translate}}</small>
</td>
</tr>
<tr>
<td colspan=2><input type="checkbox" id="enableDebug" ng-model="settings.debug">
<small>{{'enable_debug' | translate}}</small>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<button class="btn btn-success" ng-click="saveSettings()" ng-disabled="saving"><i ng-show="saving"
ng-class="{'fa-spinner fa-spin': saving}"
class="fa"></i>
{{'save' | translate}}
</button>
<button class="btn btn-warning" ng-click="cancel()">{{'cancel' | translate}}</button>
</td>
</tr>
</table>
<div class="version">
{{extension}}
</div>
</div>
</div>
</div>

+ 1
- 1
js/ui/popup/app.js View File

@@ -42,7 +42,7 @@
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
templateUrl: 'views/list.html',
controller: 'ListCtrl'
})
.when('/search', {

+ 0
- 9
js/ui/popup/controllers/list.js View File

@@ -118,15 +118,6 @@
});



$scope.goto_settings = function () {
window.location = '#!/settings';
};

$scope.goto_search = function () {
window.location = '#!/search';
};

$scope.editCredential = function (credential) {
window.location = '#!/edit/' + credential.guid;
};

+ 3
- 9
js/ui/popup/controllers/main.js View File

@@ -47,17 +47,11 @@
}, 1500);
};

$scope.goto_settings = function () {
window.location = '#!/settings';
$scope.goto = function (page) {
window.location = '#!/'+page;
$scope.menuIsOpen = false;
};

$scope.goto_search = function () {
window.location = '#!/search';
};

$scope.editCredential = function (credential) {
window.location = '#!/edit/' + credential.guid;
};
}]);
}());


+ 1
- 1
js/ui/popup/directives/copyText.js View File

@@ -39,7 +39,7 @@
scope:{
text: '='
},
template: '<i class="pointer fa fa-copy" ng-click="copyText()"></i>',
template: '<i class="pointer mdi mdi-content-copy" ng-click="copyText()"></i>',
replace: true,
link: function (scope, el) {
scope.copyText = function () {

+ 98
- 67
style/browser_action.scss View File

@@ -1,25 +1,30 @@
/* CSS used here will be applied after bootstrap.css */
/* Header Footer Styles */
body{
@import "partials/cicle";
@import "partials/list";
@import "partials/material-input";
@import "partials/buttons";
$sidebarWidth: 250px;
body {
width: 450px;
min-height: 350px;
font-family: 'Roboto', sans-serif;
}

header {
width: 100%;
height: 50px;
background: #1565c0;
position: fixed;
top: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
header.toggled {
width: calc(100% - 250px);
z-index: 100;
-webkit-transition: all 0.250s ease;
-moz-transition: all 0.250s ease;
-o-transition: all 0.250s ease;
transition: all 0.250s ease;

}

body.toggled{
body.toggled {
overflow-x: hidden;
}

@@ -27,48 +32,49 @@ body.toggled{

#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
-webkit-transition: all 0.250s ease;
-moz-transition: all 0.250s ease;
-o-transition: all 0.250s ease;
transition: all 0.250s ease;

}

#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
left: $sidebarWidth;
width: 0;
height: 100%;
margin-left: -250px;
margin-left: -$sidebarWidth;
overflow: hidden;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #fff;
-webkit-transition: all 0.250s ease;
-moz-transition: all 0.250s ease;
-o-transition: all 0.250s ease;
transition: all 0.250s ease;
border-right: 1px solid #c9c9c9;
}

#wrapper.toggled #sidebar-wrapper {
width: 250px;
width: $sidebarWidth;
overflow-x: hidden;
}

#page-content-wrapper {
width: 100%;
position: absolute;
margin-top:60px;
/*position: absolute;*/
padding-top: 50px;
overflow-y: auto;
}

#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
/* width: calc(100% - 250px);*/
margin-right: -$sidebarWidth;
/* width: calc(100% - 250px);*/
}
.ng-hide{
display: none;
}

/* Sidebar Styles */

.sidebar-nav {
@@ -78,43 +84,68 @@ body.toggled{
margin: 0;
padding: 0;
list-style: none;
}

.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}

.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}

.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
li {
line-height: 55px;
a {
cursor: pointer;
display: block;
text-decoration: none;
color: #000;
.mdi{
padding-left: 15px;
padding-right: 15px;
color: $linkColor;
cursor: pointer;
}

&:hover {
text-decoration: none;
background-color: #e4e4e4;

}
&:active, &:focus {
text-decoration: none;
}
}
}
> .sidebar-brand {
height: 50px;
font-size: 18px;
line-height: 50px;
text-indent: 20px;
background-color: #1565c0;
border-right: 1px solid darken(#1565c0, 10%);
span {

display: block;
text-decoration: none;
color: #fff;
&:hover {
color: #fff;
background: none;
}
.mdi{
padding-left: 15px;
padding-right: 15px;
float: right;
color: #fff;
cursor: pointer;
}
}
}
}
.menuToggler{
position: absolute;
background-color: transparent;
width: calc(100% - 250px);
height: 350px;
z-index: 9999999;
right: 0;
}
.edit_credential{
padding-top: 30px;
padding-left: 15px;
padding-right: 15px;
}

.menu-icon {

+ 0
- 0
style/css/buttons.css View File


+ 24
- 0
style/css/cicle.css View File

@@ -0,0 +1,24 @@
.radial-progress {
display: inline-block;
left: 5px;
top: 2px;
position: relative;
width: 10px;
height: 10px;
background-color: #d6dadc;
border-radius: 50%; }
.radial-progress .circle .mask, .radial-progress .circle .fill {
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.radial-progress .circle .mask {
clip: rect(0px, 10px, 10px, 5px); }
.radial-progress .circle .mask .fill {
clip: rect(0px, 5px, 10px, 0px);
background-color: #97a71d; }

+ 0
- 0
style/css/list.css View File


+ 97
- 0
style/css/material-input.css View File

@@ -0,0 +1,97 @@
/* form starting stylings ------------------------------- */
.group {
position: relative;
margin-bottom: 45px; }

input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575; }

input:focus {
outline: none; }

/* LABEL ======================================= */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all; }

/* active state */
input:focus ~ label, input:valid ~ label {
top: -20px;
font-size: 14px;
color: #5264AE; }

/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 300px; }

.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all; }

.bar:before {
left: 50%; }

.bar:after {
right: 50%; }

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%; }

/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5; }

/* active state */
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease; }

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from {
background: #5264AE; }
to {
width: 0;
background: transparent; } }
@-moz-keyframes inputHighlighter {
from {
background: #5264AE; }
to {
width: 0;
background: transparent; } }
@keyframes inputHighlighter {
from {
background: #5264AE; }
to {
width: 0;
background: transparent; } }

+ 0
- 35
style/main.scss View File

@@ -191,41 +191,6 @@ input[type="password"], input[type="text"] {
padding: 5px;
}

.radial-progress {
$circle-size : 10px;
$circle-background : #d6dadc;
$circle-color : #97a71d;
$transition-length : 0.5s;
display: inline-block;
left: 5px;
top: 2px;
position: relative;
width: $circle-size;
height: $circle-size;

background-color: $circle-background;
border-radius: 50%;
.circle {
.mask, .fill {
width: $circle-size;
height: $circle-size;
position: absolute;

border-radius: 50%;

@include transition(transform $transition-length);
@include backface-visibility(hidden);
}
.mask {
clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
.fill {
clip: rect(0px, $circle-size/2, $circle-size, 0px);
background-color: $circle-color;
}
}
}
}
.ng-hide{
display: none;
}

+ 82
- 0
style/partials/buttons.scss View File

@@ -0,0 +1,82 @@
.md-btn {
position: relative;

margin: 0 15px 15px 15px;
padding: 0;

overflow: hidden;

border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
color: rgb(33,33,33);
background-color: rgb(250,250,250);
cursor: pointer;
display: inline-block;
transition: background-color .3s;
}

.md-btn.default, .btn:focus {
background-color: rgb(16,108,200);
color: rgba(255,255,255,0.87);
}
.md-btn.default:hover, .btn:focus {
background-color: rgb(1,89,162);
}

.md-btn > * {
position: relative;
}

.md-btn span {
display: inline-block;
padding: 12px 24px;
}

.md-btn:before {
content: "";

position: absolute;
top: 50%;
left: 50%;

display: block;
width: 0;
padding-top: 0;

border-radius: 100%;

background-color: rgba(236, 240, 241, .3);

-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.md-btn:active:before {
width: 120%;
padding-top: 120%;

transition: width .2s ease-out, padding-top .2s ease-out;
}


.md-btn.orange {
background-color: #e67e22;
}

.md-btn.orange:hover, .btn.orange:focus {
background-color: #d35400;
}

.md-btn.red {
background-color: rgb(255,87,34);
color: rgba(255,255,255,0.87);
}

.md-btn.red:hover, .btn.red:focus {
background-color: rgb(244,81,30);
}

+ 36
- 0
style/partials/cicle.scss View File

@@ -0,0 +1,36 @@
@import "../bourbon/bourbon";
.radial-progress {
$circle-size : 10px;
$circle-background : #d6dadc;
$circle-color : #1565c0;
$transition-length : 0.5s;
display: inline-block;
left: 5px;
top: 0px;
position: relative;
width: $circle-size;
height: $circle-size;

background-color: $circle-background;
border-radius: 50%;
.circle {
.mask, .fill {
width: $circle-size;
height: $circle-size;
position: absolute;

border-radius: 50%;

@include transition(transform $transition-length);
@include backface-visibility(hidden);

}
.mask {
clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
.fill {
clip: rect(0px, $circle-size/2, $circle-size, 0px);
background-color: $circle-color;
}
}
}
}

+ 40
- 0
style/partials/list.scss View File

@@ -0,0 +1,40 @@

$linkColor: #737373;
.list {
width: 100%;

.list-item {
&:hover{
background-color: #e4e4e4;
}
position: relative;
padding: 12px 15px;
.title {
font-weight: bold;
font-size: 15px;
}

.info {
font-size: 13px;
}

.extra {
font-size: 13px;
color: $linkColor;
}

.edit {
position: absolute;
right: 15px;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 25px;
color: $linkColor;
}
.mdi{
cursor: pointer;
}
}
}

+ 159
- 0
style/partials/material-input.scss View File

@@ -0,0 +1,159 @@
@import "../bourbon/bourbon";

/* form starting stylings ------------------------------- */
.group {
position: relative;
margin-bottom: 45px;
}

input {
font-size: 14px;
padding: 10px 10px 10px 5px;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #757575;
}

input:focus {
outline: none;
}

/* LABEL ======================================= */
label {
color: #999;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;

transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label, input.ng-valid:not(.ng-empty) ~ label {
top: -20px;
font-size: 14px;
color: #1565c0;
}

/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 100%;
}

.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #1565c0;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}

.bar:before {
left: 50%;
}

.bar:after {
right: 50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;

}
.group .mdi-content-copy, .pwField .mdi{
/*position: absolute;
right: 0;*/
margin-top:5px;
float: right;
font-size: 15px;
cursor: pointer;
height: 32px;
padding-top: 6px;
padding-left: 9px;
width: 32px;
$border: 16px;
@include border-top-radius($border);
@include border-right-radius($border);
@include border-bottom-radius($border);
@include border-left-radius($border);
&:hover {
text-decoration: none;
background-color: #e4e4e4;

}
}

.pwField{

.mdi-content-copy ~ input{
width: calc(100% - 96px);
}
}

.mdi-content-copy ~ input{
width: calc(100% - 32px);
}
.mdi-content-copy ~ .bar{
width: calc(100% - 32px);
}
/* active state */
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from {
background: #1565c0;
}
to {
width: 0;
background: transparent;
}
}

@-moz-keyframes inputHighlighter {
from {
background: #1565c0;
}
to {
width: 0;
background: transparent;
}
}

@keyframes inputHighlighter {
from {
background: #1565c0;
}
to {
width: 0;
background: transparent;
}
}

Loading…
Cancel
Save