Skip to content

94 upgrade UI for site login component popup #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
samarthgirish2025 merged 4 commits into from
Apr 25, 2025
Merged

94 upgrade UI for site login component popup #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6cc044e
tailwind css bundled into build
Ssharma1230 Apr 23, 2025
4a7be2e
Moved popup to right side of screen
Ssharma1230 Apr 25, 2025
35ed0ad
Made sign up fancy and added logo to extension
Ssharma1230 Apr 25, 2025
3ffbf73
added eslint disable for components bundle
Ssharma1230 Apr 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions extension/src/hashpass/app/site_login_popup/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import React, { useEffect, useState } from 'react';
import Site_LogIn from "./site_login_component"
import '../globals.css';

export default function Site_Signup_Popup() {
const [domain, setDomain] = useState('');
Expand All @@ -17,11 +18,11 @@ export default function Site_Signup_Popup() {
}, []);

return (
<div className="w-64 p-4 bg-white shadow-lg rounded-lg text-center">
<Site_LogIn/>
<div style={{ fontWeight: 'bold', marginTop: '8px' }}>
<div className="w-full max-w-md mx-auto p-4 bg-white shadow-xl rounded-2xl text-center">
<Site_LogIn />
<div className="font-bold text-lg mt-4 text-gray-700">
{domain}
</div>
</div>
);
);
}
34 changes: 21 additions & 13 deletions extension/src/hashpass/app/site_login_popup/site_login_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,23 +38,31 @@ export default function Site_LogIn() {
};


return (
<div className="max-w-md mx-auto p-6 bg-white shadow-lg rounded-xl">
<h2 className="text-xl font-bold mb-4">Enter Simple Passphrase to log in to site</h2>
<label className="block text-sm font-medium text-gray-700">Simple Passphrase:</label>
return (
<div className="w-[350px] mt-4 p-6 bg-white shadow-2xl rounded-2xl relative">
<h2 className="text-2xl font-semibold text-gray-800 mb-6 text-center">
Log In with HashPass
</h2>

<div className="mb-5">
<label className="block text-sm font-medium text-gray-600 mb-2">
Enter your passphrase:
</label>
<input
type="text"
value={keyString}
onChange={(e) => setKeyString(e.target.value)}
className="w-full p-2 border rounded-md mb-3"
placeholder="Enter Simple Passphrase"
placeholder="Simple Passphrase"
className="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition duration-200"
/>

<button
onClick={handlePassEntry}
className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600">
Generate Password to Login
</button>
</div>
);

<button
onClick={handlePassEntry}
className="w-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white py-2 rounded-lg font-medium hover:from-blue-600 hover:to-indigo-600 transition duration-300"
>
Generate Password & Login
</button>
</div>
);
}
6 changes: 3 additions & 3 deletions extension/src/hashpass/app/site_signup_popup/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ export default function Site_Signup_Popup() {
}, []);

return (
<div className="w-64 p-4 bg-white shadow-lg rounded-lg text-center">
<Site_SignUp/>
<div style={{ fontWeight: 'bold', marginTop: '8px' }}>
<div className="w-full max-w-md mx-auto p-4 bg-white shadow-xl rounded-2xl text-center">
<Site_SignUp />
<div className="font-bold text-lg mt-4 text-gray-700">
{domain}
</div>
</div>
Expand Down
146 changes: 77 additions & 69 deletions extension/src/hashpass/app/site_signup_popup/site_signup_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,77 +5,85 @@ import {calculatePassword} from '../security_components/components/password_gene
import { parse } from "tldts";

export default function Site_SignUp() {
const UUID = "f98699a0-d010-4a68-833e-fc9cbbcdf800"
const userIdEncrypted = "DSvanR4myji5VmzC06OutTH+nsVUbcOc0pqP7iLPgePsrNj5obsMXkZd+yI9m6MRzf/Xeq921dzq73rvTi/zEQ=="
// valid simple pass for testing is Passpass@1

const [keyString, setKeyString] = useState("");

const handlePassEntry = async () => {
console.log("Generate password button clicked");
console.log("Key String: " + keyString);
console.log("userIdEncrypted: " + userIdEncrypted)

const decryptedText = await decrypt(userIdEncrypted, keyString);
console.log("Decrypted Data: " + decryptedText);

if(decryptedText === UUID){
console.log("Valid Simple passphrase: User Authenticated")
const UUID = "f98699a0-d010-4a68-833e-fc9cbbcdf800"
const userIdEncrypted = "DSvanR4myji5VmzC06OutTH+nsVUbcOc0pqP7iLPgePsrNj5obsMXkZd+yI9m6MRzf/Xeq921dzq73rvTi/zEQ=="
// valid simple pass for testing is Passpass@1

const domain = parse(window.location.href).domain;
console.log("Parsed Domain:", domain);
try {
const response = await fetch("https://8fy84busdk.execute-api.us-east-1.amazonaws.com/API/insertDomainName", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
UUID,
domain
})
});
if (!response.ok) {
throw new Error("Failed to add domain to DB");
}
const result = await response.json();
console.log("Domain successfully added:", result);
} catch (err) {
console.error("Error adding domain:", err);
}
const [keyString, setKeyString] = useState("");

const password = await calculatePassword(keyString);
console.log("Password String: ", password)

chrome.runtime.sendMessage({
action: "fillPassword",
passphrase: password
}, (response) => {
console.log("Message acknowledged by service worker", response);
});
}
else{
console.log("Invalid Simple Passphrase")
const handlePassEntry = async () => {
console.log("Generate password button clicked");
console.log("Key String: " + keyString);
console.log("userIdEncrypted: " + userIdEncrypted)

const decryptedText = await decrypt(userIdEncrypted, keyString);
console.log("Decrypted Data: " + decryptedText);

if(decryptedText === UUID){
console.log("Valid Simple passphrase: User Authenticated")

const domain = parse(window.location.href).domain;
console.log("Parsed Domain:", domain);
try {
const response = await fetch("https://8fy84busdk.execute-api.us-east-1.amazonaws.com/API/insertDomainName", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
UUID,
domain
})
});
if (!response.ok) {
throw new Error("Failed to add domain to DB");
}
};
const result = await response.json();
console.log("Domain successfully added:", result);
} catch (err) {
console.error("Error adding domain:", err);
}

const password = await calculatePassword(keyString);
console.log("Password String: ", password)

chrome.runtime.sendMessage({
action: "fillPassword",
passphrase: password
}, (response) => {
console.log("Message acknowledged by service worker", response);
});
}
else{
console.log("Invalid Simple Passphrase")
}
};

return (
<div className="w-64 p-4 bg-white shadow-lg rounded-lg text-center">
<h2 className="text-lg font-semibold mb-2">Sign Up</h2>
<p className="text-sm text-gray-600 mb-4">Click the button to generate password for site</p>
<label className="block text-sm font-medium text-gray-700">Simple Passphrase:</label>
<input
type="text"
value={keyString}
onChange={(e) => setKeyString(e.target.value)}
className="w-full p-2 border rounded-md mb-3"
placeholder="Enter Simple Passphrase"
/>
<button
onClick={handlePassEntry}
className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600">
Generate Password to Login
</button>
</div>
);
return (
<div className="w-[350px] mt-4 p-6 bg-white shadow-2xl rounded-2xl relative">
<h2 className="text-2xl font-semibold text-gray-800 mb-6 text-center">
Sign Up with HashPass
</h2>

<div className="mb-5">
<label className="block text-sm font-medium text-gray-600 mb-2">
Enter your passphrase:
</label>
<input
type="text"
value={keyString}
onChange={(e) => setKeyString(e.target.value)}
placeholder="Simple Passphrase"
className="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition duration-200"
/>
</div>

<button
onClick={handlePassEntry}
className="w-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white py-2 rounded-lg font-medium hover:from-blue-600 hover:to-indigo-600 transition duration-300"
>
Generate Password to Sign Up
</button>
</div>
);
}
5 changes: 3 additions & 2 deletions extension/src/hashpass/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,13 @@
"@types/react": "^19",
"@types/react-dom": "^19",
"@types/ssh2": "^1.15.4",
"autoprefixer": "^10.4.21",
"esbuild": "^0.25.0",
"eslint": "^9",
"eslint-config-next": "15.1.6",
"jest": "^29.7.0",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"postcss": "^8.5.3",
"tailwindcss": "^3.4.17",
"ts-node": "^10.9.2",
"typescript": "^5"
}
Expand Down
6 changes: 6 additions & 0 deletions extension/src/hashpass/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {

Check warning on line 1 in extension/src/hashpass/postcss.config.js

View workflow job for this annotation

GitHub Actions / build (18.x) 

Assign object to a variable before exporting as module default

Check warning on line 1 in extension/src/hashpass/postcss.config.js

View workflow job for this annotation

GitHub Actions / build (20.x) 

Assign object to a variable before exporting as module default

Check warning on line 1 in extension/src/hashpass/postcss.config.js

View workflow job for this annotation

GitHub Actions / build (22.x) 

Assign object to a variable before exporting as module default
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
58 changes: 40 additions & 18 deletions extension/src/hashpass/public/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,56 @@
// Function to inject a login popup into the page using the bundled TSX component
function injectLoginPopup() {
const container = document.createElement('div');
container.id = 'hashpass-login-popup';
container.style.position = 'fixed';
container.style.top = '20%';
container.style.left = '50%';
container.style.transform = 'translateX(-50%)';
container.style.zIndex = '10000';
document.body.appendChild(container);
const host = document.createElement('div');
host.id = 'hashpass-login-popup';
host.style.position = 'fixed';
host.style.bottom = '40px';
host.style.right = '40px';
host.style.top = 'unset';
host.style.left = 'unset';
host.style.transform = 'none';
host.style.zIndex = '10000';

const shadow = host.attachShadow({ mode: 'open' });
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = chrome.runtime.getURL('tailwind.css');
shadow.appendChild(link);
const reactContainer = document.createElement('div');
shadow.appendChild(reactContainer);

document.body.appendChild(host);

if (window.Components && typeof window.Components.renderSiteLogIn === 'function') {
window.Components.renderSiteLogIn(container);
window.Components.renderSiteLogIn(reactContainer);
} else {
console.error('Login component function not available.');
}
}

// Function to inject a signup popup into the page using the bundled TSX component
function injectSignupPopup() {
const container = document.createElement('div');
container.id = 'hashpass-signup-popup';
container.style.position = 'fixed';
container.style.top = '20%';
container.style.left = '50%';
container.style.transform = 'translateX(-50%)';
container.style.zIndex = '10000';
document.body.appendChild(container);
const host = document.createElement('div');
host.id = 'hashpass-signup-popup';
host.style.position = 'fixed';
host.style.bottom = '40px';
host.style.right = '40px';
host.style.top = 'unset';
host.style.left = 'unset';
host.style.transform = 'none';
host.style.zIndex = '10000';

const shadow = host.attachShadow({ mode: 'open' });
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = chrome.runtime.getURL('tailwind.css');
shadow.appendChild(link);
const reactContainer = document.createElement('div');
shadow.appendChild(reactContainer);

document.body.appendChild(host);

if (window.Components && typeof window.Components.renderSiteSignUp === 'function') {
window.Components.renderSiteSignUp(container);
window.Components.renderSiteSignUp(reactContainer);
} else {
console.error('Signup component function not available.');
}
Expand Down
24 changes: 12 additions & 12 deletions extension/src/hashpass/public/dist/components.bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65138,22 +65138,22 @@ var Components = (() => {
console.log("Invalid Simple Passphrase");
}
};
return /* @__PURE__ */ import_react2.default.createElement("div", { className: "max-w-md mx-auto p-6 bg-white shadow-lg rounded-xl" }, /* @__PURE__ */ import_react2.default.createElement("h2", { className: "text-xl font-bold mb-4" }, "Enter Simple Passphrase to log in to site"), /* @__PURE__ */ import_react2.default.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Simple Passphrase:"), /* @__PURE__ */ import_react2.default.createElement(
return /* @__PURE__ */ import_react2.default.createElement("div", { className: "w-[350px] mt-4 p-6 bg-white shadow-2xl rounded-2xl relative" }, /* @__PURE__ */ import_react2.default.createElement("h2", { className: "text-2xl font-semibold text-gray-800 mb-6 text-center" }, "Log In with HashPass"), /* @__PURE__ */ import_react2.default.createElement("div", { className: "mb-5" }, /* @__PURE__ */ import_react2.default.createElement("label", { className: "block text-sm font-medium text-gray-600 mb-2" }, "Enter your passphrase:"), /* @__PURE__ */ import_react2.default.createElement(
"input",
{
type: "text",
value: keyString,
onChange: (e3) => setKeyString(e3.target.value),
className: "w-full p-2 border rounded-md mb-3",
placeholder: "Enter Simple Passphrase"
placeholder: "Simple Passphrase",
className: "w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition duration-200"
}
), /* @__PURE__ */ import_react2.default.createElement(
)), /* @__PURE__ */ import_react2.default.createElement(
"button",
{
onClick: handlePassEntry,
className: "w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600"
className: "w-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white py-2 rounded-lg font-medium hover:from-blue-600 hover:to-indigo-600 transition duration-300"
},
"Generate Password to Login"
"Generate Password & Login"
));
}

Expand Down Expand Up @@ -65640,22 +65640,22 @@ var Components = (() => {
console.log("Invalid Simple Passphrase");
}
};
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-64 p-4 bg-white shadow-lg rounded-lg text-center" }, /* @__PURE__ */ import_react4.default.createElement("h2", { className: "text-lg font-semibold mb-2" }, "Sign Up"), /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-sm text-gray-600 mb-4" }, "Click the button to generate password for site"), /* @__PURE__ */ import_react4.default.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Simple Passphrase:"), /* @__PURE__ */ import_react4.default.createElement(
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-[350px] mt-4 p-6 bg-white shadow-2xl rounded-2xl relative" }, /* @__PURE__ */ import_react4.default.createElement("h2", { className: "text-2xl font-semibold text-gray-800 mb-6 text-center" }, "Sign Up with HashPass"), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-5" }, /* @__PURE__ */ import_react4.default.createElement("label", { className: "block text-sm font-medium text-gray-600 mb-2" }, "Enter your passphrase:"), /* @__PURE__ */ import_react4.default.createElement(
"input",
{
type: "text",
value: keyString,
onChange: (e3) => setKeyString(e3.target.value),
className: "w-full p-2 border rounded-md mb-3",
placeholder: "Enter Simple Passphrase"
placeholder: "Simple Passphrase",
className: "w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition duration-200"
}
), /* @__PURE__ */ import_react4.default.createElement(
)), /* @__PURE__ */ import_react4.default.createElement(
"button",
{
onClick: handlePassEntry,
className: "w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600"
className: "w-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white py-2 rounded-lg font-medium hover:from-blue-600 hover:to-indigo-600 transition duration-300"
},
"Generate Password to Login"
"Generate Password to Sign Up"
));
}

Expand Down
Binary file added extension/src/hashpass/public/logo/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading