Merge pull request #96 from Arquisoft/qr_auth

Qr auth

webapp/package.json

@@ -14,11 +14,13 @@
     "bootstrap": "^4.6.0",
     "express": "^4.17.1",
     "gem": "^2.4.3",
+    "keypair": "^1.0.2",
     "leaflet": "^1.7.1",
     "react": "^17.0.1",
     "react-bootstrap": "^1.5.1",
     "react-dom": "^17.0.1",
     "react-leaflet": "^3.1.0",
+    "react-qr-code": "^1.1.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-slick": "^0.28.1",

webapp/src/App.js

@@ -13,6 +13,7 @@ import ResponsiveDrawer from "./components/Localizations";
 import MainCarousel from "./components/MainCarousel";
 import AppInfo from "./components/AppInfo";
 import LoginPage from "./components/LoginPage";
+import QRPage from "./components/QRPage";
 
 class App extends React.Component {
   constructor() {
@@ -42,6 +43,9 @@ class App extends React.Component {
             <Route path="/login">
               <LoginPage></LoginPage>
             </Route>
+            <Route path="/qr">
+              <QRPage></QRPage>
+            </Route>
             <Route path="/">
               {this.main2()}
             </Route>

webapp/src/components/NavbarSession.js

@@ -21,7 +21,7 @@ function NavbarSession() {
         </Nav>;
     }
     return <Nav>
-    <Nav.Link>
+    <Nav.Link as={Link} to="/qr">
         <AccountCircleIcon className="mr-1"></AccountCircleIcon>
         <CombinedDataProvider datasetUrl={webId} thingUrl={webId}>
         <Text property={FOAF.name.iri.value} autosave/>

webapp/src/components/QRPage.js

@@ -0,0 +1,58 @@
+import keypair from 'keypair';
+import QRCode from 'react-qr-code';
+import React, { useState } from 'react';
+import { useSession } from "@inrupt/solid-ui-react";
+import {
+    getSolidDataset,
+    getThing,
+    setStringNoLocale,
+    setThing,
+    saveSolidDatasetAt,
+} from "@inrupt/solid-client";
+import { fetch } from "@inrupt/solid-client-authn-browser";
+import { VCARD } from "@inrupt/vocab-common-rdf";
+import { Button } from "@material-ui/core";
+import "../css/QRPage.css";
+
+export default function QRPage() {
+    const { session } = useSession();
+    const { webId } = session.info;
+    const [showQR, setShowQR] = useState(false);
+
+
+    const [pair, setPair] = useState(() => {
+        const pair = keypair({ bits: 1024 });
+        return pair;
+    });
+
+    const privateKey = pair.private;
+    const publicKey = pair.public;
+
+
+
+    function logKey() {
+        getSolidDataset(webId.split("#")[0], { fetch: fetch }).then((response) => {
+            const profile = getThing(response, webId);
+            let updatedProfile = setStringNoLocale(profile, VCARD.key, publicKey);
+            console.log(publicKey);
+            const myChangedDataset = setThing(response, updatedProfile);
+            saveSolidDatasetAt(webId.split("#")[0], myChangedDataset, { fetch: fetch }).then(() => {
+                setShowQR(true);
+            });
+        });
+    }
+
+
+    if(showQR) {
+        return (<div className="centerMe"><QRCode
+        level="Q"
+        size={512}
+        value={JSON.stringify({
+            webId,
+            privateKey
+        })}
+    /></div>);
+    }
+
+    return (<div className="centerMe"><Button color="primary" variant="contained" onClick={logKey}>Press me</Button></div>);
+}

webapp/src/css/QRPage.css

@@ -0,0 +1,7 @@
+.centerMe {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 2em;
+}