Skip to content

Commit e517e21

Browse files
PalmerALPalmerAL
authored
Merge pull request #1283 from minbrowser/password-storage-2
Add built-in password management
2 parents a7caff3 + 6ceffc3 commit e517e21

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+922
-250
lines changed

‎css/base.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,3 +89,9 @@ a {
8989
.dark-mode a {
9090
color: dodgerblue;
9191
}
92+
93+
.dark-mode input {
94+
background-color: rgb(52, 58, 68);
95+
color: white;
96+
border-color: transparent;
97+
}

‎css/modal.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
#overlay {
2+
display: none;
3+
}
4+
5+
/* show the overlay when the searchbar is open or a dialog is visible */
6+
body.is-edit-mode #overlay,
7+
body.is-modal-mode #overlay {
8+
display: block;
9+
position: fixed;
10+
top: 0;
11+
left: 0;
12+
width: 100vw;
13+
height: 100vh;
14+
background: rgba(255, 255, 255, 0.5);
15+
z-index: 1;
16+
pointer-events: none;
17+
}
18+
body.is-modal-mode #overlay {
19+
/* In modal mode, the tab bar should be disabled */
20+
z-index: 5;
21+
pointer-events: all;
22+
}
23+
body.dark-mode #overlay {
24+
background: rgba(0, 0, 0, 0.4);
25+
}
26+
27+
.modal {
28+
width: 100vw;
29+
max-width: 700px;
30+
position: absolute;
31+
top: 50%;
32+
left: 50%;
33+
z-index: 9;
34+
transform: translate(-50%, -50%);
35+
padding: 1em 1.25em;
36+
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
37+
border-radius: 8px;
38+
background: #fff;
39+
animation: modal-appear 0.2s;
40+
}
41+
42+
@keyframes modal-appear {
43+
0% {
44+
opacity: 0;
45+
transform: translate(-50%, -50%) scale(0.85);
46+
}
47+
100% {
48+
opacity: 1;
49+
}
50+
}
51+
52+
.dark-mode .modal {
53+
background-color: rgb(33, 37, 43);
54+
}
55+
56+
.modal-close-button {
57+
position: absolute;
58+
top: 0.66em;
59+
right: 0.66em;
60+
font-size: 1.66em !important;
61+
opacity: 0.75;
62+
border-radius: 50%;
63+
padding: 0.05em;
64+
}
65+
66+
.modal-close-button:hover {
67+
opacity: 1;
68+
background: rgba(0,0, 0, 0.075);
69+
}
70+
71+
.dark-mode .modal-close-button:hover {
72+
background: rgba(255, 255, 255, 0.15);
73+
}
74+
75+
.modal-title {
76+
font-size: 1.5em;
77+
margin-top: 0;
78+
margin-bottom: 1em;
79+
max-width: 90%;
80+
}

‎css/passwordCapture.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
#password-capture-bar {
2+
position: absolute;
3+
top: calc(36px + var(--control-space-top));
4+
left: 0;
5+
padding: 0.5em 1.5em;
6+
width: 100%;
7+
border-bottom: 1px #ddd solid;
8+
line-height: 2em;
9+
}
10+
11+
.dark-mode #password-capture-bar {
12+
background: rgb(41, 44, 52);
13+
color: white;
14+
border-bottom-color: #777;
15+
}
16+
17+
#password-capture-description {
18+
margin-right: 1.5em;
19+
}
20+
21+
#password-capture-save {
22+
background: royalblue;
23+
color: white;
24+
padding: 0.33em 2em;
25+
border-radius: 3px;
26+
font-size: 14px;
27+
}
28+
29+
#password-capture-save:hover {
30+
background: rgb(72, 117, 252);
31+
}
32+
33+
#password-capture-ignore {
34+
background: rgba(0, 0, 0, 0.1);
35+
padding: 0.33em 1em;
36+
border-radius: 3px;
37+
margin-left: 0.75em;
38+
margin-right: 2em;
39+
font-size: 14px;
40+
}
41+
42+
#password-capture-ignore:hover {
43+
background: rgba(0, 0, 0, 0.075);
44+
}
45+
46+
.dark-mode #password-capture-ignore {
47+
background: rgba(255, 255, 255, 0.1);
48+
}
49+
50+
.dark-mode #password-capture-ignore:hover {
51+
background: rgba(255, 255, 255, 0.15);
52+
}
53+
54+
#password-capture-username {
55+
margin-right: 0.5em;
56+
}
57+
58+
#password-capture-bar input:invalid {
59+
border: 2px rgb(255, 121, 121) solid;
60+
border-radius: 3px;
61+
}
62+
63+
#password-capture-reveal-password {
64+
vertical-align: text-bottom;
65+
font-size: 1.1em;
66+
padding: 0 0.25em;
67+
margin-right: 1em;
68+
}
69+
70+
.password-capture-section {
71+
display: inline-block;
72+
}

‎css/passwordManager.css

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,12 @@
11
#manager-setup-dialog {
2-
width: 100%;
3-
max-width: 500px;
4-
border-radius: 8px;
2+
max-width: 550px;
53
padding: 1em;
6-
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
7-
z-index: 999;
8-
background-color: #fff;
94
}
105

116
#manager-setup-heading {
127
font-size: 1.6em;
138
}
149

15-
.dark-mode #manager-setup-dialog {
16-
background-color: rgb(33, 37, 43);
17-
}
18-
1910
.drag-and-drop-box {
2011
height: 200px;
2112
width: 100%;

‎css/passwordViewer.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
#password-viewer-empty {
2+
padding: 0.5em 0;
3+
opacity: 0.6;
4+
text-align: center;
5+
}
6+
7+
#password-viewer-list {
8+
max-height: 70vh;
9+
overflow: auto;
10+
}
11+
12+
#password-viewer-list > div {
13+
display: flex;
14+
margin: 0.75em 0;
15+
}
16+
17+
#password-viewer-list > div > * + * {
18+
margin-left: 0.5em;
19+
}
20+
21+
#password-viewer-list > div > input {
22+
flex: 1;
23+
min-width: 0;
24+
}
25+
26+
#password-viewer .domain-name {
27+
width: 30%;
28+
overflow: hidden;
29+
text-overflow: ellipsis;
30+
}

‎css/tabBar.css

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -184,32 +184,6 @@ body.linux #menu-button {
184184
opacity: 0;
185185
}
186186

187-
/* show the overlay in edit mode */
188-
189-
#overlay {
190-
display: none;
191-
}
192-
193-
body.is-edit-mode #overlay,
194-
body.is-modal-mode #overlay {
195-
display: block;
196-
position: fixed;
197-
top: 0;
198-
left: 0;
199-
width: 100vw;
200-
height: 100vh;
201-
background: rgba(255, 255, 255, 0.5);
202-
z-index: 1;
203-
pointer-events: none;
204-
}
205-
body.is-modal-mode #overlay {
206-
/* In modal mode, the tab bar should be disabled */
207-
z-index: 5;
208-
pointer-events: all;
209-
}
210-
body.dark-mode #overlay {
211-
background: rgba(0, 0, 0, 0.4);
212-
}
213187
/* hide the lock icon unless its the current tab */
214188

215189
.tab-item:not(.active) .icon-tab-not-secure {

‎css/taskOverlay.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ body:not(.touch) .task-container:not(.collapsed):not(:hover) .task-collapse-butt
155155
font-size: 1.2em;
156156
color: inherit;
157157
border: 0;
158-
background: none;
158+
background-color: transparent !important;
159159
opacity: 0.75;
160160
margin: 0.5em;
161161
}

‎index.html

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
<link rel="stylesheet" href="css/base.css" />
1111
<link rel="stylesheet" href="css/windowControls.css" />
12+
<link rel="stylesheet" href="css/modal.css"/>
1213
<link rel="stylesheet" href="css/tabBar.css" />
1314
<link rel="stylesheet" href="css/tabEditor.css" />
1415
<link rel="stylesheet" href="css/taskOverlay.css" />
@@ -19,6 +20,8 @@
1920
<link rel="stylesheet" href="css/findinpage.css" />
2021
<link rel="stylesheet" href="css/downloadManager.css" />
2122
<link rel="stylesheet" href="css/passwordManager.css" />
23+
<link rel="stylesheet" href="css/passwordCapture.css" />
24+
<link rel="stylesheet" href="css/passwordViewer.css" />
2225
<link rel="stylesheet" href="node_modules/dragula/dist/dragula.min.css" />
2326
<link rel="stylesheet" href="ext/icons/iconfont.css" />
2427
</head>
@@ -165,8 +168,10 @@
165168
<button id="download-close-button" class="i carbon:close"></button>
166169
</div>
167170

168-
<div class="centered" id="manager-setup-dialog" hidden>
169-
<h3 id="manager-setup-heading"></h3>
171+
<div class="modal" id="manager-setup-dialog" hidden>
172+
<h3 class="modal-title" id="manager-setup-heading"></h3>
173+
<button id="manager-setup-close" class="modal-close-button i carbon:close"></button>
174+
170175
<div id="manager-setup-instructions-primary">
171176
<div class="light-fade" data-string="passwordManagerSetupStep1" data-allowHTML></div>
172177
<div class="spacer"></div>
@@ -187,11 +192,30 @@ <h3 id="manager-setup-heading"></h3>
187192

188193
<div class="buttons">
189194
<input type="button" id="manager-setup-disable" data-value="disableAutofill" />
190-
<input type="button" id="manager-setup-cancel" data-value="autofillNotNow" />
191195
</div>
192196

193197
</div>
194198

199+
<div id="password-capture-bar" hidden>
200+
<span id="password-capture-description"></span>
201+
<input id="password-capture-username" type="text" required/>
202+
<span class="password-capture-section">
203+
<input id="password-capture-password" type="password" required/>
204+
<button id="password-capture-reveal-password" class="i carbon:view"></button>
205+
</span>
206+
<span class="password-capture-section">
207+
<button id="password-capture-save" data-string="passwordCaptureSave"></button>
208+
<button id="password-capture-ignore" data-string="passwordCaptureDontSave"></button>
209+
</span>
210+
</div>
211+
212+
<div id="password-viewer" class="modal" hidden>
213+
<h2 class="modal-title" data-string="savedPasswordsHeading"></h2>
214+
<button class="modal-close-button i carbon:close"></button>
215+
<div id="password-viewer-empty" data-string="savedPasswordsEmpty" hidden></div>
216+
<div id="password-viewer-list"></div>
217+
</div>
218+
195219
<!-- add scripts in Gruntfile.js -->
196220

197221
<script src="dist/bundle.js"></script>

‎js/default.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ window.throttle = function (fn, threshhold, scope) {
5656
return function () {
5757
var context = scope || this
5858

59-
var now = +new Date
59+
var now = +new Date()
6060
var args = arguments
6161
if (last && now < last + threshhold) {
6262
// hold on to it
@@ -140,6 +140,8 @@ require('defaultKeybindings.js').initialize()
140140
require('pdfViewer.js').initialize()
141141
require('autofillSetup.js').initialize()
142142
require('passwordManager/passwordManager.js').initialize()
143+
require('passwordManager/passwordCapture.js').initialize()
144+
require('passwordManager/passwordViewer.js').initialize()
143145
require('util/theme.js').initialize()
144146
require('userscripts.js').initialize()
145147

‎js/defaultKeybindings.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const defaultKeybindings = {
5252

5353
const sourceTab = tabs.get(tabs.getSelected())
5454
// strip tab id so that a new one is generated
55-
const newTab = tabs.add({...sourceTab, id: undefined})
55+
const newTab = tabs.add({ ...sourceTab, id: undefined })
5656

5757
browserUI.addTab(newTab, { enterEditMode: false })
5858
})
@@ -126,6 +126,11 @@ const defaultKeybindings = {
126126
keybindings.defineShortcut({ keys: 'esc' }, function (e) {
127127
tabEditor.hide()
128128

129+
if (modalMode.enabled() && modalMode.onDismiss) {
130+
modalMode.onDismiss()
131+
modalMode.onDismiss = null
132+
}
133+
129134
// exit full screen mode
130135
webviews.callAsync(tabs.getSelected(), 'executeJavaScript', 'if(document.webkitIsFullScreen){document.webkitExitFullscreen()}')
131136

@@ -223,7 +228,7 @@ const defaultKeybindings = {
223228
lastReload = time
224229
})
225230

226-
keybindings.defineShortcut({keys: 'mod+='}, function () {
231+
keybindings.defineShortcut({ keys: 'mod+=' }, function () {
227232
webviewGestures.zoomWebviewIn(tabs.getSelected())
228233
})
229234

0 commit comments

Comments
 (0)