Merge pull request #221 from idpass/feature/210-revoke-vid

Revoke VID #210

.env

@@ -1,3 +1,3 @@
 MIMOTO_HOST=https://api.qa4.mosip.net/residentmobileapp
-
+#MIMOTO_HOST=http://mock.mimoto.newlogic.dev
 GOOGLE_NEARBY_MESSAGES_API_KEY=

components/OIDcAuth.strings.json

@@ -0,0 +1,5 @@
+{
+  "title": "OIDC Authentication",
+  "text": "To be replaced with the OIDC provider UI",
+  "verify": "Verify"
+}

components/OIDcAuth.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { Button, Centered, Column, Text } from './ui';
+import { ModalProps } from './ui/Modal';
+import { Colors } from './ui/styleUtils';
+
+const styles = StyleSheet.create({
+  viewContainer: {
+    backgroundColor: Colors.White,
+    width: Dimensions.get('screen').width,
+    height: Dimensions.get('screen').height,
+    position: 'absolute',
+    top: 0,
+    zIndex: 9,
+    padding: 32,
+  },
+});
+
+export const OIDcAuthenticationModal: React.FC<OIDcAuthenticationModalProps> = (
+  props
+) => {
+  const { t } = useTranslation('OIDcAuth');
+
+  return (
+    <View style={styles.viewContainer}>
+      <Column safe fill 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>
+          <Button title={t('verify')} onPress={() => props.onVerify()} />
+        </Column>
+      </Column>
+    </View>
+  );
+};
+
+interface OIDcAuthenticationModalProps extends ModalProps {
+  onVerify: () => void;
+  error?: string;
+}

components/OIDcAuthModal.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 OIDcAuthenticationOverlay: React.FC<
+  OIDcAuthenticationModalProps
+> = (props) => {
+  const { t } = useTranslation('OIDcAuth');
+
+  return (
+    <Modal isVisible={props.isVisible} onDismiss={props.onDismiss}>
+      <Column fill padding="32" 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>
+          <Button title={t('verify')} onPress={() => props.onVerify()} />
+        </Column>
+      </Column>
+    </Modal>
+  );
+};
+
+interface OIDcAuthenticationModalProps extends ModalProps {
+  onVerify: () => void;
+  error?: string;
+}

components/RevokeConfirm.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import { Button, Centered, Column, Row, Text } from './ui';
+import { Colors } from './ui/styleUtils';
+
+const styles = StyleSheet.create({
+  viewContainer: {
+    backgroundColor: 'rgba(0,0,0,.6)',
+    width: Dimensions.get('screen').width,
+    height: Dimensions.get('screen').height,
+    position: 'absolute',
+    top: 0,
+    zIndex: 999999,
+  },
+  boxContainer: {
+    backgroundColor: Colors.White,
+    padding: 24,
+    elevation: 6,
+    borderRadius: 4,
+  },
+});
+
+export const RevokeConfirmModal: React.FC<RevokeConfirmModalProps> = (
+  props
+) => {
+  const { t } = useTranslation('ViewVcModal');
+
+  return (
+    <View style={styles.viewContainer}>
+      <Centered fill>
+        <Column
+          width={Dimensions.get('screen').width * 0.8}
+          style={styles.boxContainer}>
+          <Text weight="semibold" margin="0 0 12 0">
+            {t('revoke')}
+          </Text>
+          <Text margin="0 0 12 0">{t('revoking', { vid: props.id })}</Text>
+          <Row>
+            <Button
+              fill
+              type="clear"
+              title={t('cancel')}
+              onPress={() => props.onCancel()}
+            />
+            <Button fill title={t('revoke')} onPress={props.onRevoke} />
+          </Row>
+        </Column>
+      </Centered>
+    </View>
+  );
+};
+
+interface RevokeConfirmModalProps {
+  onCancel: () => void;
+  onRevoke: () => void;
+  id: string;
+}

components/TextEditOverlay.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { Dimensions, StyleSheet } from 'react-native';
-import { Overlay, Input } from 'react-native-elements';
-import { Button, Column, Row, Text } from './ui';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import { Input } from 'react-native-elements';
+import { Button, Centered, Column, Row, Text } from './ui';
 import { Colors, elevation } from './ui/styleUtils';
 import { useTranslation } from 'react-i18next';
 
@@ -11,18 +11,33 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.White,
     padding: 0,
   },
+  viewContainer: {
+    backgroundColor: 'rgba(0,0,0,.6)',
+    width: Dimensions.get('screen').width,
+    height: Dimensions.get('screen').height,
+    position: 'absolute',
+    top: 0,
+    zIndex: 9,
+  },
+  boxContainer: {
+    backgroundColor: Colors.White,
+    padding: 24,
+    elevation: 6,
+    borderRadius: 4,
+  },
 });
 
 export const TextEditOverlay: React.FC<EditOverlayProps> = (props) => {
   const { t } = useTranslation('common');
   const [value, setValue] = useState(props.value);
 
   return (
-    <Overlay
-      isVisible={props.isVisible}
-      overlayStyle={styles.overlay}
-      onBackdropPress={props.onDismiss}>
-      <Column pX={24} pY={24} width={Dimensions.get('screen').width * 0.8}>
+    <View style={styles.viewContainer}>
+      <Centered fill>
+        <Column
+          width={Dimensions.get('screen').width * 0.8}
+          style={styles.boxContainer}>
+
         <Text weight="semibold" margin="0 0 16 0">
           {props.label}
         </Text>
@@ -38,7 +53,8 @@ export const TextEditOverlay: React.FC<EditOverlayProps> = (props) => {
           <Button fill title={t('save')} onPress={() => props.onSave(value)} />
         </Row>
       </Column>
-    </Overlay>
+      </Centered>
+    </View>
   );
 
   function dismiss() {

components/VidItem.tsx

@@ -0,0 +1,134 @@
+import React, { useContext, useRef } from 'react';
+import { useInterpret, useSelector } from '@xstate/react';
+import { Pressable, StyleSheet } from 'react-native';
+import { CheckBox } from 'react-native-elements';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { ActorRefFrom } from 'xstate';
+import {
+  createVcItemMachine,
+  selectVerifiableCredential,
+  selectGeneratedOn,
+  selectTag,
+  selectId,
+  vcItemMachine,
+} from '../machines/vcItem';
+import { Column, Row, Text } from './ui';
+import { Colors } from './ui/styleUtils';
+import { RotatingIcon } from './RotatingIcon';
+import { GlobalContext } from '../shared/GlobalContext';
+
+const styles = StyleSheet.create({
+  title: {
+    color: Colors.Black,
+    backgroundColor: 'transparent',
+  },
+  loadingTitle: {
+    color: 'transparent',
+    backgroundColor: Colors.Grey5,
+    borderRadius: 4,
+  },
+  subtitle: {
+    backgroundColor: 'transparent',
+  },
+  loadingSubtitle: {
+    backgroundColor: Colors.Grey,
+    borderRadius: 4,
+  },
+  container: {
+    backgroundColor: Colors.White,
+  },
+  loadingContainer: {
+    backgroundColor: Colors.Grey6,
+    borderRadius: 4,
+  },
+});
+
+export const VidItem: React.FC<VcItemProps> = (props) => {
+  const { appService } = useContext(GlobalContext);
+  const machine = useRef(
+    createVcItemMachine(
+      appService.getSnapshot().context.serviceRefs,
+      props.vcKey
+    )
+  );
+  const service = useInterpret(machine.current);
+  const uin = useSelector(service, selectId);
+  const tag = useSelector(service, selectTag);
+  const verifiableCredential = useSelector(service, selectVerifiableCredential);
+  const generatedOn = useSelector(service, selectGeneratedOn);
+
+  const selectableOrCheck = props.selectable ? (
+    <CheckBox
+      checked={props.selected}
+      checkedIcon={<Icon name="checkbox-intermediate" size={24} />}
+      uncheckedIcon={<Icon name="checkbox-blank-outline" size={24} />}
+      onPress={() => props.onPress(service)}
+    />
+  ) : (
+    <Icon name="chevron-right" />
+  );
+
+  return (
+    <Pressable
+      onPress={() => props.onPress(service)}
+      disabled={!verifiableCredential}>
+      <Row
+        elevation={!verifiableCredential ? 0 : 2}
+        crossAlign="center"
+        margin={props.margin}
+        backgroundColor={!verifiableCredential ? Colors.Grey6 : Colors.White}
+        padding={[16, 16]}
+        style={
+          !verifiableCredential ? styles.loadingContainer : styles.container
+        }>
+        <Column fill margin="0 24 0 0">
+          <Text
+            weight="semibold"
+            style={!verifiableCredential ? styles.loadingTitle : styles.title}
+            margin="0 0 6 0">
+            {!verifiableCredential ? '' : tag || uin}
+          </Text>
+          <Text
+            size="smaller"
+            numLines={1}
+            style={
+              !verifiableCredential ? styles.loadingSubtitle : styles.subtitle
+            }>
+            {!verifiableCredential
+              ? ''
+              : getLocalizedField(
+                  verifiableCredential.credentialSubject.fullName
+                ) +
+                ' · ' +
+                generatedOn}
+          </Text>
+        </Column>
+        {verifiableCredential ? (
+          selectableOrCheck
+        ) : (
+          <RotatingIcon name="sync" color={Colors.Grey5} />
+        )}
+      </Row>
+    </Pressable>
+  );
+};
+
+interface VcItemProps {
+  vcKey: string;
+  margin?: string;
+  selectable?: boolean;
+  selected?: boolean;
+  onPress?: (vcRef?: ActorRefFrom<typeof vcItemMachine>) => void;
+}
+
+function getLocalizedField(rawField: string | LocalizedField) {
+  if (typeof rawField === 'string') {
+    return rawField;
+  }
+  try {
+    const locales: LocalizedField[] = JSON.parse(JSON.stringify(rawField));
+    return locales[0].value;
+  } catch (e) {
+    return '';
+  }
+}

components/ui/ToastItem.tsx

@@ -11,6 +11,9 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     top: 80,
     borderRadius: 4,
+    left: 16,
+    right: 16,
+    zIndex: 9,
   },
   messageContainer: {
     fontSize: 12,