LumeWeb
/
extension
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add new popup app to go to login, dashboard, and logout

This commit is contained in:
Derrick Hammer 2023-08-04 11:31:44 -04:00
parent 0e889ded3e
commit df1895f824
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
7 changed files with 333 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/manifest.json
View File

@ -64,5 +64,10 @@
"id": "contact@lumeweb.com",
"strict_min_version": "91.1.0"
}
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Lume Web",
"default_popup": "popup.html"
}
}

144
ui/apps/popup/App.scss Normal file
View File

@ -0,0 +1,144 @@
@font-face {
font-family: 'Jaldi';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../../fonts/Jaldi-Regular.woff2") format('woff2');
}
body {
background: #1D1D1D;
min-width: 15em;
}
.body {
background: #3B3B3B;
display: flex;
flex-direction: column;
.button-container {
margin: auto;
//max-width: 13.7em;
margin-bottom: 2em;
margin-left: 1em;
margin-right: 1em;
display: flex;
}
button {
display: flex;
border-radius: 5px;
padding-left: 1.6em;
padding-right: 1.6em;
padding-top: 0.8em;
padding-bottom: 0.8em;
margin: auto;
cursor: pointer;
border: none;
font-size: 1em;
color: #F2F2F2;
> svg, span {
flex: 1;
}
}
.dashboard-btn {
background: #1B1B1B;
box-shadow: 1px 0 5px 0 rgb(27, 27, 27, 0.75);
> svg {
margin-right: 1em;
height: 1.2em;
width: 1.2em;
}
}
.login-btn {
background: #1B1B1B;
box-shadow: 1px 0 5px 0 rgb(27, 27, 27, 0.75);
border: none;
&:hover {
background: #3B3B3B;
}
}
}
.connection-text {
font-family: Jaldi;
font-weight: 400;
font-size: 0.875em;
line-height: 2.1em;
color: #BFBFBF;
margin: auto;
padding-left: 2em;
padding-right: 2em;
padding-top: 1em;
margin-bottom: 2em;
}
.connection {
width: 100%;
max-width: 7em;
margin: auto;
margin-top: 2em;
}
.header {
display: flex;
width: 100%;
max-width: 100%;
min-width: 2.75em;
margin-bottom: 0.5em;
.icons {
display: flex;
}
.logo,
.exit,
.logout {
padding: 1em;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 2em;
height: 2em;
max-width: 1.2em;
max-height: 1.2em;
svg {
width: 100%;
height: 100%;
fill: #8E8E93; // Set the fill color to gray for both icons
}
}
.exit, .logout {
&:hover {
svg {
fill: #62C554;
}
}
}
.logo {
margin-right: auto;
&.connected {
svg {
fill: #62C554;
}
}
}
.exit {
margin-left: auto;
}
}

163
ui/apps/popup/App.tsx Normal file
View File

@ -0,0 +1,163 @@
import "./App.scss";
import { useEffect, useState } from "react";
import { init, loginComplete } from "@lumeweb/libkernel/kernel";
import browser from "webextension-polyfill";
import classNames from "classnames";
import { clearLoginKey } from "../../../shared/keys.js";
export default function App() {
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
init().then(() => {
loginComplete().then(() => {
setLoggedIn(true);
});
});
}, [loggedIn]);
function openDashboard() {
browser.tabs.create({
url: browser.runtime.getURL("dashboard.html"),
active: true,
});
}
function openAccount() {
browser.tabs.create({
url: browser.runtime.getURL("account.html"),
active: true,
});
}
function close() {
window.close();
}
async function logout() {
await clearLoginKey();
window.location.reload();
}
return (
<>
<div className="header">
<div className={classNames("logo", { connected: loggedIn })}>
<svg
viewBox="0 0 339.18999 339.19"
xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-425.68,-251.35)">
<g>
<path d="m 697.89,382.61 c -0.96,-3.95 -3.58,-7.25 -7.1,-9.09 -1.93,-1.01 -4.13,-1.59 -6.46,-1.59 H 653.6 c -20.14,-0.03 -30.35,-10.26 -30.35,-30.42 0,-0.02 0,-0.04 0,-0.06 v 0 -76.11 c 0,-0.55 -0.04,-1.09 -0.1,-1.62 -0.01,-0.13 -0.04,-0.25 -0.06,-0.37 -0.06,-0.41 -0.13,-0.82 -0.23,-1.22 -0.03,-0.12 -0.06,-0.24 -0.09,-0.36 -0.11,-0.42 -0.24,-0.84 -0.39,-1.25 -0.03,-0.08 -0.05,-0.15 -0.08,-0.23 -0.19,-0.48 -0.4,-0.96 -0.64,-1.41 -0.01,-0.03 -0.04,-0.05 -0.05,-0.08 -0.28,-0.52 -0.58,-1.03 -0.92,-1.51 -0.01,-0.01 -0.02,-0.02 -0.03,-0.04 -0.34,-0.47 -0.7,-0.92 -1.09,-1.34 -0.04,-0.05 -0.08,-0.09 -0.13,-0.14 -0.81,-0.86 -1.72,-1.61 -2.71,-2.24 -0.09,-0.06 -0.19,-0.11 -0.28,-0.17 -0.43,-0.26 -0.88,-0.5 -1.34,-0.71 -0.08,-0.04 -0.15,-0.08 -0.23,-0.11 -0.53,-0.23 -1.07,-0.43 -1.63,-0.6 -0.11,-0.03 -0.22,-0.06 -0.33,-0.09 -0.45,-0.12 -0.92,-0.22 -1.39,-0.3 -0.16,-0.03 -0.31,-0.05 -0.47,-0.07 -0.58,-0.07 -1.18,-0.13 -1.78,-0.13 0,0 0,0 0,0 v 0 c -0.73,0 -1.43,0.07 -2.13,0.18 -0.12,0.02 -0.25,0.03 -0.37,0.06 -0.67,0.12 -1.32,0.29 -1.96,0.5 -0.1,0.03 -0.2,0.07 -0.3,0.11 -1.33,0.48 -2.56,1.15 -3.67,1.99 -0.05,0.04 -0.1,0.08 -0.16,0.12 -0.56,0.43 -1.08,0.91 -1.57,1.42 -0.02,0.02 -0.04,0.04 -0.06,0.07 -1,1.07 -1.84,2.3 -2.46,3.65 0,0 0,0.01 0,0.01 -0.3,0.64 -0.54,1.31 -0.74,2 -0.01,0.04 -0.04,0.09 -0.05,0.13 -0.15,0.55 -0.27,1.12 -0.36,1.7 -0.01,0.08 -0.03,0.16 -0.04,0.24 -0.08,0.6 -0.13,1.2 -0.13,1.82 v 76.17 c 0,0.02 0,0.04 0,0.07 0.02,28.2 15.37,58.31 58.36,58.33 0.01,0 0.02,0 0.03,0 0.01,0 0.02,0 0.03,0 h 30.63 c 3.86,0 7.36,-1.57 9.89,-4.1 2.53,-2.53 4.1,-6.03 4.1,-9.89 v -0.02 c -0.01,-1.15 -0.17,-2.24 -0.43,-3.3 z" />
<path d="m 556.94,318.33 c -3.95,0.96 -7.25,3.58 -9.09,7.1 -1.01,1.93 -1.59,4.13 -1.59,6.46 v 30.73 c -0.03,20.14 -10.26,30.35 -30.42,30.35 -0.02,0 -0.04,0 -0.06,0 v 0 h -76.11 c -0.55,0 -1.09,0.04 -1.62,0.1 -0.13,0.01 -0.25,0.04 -0.37,0.06 -0.41,0.06 -0.82,0.13 -1.22,0.23 -0.12,0.03 -0.24,0.06 -0.36,0.09 -0.42,0.11 -0.84,0.24 -1.25,0.39 -0.08,0.03 -0.15,0.05 -0.23,0.08 -0.48,0.19 -0.96,0.4 -1.41,0.64 -0.03,0.01 -0.05,0.04 -0.08,0.05 -0.52,0.28 -1.03,0.58 -1.51,0.92 -0.01,0.01 -0.02,0.02 -0.04,0.03 -0.47,0.34 -0.92,0.7 -1.34,1.09 -0.05,0.04 -0.09,0.08 -0.14,0.13 -0.86,0.81 -1.61,1.72 -2.24,2.71 -0.06,0.09 -0.11,0.19 -0.17,0.28 -0.26,0.43 -0.5,0.88 -0.71,1.34 -0.04,0.08 -0.08,0.15 -0.11,0.23 -0.23,0.53 -0.43,1.07 -0.6,1.63 -0.03,0.11 -0.06,0.22 -0.09,0.33 -0.12,0.45 -0.22,0.92 -0.3,1.39 -0.03,0.16 -0.05,0.31 -0.07,0.47 -0.07,0.58 -0.13,1.18 -0.13,1.78 0,0 0,0 0,0 v 0 c 0,0.73 0.07,1.43 0.18,2.13 0.02,0.12 0.03,0.25 0.06,0.37 0.12,0.67 0.29,1.32 0.5,1.96 0.03,0.1 0.07,0.2 0.11,0.3 0.48,1.33 1.15,2.56 1.99,3.67 0.04,0.05 0.08,0.1 0.12,0.16 0.43,0.56 0.91,1.08 1.42,1.57 0.02,0.02 0.04,0.04 0.07,0.06 1.07,1 2.3,1.84 3.65,2.46 0,0 0.01,0 0.01,0 0.64,0.3 1.31,0.54 2,0.74 0.04,0.01 0.09,0.04 0.13,0.05 0.55,0.15 1.12,0.27 1.7,0.36 0.08,0.01 0.16,0.03 0.24,0.04 0.6,0.08 1.2,0.13 1.82,0.13 h 76.17 c 0.02,0 0.04,0 0.07,0 28.2,-0.02 58.31,-15.37 58.33,-58.36 0,-0.01 0,-0.02 0,-0.03 0,-0.01 0,-0.02 0,-0.03 v -30.63 c 0,-3.86 -1.57,-7.36 -4.1,-9.89 -2.53,-2.53 -6.03,-4.1 -9.89,-4.1 h -0.02 c -1.15,0.01 -2.24,0.17 -3.3,0.43 z" />
<path d="m 492.66,459.28 c 0.96,3.95 3.58,7.25 7.1,9.09 1.93,1.01 4.13,1.59 6.46,1.59 h 30.73 c 20.14,0.03 30.35,10.26 30.35,30.42 0,0.02 0,0.04 0,0.06 v 0 76.11 c 0,0.55 0.04,1.09 0.1,1.62 0.01,0.13 0.04,0.25 0.06,0.37 0.06,0.41 0.13,0.82 0.23,1.22 0.03,0.12 0.06,0.24 0.09,0.36 0.11,0.42 0.24,0.84 0.39,1.25 0.03,0.08 0.05,0.15 0.08,0.23 0.19,0.48 0.4,0.96 0.64,1.41 0.01,0.03 0.04,0.05 0.05,0.08 0.28,0.52 0.58,1.03 0.92,1.51 0.01,0.01 0.02,0.02 0.03,0.04 0.34,0.47 0.7,0.92 1.09,1.34 0.04,0.05 0.08,0.09 0.13,0.14 0.81,0.86 1.72,1.61 2.71,2.24 0.09,0.06 0.19,0.11 0.28,0.17 0.43,0.26 0.88,0.5 1.34,0.71 0.08,0.04 0.15,0.08 0.23,0.11 0.53,0.23 1.07,0.43 1.63,0.6 0.11,0.03 0.22,0.06 0.33,0.09 0.45,0.12 0.92,0.22 1.39,0.3 0.16,0.03 0.31,0.05 0.47,0.07 0.58,0.07 1.18,0.13 1.78,0.13 0,0 0,0 0,0 v 0 c 0.73,0 1.43,-0.07 2.13,-0.18 0.12,-0.02 0.25,-0.03 0.37,-0.06 0.67,-0.12 1.32,-0.29 1.96,-0.5 0.1,-0.03 0.2,-0.07 0.3,-0.11 1.33,-0.48 2.56,-1.15 3.67,-1.99 0.05,-0.04 0.1,-0.08 0.16,-0.12 0.56,-0.43 1.08,-0.91 1.57,-1.42 0.02,-0.02 0.04,-0.04 0.06,-0.07 1,-1.07 1.84,-2.3 2.46,-3.65 0,0 0,-0.01 0,-0.01 0.3,-0.64 0.54,-1.31 0.74,-2 0.01,-0.04 0.04,-0.09 0.05,-0.13 0.15,-0.55 0.27,-1.12 0.36,-1.7 0.01,-0.08 0.03,-0.16 0.04,-0.24 0.08,-0.6 0.13,-1.2 0.13,-1.82 v -76.17 c 0,-0.02 0,-0.04 0,-0.07 -0.02,-28.2 -15.37,-58.31 -58.36,-58.33 -0.01,0 -0.02,0 -0.03,0 -0.01,0 -0.02,0 -0.03,0 h -30.63 c -3.86,0 -7.36,1.57 -9.89,4.1 -2.53,2.53 -4.1,6.03 -4.1,9.89 v 0.02 c 0.01,1.15 0.17,2.24 0.43,3.3 z" />
<path d="m 633.61,523.56 c 3.95,-0.96 7.25,-3.58 9.09,-7.1 1.01,-1.93 1.59,-4.13 1.59,-6.46 v -30.73 c 0.03,-20.14 10.26,-30.35 30.42,-30.35 0.02,0 0.04,0 0.06,0 v 0 h 76.11 c 0.55,0 1.09,-0.04 1.62,-0.1 0.13,-0.01 0.25,-0.04 0.37,-0.06 0.41,-0.06 0.82,-0.13 1.22,-0.23 0.12,-0.03 0.24,-0.06 0.36,-0.09 0.42,-0.11 0.84,-0.24 1.25,-0.39 0.08,-0.03 0.15,-0.05 0.23,-0.08 0.48,-0.19 0.96,-0.4 1.41,-0.64 0.03,-0.01 0.05,-0.04 0.08,-0.05 0.52,-0.28 1.03,-0.58 1.51,-0.92 0.01,-0.01 0.02,-0.02 0.04,-0.03 0.47,-0.34 0.92,-0.7 1.34,-1.09 0.05,-0.04 0.09,-0.08 0.14,-0.13 0.86,-0.81 1.61,-1.72 2.24,-2.71 0.06,-0.09 0.11,-0.19 0.17,-0.28 0.26,-0.43 0.5,-0.88 0.71,-1.34 0.04,-0.08 0.08,-0.15 0.11,-0.23 0.23,-0.53 0.43,-1.07 0.6,-1.63 0.03,-0.11 0.06,-0.22 0.09,-0.33 0.12,-0.45 0.22,-0.92 0.3,-1.39 0.03,-0.16 0.05,-0.31 0.07,-0.47 0.07,-0.58 0.13,-1.18 0.13,-1.78 0,0 0,0 0,0 v 0 c 0,-0.73 -0.07,-1.43 -0.18,-2.13 -0.02,-0.12 -0.03,-0.25 -0.06,-0.37 -0.12,-0.67 -0.29,-1.32 -0.5,-1.96 -0.03,-0.1 -0.07,-0.2 -0.11,-0.3 -0.48,-1.33 -1.15,-2.56 -1.99,-3.67 -0.04,-0.05 -0.08,-0.1 -0.12,-0.16 -0.43,-0.56 -0.91,-1.08 -1.42,-1.57 -0.02,-0.02 -0.04,-0.04 -0.07,-0.06 -1.07,-1 -2.3,-1.84 -3.65,-2.46 0,0 -0.01,0 -0.01,0 -0.64,-0.3 -1.31,-0.54 -2,-0.74 -0.04,-0.01 -0.09,-0.04 -0.13,-0.05 -0.55,-0.15 -1.12,-0.27 -1.7,-0.36 -0.08,-0.01 -0.16,-0.03 -0.24,-0.04 -0.6,-0.08 -1.2,-0.13 -1.82,-0.13 H 674.7 c -0.02,0 -0.04,0 -0.07,0 -28.2,0.02 -58.31,15.37 -58.33,58.36 0,0.01 0,0.02 0,0.03 0,0.01 0,0.02 0,0.03 V 510 c 0,3.86 1.57,7.36 4.1,9.89 2.53,2.53 6.03,4.1 9.89,4.1 h 0.02 c 1.15,-0.01 2.24,-0.17 3.3,-0.43 z" />
</g>
</g>
</svg>
</div>
<div className="icons">
{loggedIn && (
<div className="logout" onClick={logout}>
<svg
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.31111 11.2L7.55556 12.4444L12 8L7.55556 3.55556L6.31111 4.8L8.62222 7.11111H0V8.88889H8.62222L6.31111 11.2ZM14.2222 0H1.77778C0.8 0 0 0.8 0 1.77778V5.33333H1.77778V1.77778H14.2222V14.2222H1.77778V10.6667H0V14.2222C0 15.2 0.8 16 1.77778 16H14.2222C15.2 16 16 15.2 16 14.2222V1.77778C16 0.8 15.2 0 14.2222 0Z"
/>
</svg>
</div>
)}
<div className="exit" onClick={close}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<g>
<path d="M12.255 6.992a.75.75 0 1 0-1.023-1.097L9.037 7.94 6.992 5.745a.75.75 0 0 0-1.097 1.023L7.94 8.963l-2.195 2.045a.75.75 0 0 0 1.023 1.097l2.195-2.045 2.045 2.195a.75.75 0 0 0 1.097-1.023L10.06 9.037l2.195-2.045z" />
<path
fillRule="evenodd"
d="M.75 9a8.25 8.25 0 1 1 16.5 0A8.25 8.25 0 1 1 .75 9zM9 15.75a6.75 6.75 0 1 1 0-13.5 6.75 6.75 0 1 1 0 13.5z"
/>
</g>
</svg>
</div>
</div>
</div>
<div className="body">
<div className="connection">
<svg viewBox="0 0 113 113" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_625_565)">
<path
d="M24.7188 63.5625H88.2812C101.912 63.5625 113 52.4744 113 38.8438C113 25.2131 101.912 14.125 88.2812 14.125H28.25C28.25 6.32094 21.9291 0 14.125 0C6.32094 0 0 6.32094 0 14.125C0 21.9291 6.32094 28.25 14.125 28.25C19.3371 28.25 23.843 25.3897 26.2937 21.1875H88.2812C98.0134 21.1875 105.938 29.1116 105.938 38.8438C105.938 48.5759 98.0134 56.5 88.2812 56.5H24.7188C11.0881 56.5 0 67.5881 0 81.2188C0 94.8494 11.0881 105.938 24.7188 105.938H86.7063C89.1499 110.14 93.6558 113 98.875 113C106.679 113 113 106.679 113 98.875C113 91.0709 106.679 84.75 98.875 84.75C91.0709 84.75 84.75 91.0709 84.75 98.875H24.7188C14.9866 98.875 7.0625 90.9509 7.0625 81.2188C7.0625 71.4866 14.9866 63.5625 24.7188 63.5625Z"
fill="url(#paint0_linear_625_565)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_625_565"
x1="56.5"
y1="0"
x2="56.5"
y2="113"
gradientUnits="userSpaceOnUse">
<stop stopColor="#1F6E46" />
<stop offset="1" stopColor="#484848" stopOpacity="0" />
</linearGradient>
<clipPath id="clip0_625_565">
<rect width="113" height="113" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div className="connection-text">
{!loggedIn && <>Looks like you’re not connected.</>}
{loggedIn && <>Connected to Lume Web.</>}
</div>
<div className="button-container">
{loggedIn && (
<button className="dashboard-btn" onClick={openDashboard}>
<svg
width=""
height=""
viewBox=""
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_625_287)">
<path
d="M0 8C0 9.58225 0.469192 11.129 1.34824 12.4446C2.22729 13.7602 3.47672 14.7855 4.93853 15.391C6.40034 15.9965 8.00887 16.155 9.56072 15.8463C11.1126 15.5376 12.538 14.7757 13.6569 13.6569C14.7757 12.538 15.5376 11.1126 15.8463 9.56072C16.155 8.00887 15.9965 6.40034 15.391 4.93853C14.7855 3.47672 13.7602 2.22729 12.4446 1.34824C11.129 0.469192 9.58225 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8Z"
fill="#BFBFBF"
/>
<path
d="M11.4999 10.545V12.0225C11.4999 12.0824 11.4763 12.1399 11.4342 12.1825C11.392 12.2251 11.3348 12.2494 11.2749 12.25H4.4999C4.44 12.2494 4.38277 12.2251 4.34065 12.1825C4.29852 12.1399 4.2749 12.0824 4.2749 12.0225V10.545C4.2749 9.35251 5.8924 8.38501 7.8874 8.38501C9.8824 8.38501 11.4999 9.35251 11.4999 10.545Z"
stroke="#1E1F21"
strokeWidth="2"
strokeMiterlimit="10"
strokeLinecap="round"
/>
<path
d="M7.88747 6.84C8.77389 6.84 9.49247 6.14828 9.49247 5.295C9.49247 4.44172 8.77389 3.75 7.88747 3.75C7.00105 3.75 6.28247 4.44172 6.28247 5.295C6.28247 6.14828 7.00105 6.84 7.88747 6.84Z"
stroke="#1E1F21"
strokeWidth="2"
strokeMiterlimit="10"
strokeLinecap="round"
/>
</g>
<defs>
<clipPath id="clip0_625_287">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
<span>Dashboard</span>
</button>
)}
{!loggedIn && (
<button className="login-btn" onClick={openAccount}>
<span>Login</span>
</button>
)}
</div>
</div>
</>
);
}

11
ui/popup.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lume Web</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./popup.js"></script>
</body>
</html>

8
ui/popup.js Normal file
View File

@ -0,0 +1,8 @@
import { createRoot } from "react-dom";
import React from "react";
import App from "./apps/popup/App.tsx";
const root = createRoot(document.getElementById("app"));
root.render(React.createElement(App));

1
ui/tailwind.config.js
View File

@ -3,6 +3,7 @@ module.exports = {
"./onboarding.html",
"./account.html",
"./dashboard.html",
"./popup.html",
"./src/**/*.{js,ts, tsx}",
],
mode: "jit",

1
ui/vite.config.js
View File

@ -12,6 +12,7 @@ export default defineConfig({
onboarding: resolve(__dirname, "onboarding.html"),
account: resolve(__dirname, "account.html"),
dashboard: resolve(__dirname, "dashboard.html"),
popup: resolve(__dirname, "popup.html"),
},
},
minify: false,