chg: dev: massive refactor on front-end for unification and readiness #8

assets/js/components/PasskeyManager.jsx

@@ -9,13 +9,15 @@
 
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import Dialog from '@mui/material/Dialog';
+import { styled } from '@mui/material/styles';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
+import { arrayOf, shape, string, bool } from 'prop-types';
 
-const DIALOG_SX = {
+const StyledDialog = styled(Dialog)({
   '& .MuiDialog-paper': {
     background: '#0a0e14',
     color: '#e0e0e0',
@@ -47,7 +49,7 @@ const DIALOG_SX = {
     background: 'rgba(2, 4, 8, 0.88)',
     backdropFilter: 'blur(4px)',
   },
-};
+});
 
 const base64ToArrayBuffer = base64 => {
   const binary = atob(base64.replace(/([-_])/g, m => ('-' === m ? '+' : '/')));
@@ -314,7 +316,7 @@ const PasskeyManager = ({ credentials, apiRoutes }) => {
         )}
       </div>
 
-      <Dialog open={addModalOpen} onClose={closeAddModal} sx={DIALOG_SX}>
+      <StyledDialog open={addModalOpen} onClose={closeAddModal}>
         <DialogTitle>Add New Passkey</DialogTitle>
         <DialogContent>
           <TextField
@@ -344,9 +346,9 @@ const PasskeyManager = ({ credentials, apiRoutes }) => {
             Continue
           </Button>
         </DialogActions>
-      </Dialog>
+      </StyledDialog>
 
-      <Dialog open={renameModalOpen} onClose={closeRenameModal} sx={DIALOG_SX}>
+      <StyledDialog open={renameModalOpen} onClose={closeRenameModal}>
         <DialogTitle>Rename Passkey</DialogTitle>
         <DialogContent>
           <TextField
@@ -374,9 +376,9 @@ const PasskeyManager = ({ credentials, apiRoutes }) => {
             Rename
           </Button>
         </DialogActions>
-      </Dialog>
+      </StyledDialog>
 
-      <Dialog open={deleteModalOpen} onClose={closeDeleteModal} sx={DIALOG_SX}>
+      <StyledDialog open={deleteModalOpen} onClose={closeDeleteModal}>
         <DialogTitle>Delete Passkey</DialogTitle>
         <DialogContent>
           <p>
@@ -402,9 +404,25 @@ const PasskeyManager = ({ credentials, apiRoutes }) => {
             Delete
           </Button>
         </DialogActions>
-      </Dialog>
+      </StyledDialog>
     </div>
   );
 };
 
 export default PasskeyManager;
+
+PasskeyManager.propTypes = {
+  credentials: arrayOf(shape({
+    id:                    string.isRequired,
+    credentialName:        string.isRequired,
+    createdAt:             string,
+    lastUsedAt:            string,
+    isBackupEligible:      bool,
+    isBackupAuthenticated: bool,
+  })).isRequired,
+  apiRoutes: shape({
+    credentials:          string.isRequired,
+    registrationBegin:    string.isRequired,
+    registrationComplete: string.isRequired,
+  }).isRequired,
+};