Center the form for the website

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

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": {

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",

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>
   );
 };
 

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.

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 };