Delete DEVICE_AUTH_CODE_SESSION_KEY in ProvisionNewDevice modal (#1205)

* ensure delete DEVICE_AUTH_CODE_SESSION_KEY on ProvisionNewDevice modal open event

http-gateway/web/src/containers/DeviceProvisioning/LinkedHubs/DetailPage/LinkedHubsDetail.tsx

@@ -20,7 +20,7 @@ import { updateLinkedHubData } from '@/containers/DeviceProvisioning/rest'
 import PageLayout from '@/containers/Common/PageLayout'
 import DetailHeader from '@/containers/DeviceProvisioning/LinkedHubs/DetailHeader'
 import isEqual from 'lodash/isEqual'
-import { FormContext } from '@shared-ui/common/context/FormContext'
+import { FormContext, getFormContextDefault } from '@shared-ui/common/context/FormContext'
 
 const Tab1 = lazy(() => import('./Tabs/Tab1/Tab1'))
 const Tab2 = lazy(() => import('./Tabs/Tab2/Tab2'))
@@ -110,8 +110,8 @@ const LinkedHubsDetail: FC<any> = (props) => {
 
     const context = useMemo(
         () => ({
-            onSubmit: onSubmitForm,
-            updateData: (field: string, d: any) => console.log(field, d),
+            ...getFormContextDefault('default'),
+            updateData: (data: any) => console.log(data),
         }),
         []
     )

http-gateway/web/src/containers/DeviceProvisioning/LinkedHubs/DetailPage/Tabs/Tab1/Tab1.tsx

@@ -23,10 +23,10 @@ const Tab1: FC<Props> = (props) => {
         handleSubmit,
     } = useForm<Inputs>({ mode: 'all', reValidateMode: 'onSubmit', values: defaultFormData })
 
-    const { onSubmit } = useContext(FormContext)
+    // const { onSubmit } = useContext(FormContext)
 
     return (
-        <form onSubmit={handleSubmit(onSubmit)}>
+        <form>
             <SimpleStripTable
                 rows={[
                     {

http-gateway/web/src/containers/DeviceProvisioning/LinkedHubs/DetailPage/Tabs/Tab2/Contents/TabContent1.tsx

@@ -21,7 +21,7 @@ const TabContent1: FC<Props> = (props) => {
     const { defaultFormData, loading } = props
     const { formatMessage: _ } = useIntl()
 
-    const { onSubmit } = useContext(FormContext)
+    // const { onSubmit } = useContext(FormContext)
 
     const {
         formState: { errors, isDirty, touchedFields, dirtyFields, defaultValues },

http-gateway/web/src/containers/DeviceProvisioning/LinkedHubs/DetailPage/Tabs/Tab2/Contents/TabContent2.tsx

@@ -34,7 +34,7 @@ const TabContent2: FC<Props> = (props) => {
         control,
     } = useForm<Inputs>({ mode: 'all', reValidateMode: 'onSubmit', values: defaultFormData })
 
-    const { onSubmit } = useContext(FormContext)
+    // const { onSubmit } = useContext(FormContext)
 
     const defaultModalData = useMemo(
         () => ({
@@ -77,7 +77,7 @@ const TabContent2: FC<Props> = (props) => {
     }, [caPool, defaultModalData, modalData.value, setValue])
 
     return (
-        <form onSubmit={handleSubmit(onSubmit)}>
+        <form>
             <Headline type='h5'>{_(g.tls)}</Headline>
             <p>Short description...</p>
             <hr css={styles.separator} />

http-gateway/web/src/containers/Devices/List/ProvisionNewDevice/ProvisionNewDevice.tsx

@@ -10,7 +10,9 @@ import { getApiErrorMessage } from '@shared-ui/common/utils'
 
 import { getDeviceAuthCode } from '@/containers/Devices/rest'
 import { messages as t } from '@/containers/Devices/Devices.i18n'
+import { messages as g } from '@/containers/Global.i18n'
 import notificationId from '@/notificationId'
+import { DEVICE_AUTH_CODE_SESSION_KEY } from '@/constants'
 
 const ProvisionNewDeviceCore = () => {
     const [show, setShow] = useState(false)
@@ -44,12 +46,16 @@ const ProvisionNewDeviceCore = () => {
 
     const openModal = () => {
         setShow(true)
+        localStorage.removeItem(DEVICE_AUTH_CODE_SESSION_KEY)
+        sessionStorage.removeItem(DEVICE_AUTH_CODE_SESSION_KEY)
         inputRef?.current?.focus()
     }
 
     const onClose = () => {
         setShow(false)
         setCode(undefined)
+        localStorage.removeItem(DEVICE_AUTH_CODE_SESSION_KEY)
+        sessionStorage.removeItem(DEVICE_AUTH_CODE_SESSION_KEY)
         setDeviceId(null)
     }
 
@@ -62,7 +68,7 @@ const ProvisionNewDeviceCore = () => {
                 {_(t.addDevice)}
             </Button>
             <ProvisionDeviceModal
-                closeButtonText={_(t.cancel)}
+                closeButtonText={_(g.close)}
                 deviceAuthCode={code}
                 deviceAuthLoading={fetching}
                 deviceInformation={
@@ -84,13 +90,8 @@ const ProvisionNewDeviceCore = () => {
                 }
                 footerActions={[
                     {
-                        label: _(t.cancel),
-                        onClick: () => setShow(false),
-                        variant: 'tertiary',
-                    },
-                    {
-                        label: _(t.delete),
-                        onClick: () => setShow(false),
+                        label: _(t.close),
+                        onClick: onClose,
                         variant: 'primary',
                     },
                 ]}

http-gateway/web/src/containers/Devices/rest.ts

@@ -184,6 +184,7 @@ export const getDeviceAuthCode = (deviceId: string) => {
 
             const destroyIframe = () => {
                 sessionStorage.removeItem(DEVICE_AUTH_CODE_SESSION_KEY)
+                localStorage.removeItem(DEVICE_AUTH_CODE_SESSION_KEY)
                 iframe.parentNode?.removeChild(iframe)
             }