github/inji-wallet
1
1
Fork 0
mirror of https://github.com/mosip/inji-wallet.git synced 2026-01-09 13:38:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Implemented downloading popup

Browse Source
This commit is contained in:
anil_majji
2023-03-14 16:36:20 +05:30
committed by Sri Kanth Kola
parent 961a84ca09
commit 7f73ba61b3
15 changed files with 193 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/otp-mobile-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 607 B

1
components/PinInput.tsx
View File

@@ -22,6 +22,7 @@ export const PinInput: React.FC<PinInputProps> = (props) => {
selectTextOnFocus
keyboardType="numeric"
maxLength={1}
secureTextEntry
selectionColor={Theme.Colors.inputSelection}
style={Theme.PinInputStyle.input}
key={index}

9
components/ui/Button.tsx
View File

@@ -74,7 +74,14 @@ export const Button: React.FC<ButtonProps> = (props) => {
type={props.type}
raised={props.raised}
title={
<Text weight="semibold" align="center" color={Theme.Colors.whiteText}>
<Text
weight="semibold"
style={Theme.TextStyles.bold}
color={
type === 'solid' || type === 'gradient' || type === 'radius'
? Theme.Colors.whiteText
: Theme.Colors.DownloadIdBtnTxt
}>
{props.title}
</Text>
}

2
components/ui/Modal.tsx
View File

@@ -45,7 +45,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
<Row
fill
align={props.headerLeft ? 'flex-start' : 'center'}
margin={'12 0 0 0'}>
margin={'16 0 0 0'}>
<Column>
<Text style={Theme.TextStyles.header}>
{props.headerTitle || props.headerLeft}

84
components/ui/themes/DefaultTheme.ts
View File

@@ -4,16 +4,20 @@ import { LinearGradient } from 'react-native-svg';
import { Spacing } from '../styleUtils';
const Colors = {
Black: '#4A4A4A',
Black: '#000000',
Zambezi: '#5F5F5F',
Grey: '#C7C7C7',
Grey5: '#E0E0E0',
Grey6: '#F2F2F2',
Gray9: '#171717',
DimGray: '#737373',
Orange: '#F2811D',
Gray40: '#666666',
Orange: '#e3781a',
LightGrey: '#F5F5F5',
ShadeOfGrey: '#6F6F6F',
White: '#FFFFFF',
Red: '#EB5757',
Red: '#D52929',
Green: '#4B9D20',
Transparent: 'transparent',
Warning: '#f0ad4e',
@@ -44,6 +48,7 @@ export const DefaultTheme = {
Loading: Colors.Orange,
noUinText: Colors.Orange,
IconBg: Colors.Orange,
DownloadingIdPopUp: Colors.Green,
Icon: Colors.Orange,
GrayIcon: Colors.Grey,
borderBottomColor: Colors.Grey6,
@@ -71,6 +76,7 @@ export const DefaultTheme = {
whiteText: Colors.White,
flipCameraIcon: Colors.Black,
IdInputModalBorder: Colors.Grey,
RetrieveIdLabel: Colors.ShadeOfGrey,
inputSelection: Colors.Orange,
checkCircleIcon: Colors.White,
OnboardingCircleIcon: Colors.White,
@@ -87,8 +93,12 @@ export const DefaultTheme = {
IconBackground: Colors.LightOrange,
GradientColors: Colors.GradientColors,
DisabledColors: Colors.DisabledColors,
getVidColor: Colors.Zambezi,
TimeoutHintBoxColor: Colors.TimeoutHintBoxColor,
TimoutText: Colors.TimoutText,
ProfileIconBg: Colors.LightOrange,
walletbindingLabel: Colors.Black,
walletbindingContent: Colors.Gray40,
},
Styles: StyleSheet.create({
title: {
@@ -147,12 +157,13 @@ export const DefaultTheme = {
borderRadius: 10,
backgroundColor: Colors.LightOrange,
},
downloadingIdTag: {
downloadingIdPopUp: {
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: Colors.Green,
height: 40,
paddingHorizontal: 18,
height: 39,
position: 'relative',
paddingHorizontal: 12,
},
homeScreenContainer: {
alignItems: 'center',
@@ -174,7 +185,7 @@ export const DefaultTheme = {
flex: 1,
justifyContent: 'flex-start',
},
logoContainer: {
closecardMosipLogo: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
@@ -289,6 +300,13 @@ export const DefaultTheme = {
flex: 1,
padding: 10,
},
profileIconBg: {
padding: 8,
width: 40,
height: 40,
borderRadius: 6,
backgroundColor: Colors.LightOrange,
},
domainVerifiyIcon: {
padding: 20,
marginLeft: 120,
@@ -345,7 +363,7 @@ export const DefaultTheme = {
getId: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,
marginVertical: 6,
},
placeholder: {
fontFamily: 'Inter_400Regular',
@@ -358,25 +376,46 @@ export const DefaultTheme = {
}),
PinInputStyle: StyleSheet.create({
input: {
borderBottomWidth: 1,
borderBottomWidth: 3,
borderColor: Colors.Grey,
color: Colors.Black,
flex: 1,
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
fontWeight: '600',
fontFamily: 'Inter_700Bold',
fontSize: 29,
height: 40,
lineHeight: 28,
margin: 8,
textAlign: 'center',
},
onEnteringPin: {
borderBottomWidth: 3,
borderColor: Colors.Orange,
color: Colors.Black,
flex: 1,
fontFamily: 'Inter_700Bold',
fontSize: 29,
height: 40,
margin: 8,
textAlign: 'center',
},
}),
TextStyles: StyleSheet.create({
header: {
color: Colors.Black,
fontFamily: 'Inter_700Bold',
fontSize: 21,
lineHeight: 21,
fontSize: 18,
lineHeight: 22,
paddingTop: 4,
},
retrieveIdLabel: {
color: Colors.ShadeOfGrey,
fontFamily: 'Inter_600SemiBold',
paddingHorizontal: 6,
},
error: {
color: Colors.Red,
fontFamily: 'Inter_600SemiBold',
fontSize: 12,
},
base: {
color: Colors.Black,
@@ -385,7 +424,6 @@ export const DefaultTheme = {
},
regular: {
fontSize: 14,
fontFamily: 'Inter_400Regular',
},
semibold: {
fontFamily: 'Inter_600SemiBold',
@@ -466,7 +504,7 @@ export const DefaultTheme = {
},
gradient: {
borderRadius: 9,
width: '88%',
width: '93%',
alignSelf: 'center',
margin: 4,
},
@@ -474,6 +512,8 @@ export const DefaultTheme = {
borderRadius: 9,
width: '34%',
alignSelf: 'center',
fontSize: 10,
elevation: 5,
},
clearAddIdBtnBg: {
backgroundColor: Colors.Transparent,
@@ -595,10 +635,10 @@ export const DefaultTheme = {
},
kebabHeaderStyle: {
backgroundColor: 'white',
justifyContent: 'space-between',
borderTopLeftRadius: 30,
borderTopRightRadius: 24,
padding: 18,
padding: 15,
justifyContent: 'space-between',
},
}),
MessageOverlayStyles: StyleSheet.create({
@@ -613,16 +653,6 @@ export const DefaultTheme = {
borderRadius: 15,
margin: -13.5,
},
kebabPopUp: {
marginHorizontal: 4,
},
kebabHeaderStyle: {
backgroundColor: 'white',
borderTopLeftRadius: 30,
borderTopRightRadius: 24,
padding: 15,
justifyContent: 'space-between',
},
button: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,

4
screens/Home/MyVcs/AddVcModalMachine.ts
View File

@@ -100,7 +100,7 @@ export const AddVcModalMachine =
},
],
SELECT_ID_TYPE: {
actions: ['setIdType', 'clearId'],
actions: ['clearIdError', 'setIdType', 'clearId'],
},
},
},
@@ -135,7 +135,7 @@ export const AddVcModalMachine =
},
],
SELECT_ID_TYPE: {
actions: ['setIdType', 'clearId'],
actions: ['clearIdError', 'setIdType', 'clearId'],
target: 'idle',
},
},

2
screens/Home/MyVcs/AddVcModalMachine.typegen.ts
View File

@@ -38,7 +38,7 @@ export interface Typegen0 {
};
'eventsCausingActions': {
clearId: 'SELECT_ID_TYPE';
clearIdError: 'INPUT_ID' | 'VALIDATE_INPUT';
clearIdError: 'INPUT_ID' | 'SELECT_ID_TYPE' | 'VALIDATE_INPUT';
clearOtp:
| 'DISMISS'
| 'done.invoke.AddVcModal.acceptingIdInput.requestingOtp:invocation[0]'

66
screens/Home/MyVcs/IdInputModal.tsx
View File

@@ -39,20 +39,26 @@ export const IdInputModal: React.FC<IdInputModalProps> = (props) => {
<Modal
onDismiss={dismissInput}
isVisible={props.isVisible}
onShow={setIndividualID}>
onShow={setIndividualID}
headerTitle={t('header')}
headerElevation={2}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<Column fill align="space-between" pY={32} pX={24}>
<Text align="center">
{t('header', { vcLabel: controller.vcLabel.singular })}
</Text>
<Column>
<Row crossAlign="flex-end">
<Text
align="left"
size="regular"
style={Theme.TextStyles.retrieveIdLabel}>
{t('guideLabel', { vcLabel: controller.vcLabel.singular })}
</Text>
<Row crossAlign="flex-end" style={{ marginTop: 20 }}>
<Column
width="33%"
style={{
borderBottomWidth: 1,
marginBottom: 2,
borderColor:
Platform.OS === 'ios'
? 'transparent'
@@ -69,49 +75,51 @@ export const IdInputModal: React.FC<IdInputModalProps> = (props) => {
</Column>
<Column fill>
<Input
inputContainerStyle={
controller.id ? Theme.Styles.VidInputBottom : null
}
placeholder={!controller.id ? inputLabel : ''}
label={controller.id ? inputLabel : ''}
labelStyle={{
color: controller.isInvalid
? Theme.Colors.errorMessage
: Theme.Colors.textValue,
textAlign: 'left',
}}
inputStyle={{
textAlign: I18nManager.isRTL ? 'right' : 'left',
fontWeight: '700',
}}
selectionColor={Theme.Colors.Cursor}
value={controller.id}
keyboardType="number-pad"
rightIcon={
controller.isInvalid ? (
<Icon
name="error"
size={18}
color={Theme.Colors.errorMessage}
/>
) : null
}
errorStyle={{ color: Theme.Colors.errorMessage }}
errorStyle={Theme.TextStyles.error}
errorMessage={controller.idError}
onChangeText={controller.INPUT_ID}
ref={setIdInputRef}
/>
</Column>
</Row>
</Column>
<Column>
<Button
title={t('generateVc', { vcLabel: controller.vcLabel.singular })}
type="gradient"
title={t('downloadID', { vcLabel: controller.vcLabel.singular })}
disabled={!controller.id}
margin="24 0 0 0"
onPress={controller.VALIDATE_INPUT}
loading={controller.isRequestingOtp}
/>
{!controller.id && (
<TouchableOpacity
activeOpacity={1}
onPress={props.onPress}
style={Theme.Styles.getId}>
<Text color={Theme.Colors.AddIdBtnBg}>{t('noUIN/VID')}</Text>
</TouchableOpacity>
<Row style={Theme.Styles.getId}>
<Text
color={Theme.Colors.getVidColor}
weight="semibold"
size="small">
{t('noUIN/VID')}
</Text>
<TouchableOpacity activeOpacity={1} onPress={props.onPress}>
<Text
color={Theme.Colors.AddIdBtnBg}
weight="semibold"
size="small">
{t('getItHere')}
</Text>
</TouchableOpacity>
</Row>
)}
</Column>
</Column>

44
screens/Home/MyVcs/OtpVerification.tsx
View File

@@ -1,44 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { PinInput } from '../../../components/PinInput';
import { Column, Text } from '../../../components/ui';
import { ModalProps, Modal } from '../../../components/ui/Modal';
import { Theme } from '../../../components/ui/styleUtils';
import { Image } from 'react-native';
import { Icon } from 'react-native-elements';
export const OtpVerification: React.FC<OtpVerificationModalProps> = (props) => {
const { t } = useTranslation('OtpVerificationModal');
return (
<Modal
isVisible={props.isVisible}
onDismiss={props.onDismiss}
headerElevation={2}
headerTitle={t('header')}
headerRight={<Icon name={''} />}>
<Column
fill
padding="32"
backgroundColor={Theme.Colors.lightGreyBackgroundColor}>
<Column fill align="space-between" crossAlign="center">
<Text align="center">{t('enterOtp')}</Text>
<Image source={Theme.OtpLogo} resizeMethod="auto" />
<Text
align="center"
color={Theme.Colors.errorMessage}
margin="16 0 0 0">
{props.error}
</Text>
<PinInput length={6} onDone={props.onInputDone} />
</Column>
<Column fill></Column>
</Column>
</Modal>
);
};
interface OtpVerificationModalProps extends ModalProps {
onInputDone: (otp: string) => void;
error?: string;
}

5
screens/Home/MyVcs/OtpVerificationModal.strings.json
View File

@@ -1,3 +1,6 @@
{
"enterOtp": "Enter the 6-digit verification code we sent you"
"title": "OTP Verification",
"otpSentMessage": "We've sent the 6 digit code to your registered mobile number!",
"resendTheCode": "You can resend the code in ",
"resendCode": "Resend Code"
}

46
screens/Home/MyVcs/OtpVerificationModal.tsx
View File

@@ -1,22 +1,42 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Icon } from 'react-native-elements';
import { PinInput } from '../../../components/PinInput';
import { Column, Text } from '../../../components/ui';
import { Modal, ModalProps } from '../../../components/ui/Modal';
import { ModalProps, Modal } from '../../../components/ui/Modal';
import { Theme } from '../../../components/ui/styleUtils';
import { Image, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements';
export const OtpVerificationModal: React.FC<OtpVerificationModalProps> = (
props
) => {
const { t } = useTranslation('OtpVerificationModal');
const { t } = useTranslation('OtpVerification');
return (
<Modal isVisible={props.isVisible} onDismiss={props.onDismiss}>
<Column fill padding="32">
<Icon name="lock" color={Theme.Colors.Icon} size={60} />
<Column fill align="space-between">
<Text align="center">{t('enterOtp')}</Text>
<Column
fill
padding="32"
backgroundColor={Theme.Colors.whiteBackgroundColor}>
<Column fill align="space-between" crossAlign="center">
<Column crossAlign="center">
<Image source={Theme.OtpLogo} resizeMethod="auto" />
<Text
margin="24 0 6 0"
weight="bold"
style={Theme.TextStyles.header}>
{t('title')}
</Text>
<Text
margin="0 24 15 24"
color={Theme.Colors.RetrieveIdLabel}
weight="semibold"
size="small"
align="center">
{t('otpSentMessage')}
</Text>
</Column>
<Text
align="center"
color={Theme.Colors.errorMessage}
@@ -24,6 +44,18 @@ export const OtpVerificationModal: React.FC<OtpVerificationModalProps> = (
{props.error}
</Text>
<PinInput length={6} onDone={props.onInputDone} />
<Text
margin="39 0 0 0"
color={Theme.Colors.RetrieveIdLabel}
weight="semibold"
size="small">
{t('resendTheCode')}
</Text>
<TouchableOpacity activeOpacity={1}>
<Text color={Theme.Colors.AddIdBtnBg} weight="bold" size="regular">
{t('resendCode')}
</Text>
</TouchableOpacity>
</Column>
<Column fill></Column>
</Column>

39
screens/Home/MyVcsTab.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Button, Column, Row, Text } from '../../components/ui';
import { Theme } from '../../components/ui/styleUtils';
import { RefreshControl, Image } from 'react-native';
import { RefreshControl, Image, View } from 'react-native';
import { useMyVcsTab } from './MyVcsTabController';
import { HomeScreenTabProps } from './HomeScreen';
import { AddVcModal } from './MyVcs/AddVcModal';
@@ -25,9 +25,38 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = (props) => {
GET_INDIVIDUAL_ID('');
};
{
controller.isRequestSuccessful
? setTimeout(() => {
controller.DISMISS();
}, 9000)
: null;
}
const DownloadingIdPopUp: React.FC = () => {
return (
<View
style={{ display: controller.isRequestSuccessful ? 'flex' : 'none' }}>
<Row style={Theme.Styles.downloadingIdPopUp}>
<Text color={Theme.Colors.whiteText} weight="semibold" size="smaller">
{t('downloadingYourId')}
</Text>
<Icon
name="close"
onPress={controller.DISMISS}
color={Theme.Colors.whiteText}
size={19}
/>
{clearIndividualId()}
</Row>
</View>
);
};
return (
<React.Fragment>
<Column fill style={{ display: props.isVisible ? 'flex' : 'none' }}>
<DownloadingIdPopUp />
<Column fill pY={16} pX={18}>
{controller.vcKeys.length > 0 && (
<React.Fragment>
@@ -120,14 +149,6 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = (props) => {
<GetVcModal service={controller.GetVcModalService} />
)}
{controller.isRequestSuccessful && (
<DownloadingVcModal
isVisible={controller.isRequestSuccessful}
onDismiss={controller.DISMISS}
onShow={clearIndividualId}
/>
)}
<OnboardingOverlay
isVisible={controller.isOnboarding}
onDone={controller.ONBOARDING_DONE}

6
screens/Home/ViewVcModal.tsx
View File

@@ -10,7 +10,7 @@ import { OIDcAuthenticationModal } from '../../components/OIDcAuth';
import { useViewVcModal, ViewVcModalProps } from './ViewVcModalController';
import { useTranslation } from 'react-i18next';
import { VcDetails } from '../../components/VcDetails';
import { OtpVerification } from './MyVcs/OtpVerification';
import { OtpVerificationModal } from './MyVcs/OtpVerificationModal';
import { BindingVcWarningOverlay } from './MyVcs/BindingVcWarningOverlay';
export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
@@ -76,7 +76,7 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
)}
{controller.isAcceptingOtpInput && (
<OtpVerification
<OtpVerificationModal
isVisible={controller.isAcceptingOtpInput}
onDismiss={controller.DISMISS}
onInputDone={controller.inputOtp}
@@ -85,7 +85,7 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
)}
{controller.isAcceptingBindingOtp && (
<OtpVerification
<OtpVerificationModal
isVisible={controller.isAcceptingBindingOtp}
onDismiss={controller.DISMISS}
onInputDone={controller.inputOtp}

11
screens/Settings/SettingScreen.tsx
View File

@@ -52,18 +52,17 @@ export const SettingScreen: React.FC<SettingProps & MainRouteProps> = (
const { t } = useTranslation('SettingScreen');
const controller = useSettingsScreen(props);
const [isContentVisible, setIsContentVisible] = useState(false);
const toggleContent = () => setIsContentVisible(!isContentVisible);
return (
<React.Fragment>
<Pressable onPress={toggleContent}>{props.triggerComponent}</Pressable>
<Pressable onPress={controller.TOGGLE_SETTINGS}>
{props.triggerComponent}
</Pressable>
<Modal
isVisible={isContentVisible}
isVisible={controller.isVisible}
arrowLeft={<Icon name={''} />}
headerTitle={t('header')}
headerElevation={2}
onDismiss={toggleContent}>
onDismiss={controller.TOGGLE_SETTINGS}>
<ScrollView>
<Column fill backgroundColor={Theme.Colors.lightGreyBackgroundColor}>
<MessageOverlay

5
screens/Settings/SettingScreenController.ts
View File

@@ -29,6 +29,8 @@ export function useSettingsScreen({ navigation }: MainRouteProps) {
const authService = appService.children.get('auth');
const settingsService = appService.children.get('settings');
const [isVisible, setIsVisible] = useState(false);
const [alertMsg, setHasAlertMsg] = useState('');
const authBiometrics = useSelector(authService, selectBiometrics);
const [biometricState, biometricSend, bioService] =
@@ -91,6 +93,7 @@ export function useSettingsScreen({ navigation }: MainRouteProps) {
};
return {
isVisible,
alertMsg,
hideAlert,
backendInfo: useSelector(appService, selectBackendInfo),
@@ -106,6 +109,8 @@ export function useSettingsScreen({ navigation }: MainRouteProps) {
UPDATE_NAME: (name: string) =>
settingsService.send(SettingsEvents.UPDATE_NAME(name)),
TOGGLE_SETTINGS: () => setIsVisible(!isVisible),
UPDATE_VC_LABEL: (label: string) =>
settingsService.send(SettingsEvents.UPDATE_VC_LABEL(label)),