fixing edit login modal

doc/api.oa3

@@ -184,35 +184,6 @@ paths:
         '500':
           description: internal server error
          
-  /admin/accounts/{accountId}/reset:
-    put:
-      tags:
-        - admin
-      description: Generate a password reset url for specified account. Access granted to admin username and password.
-      operationId: set-node-account
-      security:
-        - basicAuth: []
-      parameters:
-        - name: accountId
-          in: path
-          description: id of profile to access
-          required: true
-          schema:
-            type: string
-      responses:
-        '201':
-          description: success
-          content:
-            application/json:
-              schema:
-                type: string
-        '401':
-          description: invalid password
-        '404':
-          description: unknown portal
-        '500':
-          description: internal server error
-          
   /admin/accounts/{accountId}:
     delete:
       tags:
@@ -461,6 +432,28 @@ paths:
             schema:
               type: boolean
    
+  /account/login:
+    put:
+      tags:
+        - account
+      description: Reset account login credentials
+      operationId: set-account-login
+      security:
+        - basicAuth: []
+      responses:
+        '201':
+          description: success
+          content:
+            application/json:
+              schema:
+                type: string
+        '401':
+          description: invalid password
+        '404':
+          description: unknown portal
+        '500':
+          description: internal server error
+                      
   /account/profile:
     post:
       tags:

net/web/src/User/Conversation/Conversation.jsx

@@ -84,10 +84,9 @@ export function Conversation() {
         <BusySpin size="large" delay="1000" spinning={!state.init} />
       </div>
       <AddTopic />
-      <Modal title="Conversation Members" visible={showMembers} centered onCancel={() => setShowMembers(false)} width={400} bodyStyle={{ padding: 0 }}
-        footer={[
-        ]} >
-        <Members host={state.cardId} members={state.members} />
+      <Modal title="Conversation Members" visible={showMembers} centered onCancel={() => setShowMembers(false)}
+        width={400} bodyStyle={{ padding: 0 }} footer={[]} >
+          <Members host={state.cardId} members={state.members} />
       </Modal>
       <Modal title="Edit Subject" visible={showEdit} centered
         okText="Save" onOk={() => onSaveSubject()} onCancel={() => setShowEdit(false)}>

net/web/src/User/SideBar/Contacts/Channels/AddChannel/AddChannel.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Button, Select, Modal, Collapse, Input } from 'antd';
+import { Space, Button, Select, Modal, Collapse, Input } from 'antd';
 import { SelectItem, ConversationWrapper, Description, BusySpin } from './AddChannel.styled';
 import { Logo } from '../../../../../Logo/Logo';
 
@@ -18,22 +18,19 @@ export function AddChannel({ state, actions }) {
 
   return (
     <ConversationWrapper>
-      <Select
-        mode="multiple"
-        style={{ width: '100%' }}
-        placeholder="Select Contacts"
-        defaultValue={[]}
-        options={options}
-        onChange={(value) => actions.setStartCards(value)}
-        optionLabelProp="label"
-      />
-      <Collapse ghost="true">
-        <Collapse.Panel header="Conversation Details (optional)" key="1">
-          <Input placeholder="Subject" onChange={(e) => actions.setStartSubject(e.target.value)} value={state.startSubject} />
-          <Description placeholder="Description" autoSize={{ minRows: 2, maxRows: 6 }}
-              onChange={(e) => actions.setStartDescription(e.target.value)} value={state.startDescription} />
-        </Collapse.Panel>
-      </Collapse>
+      <Space direction="vertical">
+        <Input placeholder="Subject (optional)" onChange={(e) => actions.setStartSubject(e.target.value)}
+          value={state.startSubject} />
+        <Select
+          mode="multiple"
+          style={{ width: '100%' }}
+          placeholder="Select Contacts"
+          defaultValue={[]}
+          options={options}
+          onChange={(value) => actions.setStartCards(value)}
+          optionLabelProp="label"
+        />
+      </Space>
       <BusySpin size="large" spinning={state.busy} />
     </ConversationWrapper>
   )

net/web/src/User/SideBar/Identity/Identity.jsx

@@ -1,4 +1,4 @@
-import { Avatar, Space, Image, Modal, Form, Input } from 'antd';
+import { Avatar, Space, Image, Modal, Form, Input, Button } from 'antd';
 import React, { useState } from 'react'
 import { IdentityWrapper, IdentityDropdown, MenuWrapper } from './Identity.styled';
 import { RightOutlined, EditOutlined, UserOutlined, LockOutlined } from '@ant-design/icons';
@@ -8,7 +8,6 @@ import { Logo } from '../../../Logo/Logo';
 
 export function Identity() {
 
-  const [ showLogin, setShowLogin ] = useState(false);
   const { state, actions } = useIdentity()
 
   const menu = (
@@ -17,7 +16,7 @@ export function Identity() {
         <div onClick={() => actions.editProfile()}>Edit Profile</div>
       </Menu.Item>
       <Menu.Item key="1">
-        <div onClick={() => setShowLogin(true)}>Change Login</div>
+        <div onClick={() => actions.setShowLogin(true)}>Change Login</div>
       </Menu.Item>
       <Menu.Item key="2">
         <div onClick={() => actions.logout()}>Sign Out</div>
@@ -25,11 +24,6 @@ export function Identity() {
     </MenuWrapper>
   );
 
-  const onChangeLogin = () => {
-    let saved = actions.setLogin();
-    setShowLogin(false);
-  };
-
   return (
     <IdentityWrapper>
       <IdentityDropdown overlay={menu} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="rightTop">
@@ -44,8 +38,12 @@ export function Identity() {
           <RightOutlined />
         </div>
       </IdentityDropdown>
-      <Modal title="Change Login" visible={showLogin} centered okText="Save" 
-          onOk={() => onChangeLogin()} onCancel={() => setShowLogin(false)}>
+      <Modal title="Account Login" visible={state.showLogin} centered okText="Save" 
+          onCancel={() => actions.setShowLogin(false)} loading={state.busy}
+          footer={[
+            <Button key="back" onClick={() => actions.setShowLogin(false)}>Cancel</Button>,
+            <Button key="save" type="primary" onClick={() => actions.setLogin()}>Save</Button>
+          ]}>
 
         <Space direction="vertical" style={{ width: '100%' }}>
           <Input size="large" spelleCheck="false" placeholder="Username" prefix={<UserOutlined />}

net/web/src/User/SideBar/Identity/useIdentity.hook.js

@@ -20,7 +20,8 @@ export function useIdentity() {
     passwordStatus: null,
     confirm: null,
     confirmStatus: null,
-    
+    busy: false,
+    showLogin: false,  
   });
 
   const navigate = useNavigate();
@@ -69,6 +70,9 @@ export function useIdentity() {
     setConfirm: (value) => {
       updateState({ confirm: value });
     },
+    setShowLogin: (value) => {
+      updateState({ showLogin: value });
+    },
     setLogin: async () => {
       if (state.username == null || state.username == '') {
         updateState({ usernameStatus: 'username required' });
@@ -91,7 +95,17 @@ export function useIdentity() {
       else {
         updateState({ confirmStatus: null });
       }
-      await account.actions.setLogin(state.username, state.password);
+      if (!state.busy) {
+        updateState({ busy: true });
+        try {
+          await account.actions.setLogin(state.username, state.password);
+          updateState({ showLogin: false });
+        }
+        catch (err) {
+          window.alert(err);
+        }
+        updateState({ busy: false });
+      }
     },
   };