From 37fa23216e1248b7580a3ba0f31fe5d0a300361c Mon Sep 17 00:00:00 2001
From: Stephan Boyer <stephan@stephanboyer.com>
Date: Fri, 5 Jan 2024 08:14:02 -0800
Subject: [PATCH] Center the form for the website

---
 CHANGELOG.md           |  4 ++++
 manifest.json          |  2 +-
 package-lock.json      |  4 ++--
 package.json           |  2 +-
 src/loader.tsx         | 28 +++++++++++++++-------------
 src/main.tsx           |  6 ++++--
 src/user-interface.tsx |  4 +++-
 7 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8712187..e89ef26 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.1.6] - 2024-01-05
+
+Nothing changed in this version except internal refactoring needed to support the website. Before this version, Hashpass was only a Chrome extension and not a standalone website.
+
 ## [2.1.5] - 2022-02-09
 
 ### Changed
diff --git a/manifest.json b/manifest.json
index ef2fd59..2079ab6 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Hashpass",
   "description": "A simple password manager with a twist.",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "manifest_version": 3,
   "permissions": ["activeTab", "scripting"],
   "action": {
diff --git a/package-lock.json b/package-lock.json
index cc88edc..09b3687 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "hashpass",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hashpass",
-      "version": "2.1.5",
+      "version": "2.1.6",
       "dependencies": {
         "base64-js": "^1.5.1",
         "debounce": "^2.0.0",
diff --git a/package.json b/package.json
index c17048b..4d8a8cb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hashpass",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "scripts": {
     "build-production": "rm -rf dist && webpack --config webpack.production.js",
     "build-development": "rm -rf dist && webpack --config webpack.development.js",
diff --git a/src/loader.tsx b/src/loader.tsx
index 48370d6..ceaaa37 100644
--- a/src/loader.tsx
+++ b/src/loader.tsx
@@ -2,18 +2,20 @@ import * as React from 'react';
 import { createUseStyles } from 'react-jss';
 import { useEffect, useState } from 'react';
 
-import UserInterface from './user-interface';
 import fireAndForget from './fire-and-forget';
 import getDomain from './get-domain';
 import getIsPasswordFieldActive from './get-is-password-field-active';
-
-const width = '320px';
-const height = '256px';
+import { UserInterface, width, height } from './user-interface';
 
 const useStyles = createUseStyles({
-  loading: {
+  loader: {
+    display: 'flow-root',
     width,
     height,
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
   },
 });
 
@@ -36,15 +38,15 @@ const Loader = (): React.ReactElement => {
     );
   }, []);
 
-  if (domain === undefined || isPasswordFieldActive === undefined) {
-    return <div className={classes.loading} />;
-  }
-
   return (
-    <UserInterface
-      initialDomain={domain}
-      isPasswordFieldActive={isPasswordFieldActive}
-    />
+    <div className={classes.loader}>
+      {domain !== undefined && isPasswordFieldActive !== undefined && (
+        <UserInterface
+          initialDomain={domain}
+          isPasswordFieldActive={isPasswordFieldActive}
+        />
+      )}
+    </div>
   );
 };
 
diff --git a/src/main.tsx b/src/main.tsx
index a756aa7..607f531 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,6 +4,7 @@ import preset from 'jss-preset-default';
 import { createRoot } from 'react-dom/client';
 
 import Loader from './loader';
+import { width, height } from './user-interface';
 
 jss.setup(preset());
 
@@ -14,8 +15,9 @@ jss
         boxSizing: 'border-box',
         margin: 0,
       },
-      'html, body': {
-        width: '352px',
+      html: {
+        minWidth: width,
+        minHeight: height,
       },
       body: {
         // Create a block formatting context to contain margins of descendants.
diff --git a/src/user-interface.tsx b/src/user-interface.tsx
index e1a5cf7..9fa3677 100644
--- a/src/user-interface.tsx
+++ b/src/user-interface.tsx
@@ -9,6 +9,8 @@ import fireAndForget from './fire-and-forget';
 import hashpass from './worker-client';
 import { Button } from './button';
 
+const width = '352px';
+const height = '256px';
 const debounceMilliseconds = 200;
 const copyToClipboardSuccessIndicatorMilliseconds = 1000;
 
@@ -266,4 +268,4 @@ const UserInterface = ({
   );
 };
 
-export default UserInterface;
+export { UserInterface, width, height };