Add account rename support for Octyne 1.2.

imports/settings/accountDialog.tsx

@@ -9,8 +9,9 @@ const AccountDialog = (props: {
   onClose: () => void
   username?: string
   open: boolean
+  rename?: boolean
 }): JSX.Element => {
-  const changePassword = typeof props.username === 'string'
+  const changePassword = typeof props.username === 'string' && !props.rename
   const [error, setError] = useState('')
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
@@ -29,61 +30,74 @@ const AccountDialog = (props: {
 
   const handleSubmit = (): void => {
     if (!username && !changePassword) setError('Username is required!')
-    else if (!password) setError('Password is required!')
-    else if (password !== confirmPassword) setError('Passwords do not match!')
+    else if (!password && !props.rename) setError('Password is required!')
+    else if (password !== confirmPassword && !props.rename) setError('Passwords do not match!')
     else {
       setError('')
       setUsername('')
       setPassword('')
       setConfirmPassword('')
-      props.onSubmit(props.username ?? username, password)
+      props.onSubmit(props.username ?? username, props.rename ? username : password)
     }
   }
 
   return (
     <>
       <Dialog open={props.open} onClose={handleClose}>
-        <DialogTitle>{changePassword ? 'Change Password' : 'Create Account'}</DialogTitle>
+        <DialogTitle>
+          {changePassword
+            ? 'Change Password'
+            : props.rename ? `Rename Account: ${props.username}` : 'Create Account'}
+        </DialogTitle>
         <DialogContent>
           <DialogContentText>
             {changePassword
               ? `Enter new password for ${props.username}:`
-              : 'Enter username and password:'}
+              : props.rename ? 'Enter new username:' : 'Enter username and password:'}
           </DialogContentText>
           {!changePassword && (
             <TextField
               autoFocus
               fullWidth
               color={error ? 'error' : undefined}
               margin='normal'
-              label='Username'
+              label={props.rename ? 'New Username' : 'Username'}
               value={username}
               onChange={e => setUsername(e.target.value)}
-              onKeyDown={e => { if (e.key === 'Enter') { passwordRef.current?.focus() } }}
+              onKeyDown={e => {
+                if (e.key === 'Enter') {
+                  if (props.rename) handleSubmit()
+                  else passwordRef.current?.focus()
+                }
+              }}
             />
           )}
-          <TextField
-            fullWidth
-            color={error ? 'error' : undefined}
-            inputRef={passwordRef}
-            margin='normal'
-            label='Password'
-            type='password'
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-            onKeyDown={e => { if (e.key === 'Enter') confirmRef.current?.focus() }}
-          />
-          <TextField
-            fullWidth
-            color={error ? 'error' : undefined}
-            inputRef={confirmRef}
-            margin='normal'
-            label='Confirm Password'
-            type='password'
-            value={confirmPassword}
-            onChange={e => setConfirmPassword(e.target.value)}
-            onKeyDown={e => { if (e.key === 'Enter') handleSubmit() }}
-          />
+          {!props.rename && (
+            <>
+              <TextField
+                fullWidth
+                color={error ? 'error' : undefined}
+                inputRef={passwordRef}
+                margin='normal'
+                label='Password'
+                type='password'
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') confirmRef.current?.focus() }}
+              />
+              <TextField
+                fullWidth
+                color={error ? 'error' : undefined}
+                inputRef={confirmRef}
+                margin='normal'
+                label='Confirm Password'
+                type='password'
+                value={confirmPassword}
+                onChange={e => setConfirmPassword(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') handleSubmit() }}
+              />
+            </>
+          )}
           {error && <DialogContentText color='error'>{error}</DialogContentText>}
         </DialogContent>
         <DialogActions>

pages/settings/accounts.tsx

@@ -3,6 +3,7 @@ import { Button, IconButton, List, ListItem, ListItemIcon, ListItemText, Paper,
 import AccountCircle from '@mui/icons-material/AccountCircle'
 import Add from '@mui/icons-material/Add'
 import DeleteForever from '@mui/icons-material/DeleteForever'
+import DriveFileRenameOutline from '@mui/icons-material/DriveFileRenameOutline'
 import LockReset from '@mui/icons-material/LockReset'
 
 import AuthFailure from '../../imports/errors/authFailure'
@@ -21,6 +22,7 @@ const AccountsPage = (): JSX.Element => {
   const [message, setMessage] = useState('')
   const [createAccount, setCreateAccount] = useState(false)
   const [deleteAccount, setDeleteAccount] = useState('')
+  const [renameAccount, setRenameAccount] = useState('')
   const [changePassword, setChangePassword] = useState('')
 
   const refetch = (): void => {
@@ -53,6 +55,27 @@ const AccountsPage = (): JSX.Element => {
       setCreateAccount(false)
     })
   }
+
+  const handleRenameAccount = (username: string, newName: string): void => {
+    (async () => {
+      const res = await ky.patch('accounts?username=' + encodeURIComponent(username), {
+        json: { username: newName }
+      })
+      if (res.ok) {
+        refetch()
+        setMessage('Account renamed successfully!')
+      } else {
+        const json = await res.json<{ error: string }>()
+        if (json.error === 'Username or password not provided!') {
+          setMessage('Update to Octyne v1.2+ to rename accounts!')
+        } else setMessage(typeof json.error === 'string' ? json.error : 'Failed to rename account!')
+      }
+      setRenameAccount('')
+    })().catch(e => {
+      console.error(e)
+      setMessage('Failed to rename account!')
+      setRenameAccount('')
+    })
   }
 
   const handleChangePassword = (username: string, password: string): void => {
@@ -130,6 +153,11 @@ const AccountsPage = (): JSX.Element => {
                   divider
                   secondaryAction={
                     <>
+                      <Tooltip title='Rename Account'>
+                        <IconButton onClick={() => setRenameAccount(account)}>
+                          <DriveFileRenameOutline />
+                        </IconButton>
+                      </Tooltip>
                       <Tooltip title='Change Password'>
                         <IconButton onClick={() => setChangePassword(account)}>
                           <LockReset />
@@ -179,6 +207,13 @@ const AccountsPage = (): JSX.Element => {
           onSubmit={handleChangePassword}
           username={changePassword}
         />
+        <AccountDialog
+          open={!!renameAccount}
+          onClose={() => setRenameAccount('')}
+          onSubmit={handleRenameAccount}
+          username={renameAccount}
+          rename
+        />
       </SettingsLayout>
     </React.StrictMode>
   )