password autofill for extension implemented

Vaultilo · Mar 3, 2020 · 16e2268 · 16e2268
1 parent 5e0787b
commit 16e2268
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 63 deletions.
diff --git a/src/components/Extension/Extension_files/icons/128.png b/src/components/Extension/Extension_files/icons/128.png
diff --git a/src/components/Extension/Extension_files/icons/16.png b/src/components/Extension/Extension_files/icons/16.png
diff --git a/src/components/Extension/Extension_files/icons/32.png b/src/components/Extension/Extension_files/icons/32.png
diff --git a/src/components/Extension/Extension_files/icons/48.png b/src/components/Extension/Extension_files/icons/48.png
diff --git a/src/components/Extension/Extension_files/icons/64.png b/src/components/Extension/Extension_files/icons/64.png
diff --git a/src/components/Extension/Extension_files/index.html b/src/components/Extension/Extension_files/index.html
diff --git a/src/components/Extension/Extension_files/manifest.json b/src/components/Extension/Extension_files/manifest.json
diff --git a/src/components/Extension/List Views/ExtPwShow.js b/src/components/Extension/List Views/ExtPwShow.js
@@ -2,8 +2,25 @@ import React from 'react';
 import '../extension.css';
 import { Link } from 'react-router-dom';
 import Footer from '../Footer';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 export default function ExPwShow(props) {
+  const applyPassword = (url,username,password) =>{
+    window.parent.postMessage(
+      {
+          url: url,
+          username: username,
+          password: password,
+          app:"vaultilo"
+
+      },
+      "*"
+  );
+
+  }
+ const  renderTooltip=(props) => {
+    return <Tooltip {...props}>Click to apply</Tooltip>;
+  }
   const passwords = props.passwords;
   return (
     <div className="extension-container">
@@ -19,30 +36,43 @@ export default function ExPwShow(props) {
         <div className="title">Passwords</div>
         <div className="content-list">
           {passwords.map(item => {
-            const { id, domainName, domainAddress } = item;
+            const { id, domainName, domainAddress,domainUsername,password } = item;
             return (
-              <Link
-                to={{
-                  pathname: '/extension/password/view',
-                  state: {
-                    id: id,
-                  },
-                }}
-                style={{ textDecoration: 'none' }}
-              >
-                <div className="item d-flex justify-content-start" key={id}>
-                  <div className="item-img">
-                    <i className="icon-password" />
-                  </div>
-                  <div className="item-detail">
-                    <div className="text">{domainName}</div>
-                    <div className="sub-text">{domainAddress}</div>
-                  </div>
-                  <div className="view-details">
-                    <i className="icon-eye" />
+              <div className="item d-flex justify-content-start" key={id}>
+                <div className="item-img">
+                  <i className="icon-password" />
+                </div>
+                <div className="item-detail">
+                  <div className="text">{domainName}</div>
+                  <div className="sub-text">{domainAddress}</div>
+                </div>
+                <OverlayTrigger
+                  placement="top"
+                  delay={{ show: 100, hide: 100 }}
+                  overlay={(props)=>renderTooltip(props)}
+                >
+                  <div className="apply-details">
+                    <i
+                      className="icon-apply-save"
+                      onClick={() => applyPassword(domainAddress, domainUsername, password)}
+                    />
                   </div>
+                </OverlayTrigger>
+
+                <div className="view-details" >
+                  <Link
+                    to={{
+                      pathname: '/extension/password/view',
+                      state: {
+                        id: id,
+                      },
+                    }}
+                    style={{ textDecoration: 'none'}}
+                  >
+                    <i className="icon-eye"/>
+                  </Link>
                 </div>
-              </Link>
+              </div>
             );
           })}
         </div>

diff --git a/src/components/Extension/extension.css b/src/components/Extension/extension.css
@@ -157,7 +157,20 @@
 .item-img {
   color: #e0e0e0;
 }
+.apply-details{
+  position: absolute;
+  right: 40px;
+  display: none;
 
+}
+.apply-details i {
+  font-size: 18px;
+  color: #1cd8d2;
+}
+.apply-details a:hover{
+  text-decoration:none;
+  outline: none;
+}
 .view-details {
   position: absolute;
   right: 13px;
@@ -177,6 +190,9 @@
 .content-list .item:hover .view-details {
   display: block;
 }
+.content-list .item:hover .apply-details {
+  display: block;
+}
 
 .form-content {
   padding-top: 32px;

diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf
diff --git a/src/styles/icons.css b/src/styles/icons.css
@@ -73,3 +73,6 @@
 .icon-wallet:before {
   content: '\e910';
 }
+.icon-apply-save:before{
+  content: '\e911'
+}