List validation methods after scanning QR code

discipl · Jun 4, 2020 · 57f3eac · 57f3eac
1 parent c827855
commit 57f3eac
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/validator-frontend/lang/en.json b/validator-frontend/lang/en.json
@@ -7,6 +7,7 @@
   "invalidQR": "This is an invalid QR-code!",
   "validQR": "This proof is validated!",
   "issuerNameDescription": "Issuer: ",
+  "validationMethods": "Validation methods: ",
   "validatingHeader": "Validator",
   "permissionMessage": "We need your camera to validate documents.",
   "permissionHeader": "Camera permission needed",

diff --git a/validator-frontend/lang/nl.json b/validator-frontend/lang/nl.json
@@ -7,6 +7,7 @@
   "invalidQR": "Dit is geen geldige QR-code!",
   "validQR": "Dit is geldig bewijs!",
   "issuerNameDescription": "Afgegeven door: ",
+  "validationMethods": "Validatie methoden: ",
   "validatingHeader": "Validatie",
   "permissionMessage": "We hebben uw camera nodig om waardepapieren te valideren.",
   "permissionHeader": "Camera nodig",

diff --git a/validator-frontend/screens/ScanScreen.js b/validator-frontend/screens/ScanScreen.js
@@ -189,7 +189,10 @@ class ScanScreen extends React.Component {
 class ValidatingScreen extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { validatingState: "waiting" };
+    this.state = {
+      validatingState: "waiting",
+      validationMethods: []
+    };
   }
 
   async componentDidMount() {
@@ -271,6 +274,8 @@ class ValidatingScreen extends React.Component {
       let attestorSsid = await (await this.paperWallet.getCore().getConnector('ephemeral')).newIdentity({'cert': orgCertifcate})
       console.log("Validating...")
 
+      this.setState(prevState => ({ validationMethods: [...prevState.validationMethods, 'Ephemeral'] }))
+
       return await this.paperWallet.validate(attestorSsid.did, qrString)
     }
     catch (e) {
@@ -311,6 +316,8 @@ class ValidatingScreen extends React.Component {
         return false
       }
 
+      this.setState(prevState => ({ validationMethods: [...prevState.validationMethods, 'IPv8'] }))
+
       return true
     } catch (e) {
       console.log("Error when verifying the IPv8 claim", e);
@@ -352,6 +359,8 @@ class ValidatingScreen extends React.Component {
     let validatingIcon;
     let validatingText;
     let issuerText;
+    let validationMethodsText;
+
     if (this.state.validatingState === "waiting") {
       validatingIcon = waiting;
       validatingText = i18n.t("checkingQR");
@@ -360,6 +369,7 @@ class ValidatingScreen extends React.Component {
       validatingIcon = verified;
       validatingText = i18n.t("validQR");
       issuerText = i18n.t("issuerNameDescription") + this.state.issuer
+      validationMethodsText = i18n.t("validationMethods") + this.state.validationMethods.join(', ')
     }
     if (this.state.validatingState === "denied") {
       validatingIcon = denied;
@@ -372,7 +382,11 @@ class ValidatingScreen extends React.Component {
           <NavigationEvents onDidFocus={payload => this.wrapperFunction()}/>
           <Text style ={styles.key}>{validatingText}</Text>
           {validatingIcon}
-          <Text style ={styles.value}>{issuerText}</Text>
+
+          <View style={styles.validationInformation}>
+            <Text style={styles.validationInformationText}>{validationMethodsText}</Text>
+            <Text style={styles.validationInformationText}>{issuerText}</Text>
+          </View>
         </View>
 
         {this.state.validatingState === "verified" ? <FlatList
@@ -419,6 +433,14 @@ const styles = StyleSheet.create({
     alignItems:'center',
     justifyContent:'center',
   },
+  validationInformation: {
+    padding: 10
+  },
+  validationInformationText: {
+    fontSize: 16,
+    padding: 5,
+    color: '#666666'
+  },
   flatview: {
     backgroundColor: '#F6F6F6',
     borderTopWidth: 2,