Skip to content
This repository has been archived by the owner on Sep 3, 2021. It is now read-only.

Card styling #115

Merged
merged 10 commits into from
Aug 3, 2021
Merged

Card styling #115

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f27422d
card-styling
junibugge Aug 2, 2021
9439594
Various styling
junibugge Aug 2, 2021
becb6d5
Merge branch 'main' into card-styling
junibugge Aug 2, 2021
8ecc8cd
styling
junibugge Aug 3, 2021
4804897
menu bar and activity frame
junibugge Aug 3, 2021
41e00a5
Add loading spinner
eschoien Aug 3, 2021
e272e90
Styling fix
junibugge Aug 3, 2021
ca13835
Merge branch 'card-styling' of https://github.com/felleslosninger/dig…
junibugge Aug 3, 2021
3c15810
styling fix in RequestFrame
junibugge Aug 3, 2021
0cb1f1d
Merge branch 'main' into card-styling
junibugge Aug 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions wallet/wallet-app/AppWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ export default function AppWrapper() {

if (route.name === 'Oversikt') {
iconName = 'vcard';
} else if (route.name === 'Forespørsler') {
} else if (route.name === 'Hent bevis') {
iconName = 'plus';
} else if (route.name === 'Aktivitet') {
} else if (route.name === 'Skann QR') {
iconName = 'qrcode';
} else if (route.name === 'Profil') {
iconName = 'id-badge';
Expand All @@ -88,8 +88,8 @@ export default function AppWrapper() {
},
}}>
<Tab.Screen style={styles.textNavBar} name="Oversikt" component={OverviewStackScreen} />
<Tab.Screen name="Forespørsler" component={RequestFrame} />
<Tab.Screen name="Aktivitet" component={ActivityFrame} />
<Tab.Screen name="Hent bevis" component={RequestFrame} />
<Tab.Screen name="Skann QR" component={ActivityFrame} />
<Tab.Screen name="Profil" component={ProfileMenuSlide} />
</Tab.Navigator>
</>
Expand Down
21 changes: 11 additions & 10 deletions wallet/wallet-app/components/frames/Access.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,6 @@ export default function Access() {

const changeText = () => {
check ? setText('Skriv inn personlig kode') : setText('Opprett personlig kode');
// if (check === true) {
// setText('Skriv inn personlig kode');
// } else setText('Opprett personlig kode');
};

isFocused ? checkHasPin() : null;
Expand Down Expand Up @@ -104,25 +101,27 @@ export default function Access() {
}}>
<Text
style={{
paddingTop: 24,
paddingTop: 10,
paddingBottom: 20,
color: '#7B7676',
color: 'rgb(30,46,60)',
fontSize: 30,
}}>
{text}
</Text>

<ReactNativePinView
inputSize={32}
inputSize={10}
ref={pinView}
pinLength={4}
buttonSize={60}
onValueChange={(value) => setEnteredPin(value)}
buttonAreaStyle={{
marginTop: 24,
marginTop: 10,

marginHorizontal: 40,
}}
inputAreaStyle={{
marginBottom: 15,
marginBottom: 10,
}}
inputViewEmptyStyle={{
backgroundColor: 'transparent',
Expand All @@ -135,7 +134,7 @@ export default function Access() {
buttonViewStyle={{
borderWidth: 1,
borderColor: 'rgb(30,46,60)',
backgroundColor: 'rgb(242, 242, 242)',
backgroundColor: 'transparent',
}}
buttonTextStyle={{
color: 'rgb(30,46,60)',
Expand All @@ -160,7 +159,8 @@ export default function Access() {
}
/>
</SafeAreaView>
<TouchableOpacity
{/*
<TouchableOpacity
style={{
borderRadius: 4,
backgroundColor: 'rgb(30,46,60)',
Expand All @@ -172,6 +172,7 @@ export default function Access() {
onPress={() => AsyncStorage.removeItem('pin') && checkHasPin() && alert('Personlig kode slettet')}>
<Text style={{ color: 'white' }}>Slett personlig kode</Text>
</TouchableOpacity>
*/}
</>
);
}
Expand Down
69 changes: 42 additions & 27 deletions wallet/wallet-app/components/frames/ActivityFrame.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React, { useState } from 'react';
import { View, Button, Text, StyleSheet, Alert } from 'react-native';
import { View, Button, StyleSheet, Alert } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
import { useDispatch, useSelector } from 'react-redux';
import { BarCodeScanner } from 'expo-barcode-scanner';
import jwtDecode from 'jwt-decode';
import { useNavigation } from '@react-navigation/native';
import { Text } from 'react-native-ui-lib';
import Icon from 'react-native-vector-icons/FontAwesome';
import { addCredentialShare } from '../../redux/CredentialShareSlice';
import { httpSendPresentation } from '../../utils/httpRequests';
import createVerifiablePresentationJWT from '../../utils/sign';


/**
* A frame with a botton to send proof to a verifier if you choose to share
* @returns A frame, sending the proof
Expand All @@ -20,24 +21,25 @@ export default function ActivityFrame() {
const [scanned, setScanned] = useState(false);
const navigation = useNavigation();
const { cred } = useSelector((state) => state.credentials);

async function sendPresentation(creds, audience, user) {
const jwtCreds = creds.map((c) => c.token);
const token = await createVerifiablePresentationJWT(jwtCreds, audience, user);
const verified = await httpSendPresentation(token);
if (verified) {
alert("Bevis sendt");
alert('Bevis sendt');
creds.map((c) =>
dispatch(
addCredentialShare({
id: Math.random().toString(),
credential_id: c.jti,
verifier: audience,
})
)
) } else {
alert("Bevis ble ikke sendt")
};
dispatch(
addCredentialShare({
id: Math.random().toString(),
credential_id: c.jti,
verifier: audience,
})
)
);
} else {
alert('Bevis ble ikke sendt');
}
setStatus(verified);
return verified;
}
Expand All @@ -55,14 +57,18 @@ export default function ActivityFrame() {
}
}

Alert.alert('TJENESTE SPØR OM BEVIS', `Vil du godkjenne at beviset ${vc} blir sendt til tjeneste ${verifier}?`, [
{
text: 'Ikke godkjenn',
onPress: () => navigation.navigate('Oversikt'),
style: 'cancel',
},
{ text: 'Godkjenn', onPress: () => sendPresentation([proof], verifier, userID) },
]);
Alert.alert(
'TJENESTE SPØR OM BEVIS',
`Vil du godkjenne at beviset ${vc} blir sendt til tjeneste ${verifier}?`,
[
{
text: 'Ikke godkjenn',
onPress: () => navigation.navigate('Oversikt'),
style: 'cancel',
},
{ text: 'Godkjenn', onPress: () => sendPresentation([proof], verifier, userID) },
]
);
};

return (
Expand All @@ -82,9 +88,19 @@ export default function ActivityFrame() {
) : (
<Text>Du har ingen bevis</Text>
)} */}
<View>
<Text style = {styles.instructionText}>Skann QR-koden til en tjeneste du ønsker å dele et bevis med:</Text>
<View
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
marginTop: 25,
}}>
<Icon name="question-circle" size={25} color="rgb(30,46,60)" />
<Text text60 style={{ marginLeft: 10 }}>
Skann QR-kode til tjeneste
</Text>
</View>

<View style={styles.camera}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
Expand All @@ -98,7 +114,6 @@ export default function ActivityFrame() {
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: '10%',
width: '80%',
alignSelf: 'center',
},
Expand All @@ -120,8 +135,8 @@ const styles = StyleSheet.create({
},
camera: {
flex: 1,
marginTop: 80,
marginBottom: 80,
marginTop: 30,
marginBottom: 50,
alignItems: 'center',
},
instructionText: {
Expand Down
45 changes: 34 additions & 11 deletions wallet/wallet-app/components/frames/Onboarding.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Platform, Button, TouchableOpacity } from 'react-native';
import { View, StyleSheet, ActivityIndicator, Button, TouchableOpacity } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import jwtDecode from 'jwt-decode';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';
import { Text } from 'react-native-ui-lib';
import SafeAreaView from 'react-native-safe-area-view';

import Icon from 'react-native-vector-icons/FontAwesome';
import { generateKeys } from '../../utils/sign';
import Access from './Access';
Expand All @@ -20,6 +23,7 @@ export default function Onboarding() {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
const [verified, setVerified] = useState(false);
const [loading, setLoading] = useState(false);
const navigation = useNavigation();

useEffect(() => {
Expand All @@ -30,6 +34,7 @@ export default function Onboarding() {
}, []);

const handleBarCodeScanned = async ({ type, data }) => {
setLoading(true);
setScanned(true);
// alert(`Bar code with type ${type} and data ${data} has been scanned!`);

Expand All @@ -41,6 +46,7 @@ export default function Onboarding() {
generateKeys();
setVerified(true);
}
setLoading(false);
};

if (hasPermission === null) {
Expand All @@ -51,13 +57,28 @@ export default function Onboarding() {
return <Access />;
}

return (
<View style={styles.container}>
return loading ? (
<View
style={{
flex: 1,
justifyContent: 'center',
}}>
<ActivityIndicator size="large" color="rgb(0,98,184)" />
</View>
) : (
<SafeAreaView style={styles.container}>
{!scanned ? (
<View>
<Text style={styles.instructionText}>1. Gå inn på grunnidportalen.no</Text>
<Text style={styles.instructionText}>2. Logg inn med id-porten</Text>
<Text style={styles.instructionText}>3. Skann deretter QR-koden</Text>
<View
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
marginTop: 25,
}}>
<Icon name="question-circle" size={25} color="rgb(30,46,60)" />
<Text text60 style={{ marginLeft: 10 }}>
Skann din QR-kode fra ID-porten
</Text>
</View>
) : null}
{!scanned && !verified ? (
Expand All @@ -66,7 +87,7 @@ export default function Onboarding() {
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
{scanned && <Button title="Tap to Scan Again" onPress={() => setScanned(false)} />}
{scanned && <Button title="Trykk for å skanne igjen" onPress={() => setScanned(false)} />}
</View>
) : null}

Expand All @@ -82,19 +103,21 @@ export default function Onboarding() {
</TouchableOpacity>
</View>
) : null}
</View>
</SafeAreaView>
);
}

const styles = StyleSheet.create({
camera: {
flex: 1,
marginTop: 80,
marginBottom: 80,
marginTop: 30,
marginBottom: 50,
alignItems: 'center',
},
container: {
flex: 1,
width: '80%',
alignSelf: 'center',
},
button: {
borderRadius: 4,
Expand Down
Loading