replaced OTP auth with OIDc Auth

components/OIDcAuth.strings.json

@@ -0,0 +1,5 @@
+{
+  "title": "Authentication",
+  "text": "To be replaced with the appropriate method of authentication",
+  "verify": "Verify"
+}

components/OIDcAuth.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { Button, Centered, Column, Text } from './ui';
+import { Modal, ModalProps } from './ui/Modal';
+import { Colors } from './ui/styleUtils';
+
+export const OIDcAuthenticationModal: React.FC<OIDcAuthenticationModalProps> = (
+  props
+) => {
+  const { t } = useTranslation('OIDcAuth');
+
+  return (
+    <Modal isVisible={props.isVisible} onDismiss={props.onDismiss}>
+      <Column fill padding="32 4" align="space-between">
+        <Centered fill>
+          <Icon name="card-account-details-outline" color={Colors.Orange} size={30} />
+          <Text align="center" 
+            weight="bold" 
+            margin='8 0 12 0'
+            style={{ fontSize: 24 }}>
+              {t('title')}
+            </Text>
+          <Text align="center">{t('text')}</Text>
+          <Text align="center" color={Colors.Red} margin="16 0 0 0">
+            {props.error}
+          </Text>
+        </Centered>
+
+        <Column margin="0 16 32">
+          <Button
+            fill
+            title={t('verify')}
+            onPress={() => props.onVerify()}
+          />
+        </Column>
+      </Column>
+    </Modal>
+  );
+};
+
+interface OIDcAuthenticationModalProps extends ModalProps {
+  onVerify: () => void;
+  error?: string;
+}

locales/en.json

@@ -5,6 +5,11 @@
     "deviceRefNumber": "Device reference number",
     "name": "Name"
   },
+  "OIDcAuth": {
+    "title": "Authentication",
+    "text": "To be replaced with the appropriate method of authentication",
+    "verify": "Verify"
+  },
   "PasscodeVerify": {
     "passcodeMismatchError": "Passcode did not match."
   },

machines/revoke.ts

@@ -69,7 +69,7 @@ export const revokeVidsMachine = model.createMachine(
             on: {
               REVOKE_VCS: {
                 actions: ['setVIDs'],
-                target: 'requestingOtp',
+                target: '#RevokeVids.acceptingOtpInput',
               },
             },
           },

machines/revoke.typegen.ts

@@ -47,7 +47,7 @@ export interface Typegen0 {
     setVIDs: 'REVOKE_VCS';
   };
   'eventsCausingServices': {
-    requestOtp: 'REVOKE_VCS';
+    requestOtp: never;
     requestRevoke: 'INPUT_OTP';
   };
   'eventsCausingGuards': {};

machines/vcItem.ts

@@ -167,7 +167,7 @@ export const vcItemMachine =
               target: 'requestingOtp',
             },
             REVOKE_VC: {
-              target: 'requestingOtp',
+              target: 'acceptingOtpInput',
             },
           },
         },

machines/vcItem.typegen.ts

@@ -78,6 +78,7 @@ export interface Typegen0 {
     clearOtp:
       | ''
       | 'DISMISS'
+      | 'REVOKE_VC'
       | 'STORE_RESPONSE'
       | 'done.invoke.vc-item.requestingOtp:invocation[0]'
       | 'done.invoke.vc-item.verifyingCredential:invocation[0]'
@@ -108,7 +109,7 @@ export interface Typegen0 {
       | 'error.platform.vc-item.requestingRevoke:invocation[0]';
     setRevoke: 'done.invoke.vc-item.requestingRevoke:invocation[0]';
     setTag: 'SAVE_TAG';
-    setTransactionId: 'LOCK_VC' | 'REVOKE_VC' | 'UNLOCK_VC';
+    setTransactionId: 'LOCK_VC' | 'UNLOCK_VC';
     storeContext:
       | 'CREDENTIAL_DOWNLOADED'
       | 'done.invoke.vc-item.requestingRevoke:invocation[0]'
@@ -124,7 +125,7 @@ export interface Typegen0 {
     checkStatus: 'STORE_RESPONSE';
     downloadCredential: 'DOWNLOAD_READY';
     requestLock: 'INPUT_OTP';
-    requestOtp: 'LOCK_VC' | 'REVOKE_VC' | 'UNLOCK_VC';
+    requestOtp: 'LOCK_VC' | 'UNLOCK_VC';
     requestRevoke: 'INPUT_OTP';
     verifyCredential: '' | 'VERIFY';
   };

screens/Home/ViewVcModal.tsx

@@ -10,7 +10,8 @@ import { VcDetails } from '../../components/VcDetails';
 import { MessageOverlay } from '../../components/MessageOverlay';
 import { ToastItem } from '../../components/ui/ToastItem';
 import { Passcode } from '../../components/Passcode';
-import { OtpVerificationModal } from './MyVcs/OtpVerificationModal';
+//import { OtpVerificationModal } from './MyVcs/OtpVerificationModal';
+import { OIDcAuthenticationModal } from '../../components/OIDcAuth';
 import { useViewVcModal, ViewVcModalProps } from './ViewVcModalController';
 import { useTranslation } from 'react-i18next';
 
@@ -53,10 +54,13 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
         onSave={controller.SAVE_TAG}
       />
 
-      <OtpVerificationModal
+      <OIDcAuthenticationModal
         isVisible={controller.isAcceptingOtpInput}
         onDismiss={controller.DISMISS}
-        onInputDone={controller.inputOtp}
+        onVerify={() => {
+          console.log('onVerify')
+          controller.revokeVc('1111')
+        }}
         error={controller.otpError}
       />
 

screens/Home/ViewVcModalController.ts

@@ -24,7 +24,6 @@ import {
 import { selectBiometricUnlockEnabled } from '../../machines/settings';
 
 export function useViewVcModal({ vcItemActor, isVisible }: ViewVcModalProps) {
-  console.log('--------------------->vcItemActor', vcItemActor)
   const [toastVisible, setToastVisible] = useState(false);
   const [message, setMessage] = useState('');
   const [reAuthenticating, setReAuthenticating] = useState('');
@@ -145,6 +144,16 @@ export function useViewVcModal({ vcItemActor, isVisible }: ViewVcModalProps) {
         }
       });
     },
+    revokeVc: (otp: string) => {
+      NetInfo.fetch().then((state) => {
+        if (state.isConnected) {
+          vcItemActor.send(VcItemEvents.INPUT_OTP(otp));
+        } else {
+          vcItemActor.send(VcItemEvents.DISMISS());
+          showToast('Request network failed');
+        }
+      });
+    },
     onSuccess,
     EDIT_TAG: () => vcItemActor.send(VcItemEvents.EDIT_TAG()),
     SAVE_TAG: (tag: string) => vcItemActor.send(VcItemEvents.SAVE_TAG(tag)),

screens/Profile/Revoke.tsx

@@ -6,14 +6,14 @@ import { VidItem } from '../../components/VidItem';
 import { Colors } from '../../components/ui/styleUtils';
 import { OtpVerificationModal } from '../Home/MyVcs/OtpVerificationModal';
 import { ToastItem } from '../../components/ui/ToastItem';
-
+import { OIDcAuthenticationModal } from '../../components/OIDcAuth';
 import { useTranslation } from 'react-i18next';
 import { useRevoke } from './RevokeController';
 
 export const Revoke: React.FC<RevokeScreenProps> = (props) => {
   const controller = useRevoke();
   const { t } = useTranslation('ProfileScreen');
-  console.log('toastVisible', controller.toastVisible)
+  console.log('isAcceptingOtpInput', controller.isAcceptingOtpInput)
   const styles = StyleSheet.create({
     buttonContainer: {
       position: 'absolute',
@@ -30,7 +30,7 @@ export const Revoke: React.FC<RevokeScreenProps> = (props) => {
   });
 
   return (
-    <ListItem bottomDivider onPress={() => controller.setIsViewing(true)}>
+    <ListItem bottomDivider onPress={() => controller.setAuthenticating(true)}>
       <ListItem.Content>
         <ListItem.Title>
           <Text>{props.label}</Text>
@@ -97,6 +97,18 @@ export const Revoke: React.FC<RevokeScreenProps> = (props) => {
           </Row>
         </View>
       </Overlay>
+      <OIDcAuthenticationModal
+        isVisible={controller.isAuthenticating}
+        onDismiss={() => controller.setAuthenticating(false)}
+        onVerify={() => controller.setIsViewing(true)}
+      />
+      <OIDcAuthenticationModal
+        isVisible={controller.isAcceptingOtpInput}
+        onDismiss={controller.DISMISS}
+        onVerify={() => {
+          controller.revokeVc('1111')
+        }}
+      />
       <Overlay
         overlayStyle={{ padding: 24, elevation: 6 }}
         isVisible={controller.isRevoking}
@@ -128,12 +140,6 @@ export const Revoke: React.FC<RevokeScreenProps> = (props) => {
           </Row>
         </Column>
       </Overlay>
-      <OtpVerificationModal
-        isVisible={controller.isAcceptingOtpInput}
-        onDismiss={controller.DISMISS}
-        onInputDone={controller.INPUT_OTP}
-        error={controller.error}
-      />
     </ListItem>
   );
 };

screens/Profile/RevokeController.tsx

@@ -1,5 +1,6 @@
 import { useSelector, useMachine } from '@xstate/react';
 import { useContext, useEffect, useState } from 'react';
+import NetInfo from '@react-native-community/netinfo';
 import { GlobalContext } from '../../shared/GlobalContext';
 import {
   selectIsRefreshingMyVcs,
@@ -31,6 +32,7 @@ export function useRevoke() {
   );
 
   const [isRevoking, setRevoking] = useState(false);
+  const [isAuthenticating, setAuthenticating] = useState(false);
   const [isViewing, setIsViewing] = useState(false);
   const [toastVisible, setToastVisible] = useState(false);
   const [message, setMessage] = useState('');
@@ -72,6 +74,7 @@ export function useRevoke() {
   return {
     error: '',
     isAcceptingOtpInput,
+    isAuthenticating,
     isRefreshingVcs: useSelector(vcService, selectIsRefreshingMyVcs),
     isRevoking,
     isViewing,
@@ -94,6 +97,17 @@ export function useRevoke() {
       revokeService.send(RevokeVidsEvents.REVOKE_VCS(selectedVidKeys));
       setRevoking(false);
     },
+    revokeVc: (otp: string) => {
+      NetInfo.fetch().then((state) => {
+        if (state.isConnected) {
+          revokeService.send(RevokeVidsEvents.INPUT_OTP(otp));
+        } else {
+          revokeService.send(RevokeVidsEvents.DISMISS());
+          showToast('Request network failed');
+        }
+      });
+    },
+    setAuthenticating,
     selectVcItem,
     setIsViewing,
     setRevoking,