Adding basic authentication functionality

To be able to write to a person's Pod, they need to log in and
authorise our app. To do this, we use the React components in
https://www.npmjs.com/package/@solid/react.

Although it unfortunately comes with a bunch of stuff we will not
be using, the authentication components are easy enough to use:
wrap components that should be visible to people who are not
logged in inside a <LoggedOut> component, and those that should
only be visible to those who are logged in inside a <LoggedIn>.

Actual authentication is initiated with a <LoginButton>.
Unfortunately, at this time this involves including an HTML blob
verbatim as downloaded from
https://solid.github.io/solid-auth-client/dist/popup.html
(this is linked to from the README of @solid/react). In the future,
this will hopefully be properly packaged.

package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@solid/react": "^1.6.0",
     "@types/jest": "24.0.15",
     "@types/node": "12.6.6",
     "@types/react": "16.8.23",
     "@types/react-dom": "16.8.4",
+    "@types/solid__react": "^1.6.1",
     "bulma": "^0.7.5",
     "node-sass": "^4.12.0",
     "react": "^16.8.6",

src/App.tsx

 import React from 'react';
+import { LoggedOut, LoginButton, LoggedIn } from '@solid/react';
+import { Dashboard } from './components/Dashboard';
 
 const App: React.FC = () => {
-  return (
+  return <>
     <React.StrictMode>
-      <p>This is a basic app that can use <a href="https://bulma.io/" title="The Bulma CSS framework">Bulma</a> for styling.</p>
+      <LoggedOut>
+        <section className="section">
+          <p className="content">Please connect to your Pod to start taking notes.</p>
+          <p className="content">
+            <LoginButton popup="popup.html" className="button is-large is-primary">Connect</LoginButton>
+          </p>
+        </section>
+      </LoggedOut>
+      <LoggedIn>
+        <Dashboard/>
+      </LoggedIn>
     </React.StrictMode>
-  );
+  </>;
 }
 
 export default App;

src/components/Dashboard.tsx

+import React from 'react';
+import { LogoutButton } from '@solid/react';
+
+export const Dashboard: React.FC = () => {
+  return <>
+    <section className="section">You are logged in! You will be able to do things here.</section>
+    <footer className="footer has-text-right">
+      <LogoutButton className="button"/>
+    </footer>
+  </>;
+};