example for private/normal data (#29)

* example for private/normal data

* fixup! example for private/normal data

* remove /api prefix in backend paths

Author: davidcheung

templates/src/api/kratos.js

@@ -21,7 +21,7 @@ const adminApi = new AdminApiAxiosParamCreator({basePath : authAdminURL });
  * maps and calls flows[Login/Registration/Recovery/Settings] to kratos sdk fn names
  */
 const getBrowserFlowParams = async (flow) =>  publicApi[`initializeSelfService${flow}ViaBrowserFlow`]();
-const getRequestFlowData = async (flow, id) =>  publicApi[`getSelfService${flow}Flow`](id);
+const getRequestFlowData = async (flow, id) =>  adminApi[`getSelfService${flow}Flow`](id);
 
 /**
  * generate<Logout/FormRequest/RequestData/Session>URL uses SDK to generate endpoint for http client
@@ -34,7 +34,7 @@ const generateLogoutUrl = async () => {
 const generateFormRequestUrl = async (type) => {
   let { url } = await getBrowserFlowParams(capitalize(type));
   // Workaround for bug in SDK specs: https://github.com/ory/sdk/issues/43
-  if (type == "settings") {
+  if (type === "settings") {
     url = url.replace(/\/flows$/, '');
   }
   return authPublicURL + url;

templates/src/components/Card.css

@@ -1,16 +1,19 @@
 .card {
-  padding: 4%;
+  padding: 2%;
   background: #eee;
   border: none;
   border-radius: 0px;
   min-width: 350px;
+  max-width: 450px;
+  margin-top: 50px;
 }
 
 .card::before {
   content: attr(header);
   position: absolute;
-  margin-top: calc(-4% - 1.5em);
-  margin-left: calc(-4%);
+  /* the % offsets the padding on .card */
+  margin-top: calc(-2% - 1.5em);
+  margin-left: calc(-2%);
   text-indent: 0.2em;
   font-weight: 600;
 }

templates/src/components/Logo.css

@@ -1,5 +1,5 @@
 .logo {
   font-weight: 400;
   font-size: 2.5em;
-  margin: 1em 0;
+  margin: 1rem;
 }

templates/src/pages/Auth.css

@@ -29,3 +29,12 @@
 .separator::after {
   margin-left: .25em;
 }
+
+.auth-container .card{
+  padding: 4%;
+}
+.auth-container .card::before {
+  /* the % offsets the padding on .card */
+  margin-top: calc(-4% - 1.5em);
+  margin-left: calc(-4%);
+}

templates/src/pages/Home.css

@@ -5,6 +5,10 @@
   justify-content: center;
 }
 
+.Home .card {
+  width: 400px;
+}
+
 .App-logo {
   width: calc(1 / 8 * 100vw);
 }

templates/src/pages/Home.js

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react'
-import './Home.css'
 import config from '../config';
-
-import '../components/Info'
+import './Home.css'
 import InfoPanel from '../components/Info'
+<%if eq (index .Params `userAuth`) "yes" %>import Card from '../components/Card'<% end %>
 
 function Home() {
   const [data, setData] = useState({
@@ -14,32 +13,51 @@ function Home() {
   const [status, setStatus] = useState({
     code: 'Checking...',
   })
+<%if eq (index .Params `userAuth`) "yes" %>
+  const [privateState, setPrivateData] = useState({
+    isLoading: true,
+    data: {},
+  });
+
+  const fetchPrivateData = async(data) =>  {
+    const uri = `${config.backendURL}/auth/userInfo`
+    const resp = await fetch(uri,{credentials : "include"});
+    return {
+      data: await resp.json(),
+    }
+  }<% end %>
+
+  const fetchInfoPanel = async() => {
+    const resp = await fetch(`${config.backendURL}/status/about`, { credentials: "include" });
+    const code = resp.status
+    const info = await resp.json()
+    return { code, info };
+  };
+
 
 useEffect(() => {
-    fetch(`${config.backendURL}/status/about`, { credentials: "include" })
-      .then((result) => {
-        setStatus({
-          code: result.status,
-        })
-        return result.json()
-      })
-      .then((data) => {
-        setData({
-          info: data,
-          error: null,
-        })
-      })
-      .catch((error) => {
-        setData({
-          info: {},
-          error: error,
-        })
-      })
-  }, [])
+  fetchInfoPanel().then(({code, info}) => {
+      setStatus({ code });
+      setData({ info, error: null })
+    })
+    .catch((error) => {
+      setData({ info: {}, error: error })
+    });
+<%if eq (index .Params `userAuth`) "yes" %>
+    fetchPrivateData().then(setPrivateData);<% end %>
+}, [])
 
   return (
     <main className="Home">
       <InfoPanel data={data} status={status} config={config} />
+<%if eq (index .Params `userAuth`) "yes" %>
+      <Card header="Authenticated Data">
+        {
+          privateState.isLoading ?
+            <div>Fetching data...</div> :
+            <pre>{ JSON.stringify(privateState.data, null , 2) }</pre>
+        }
+      </Card><% end %>
     </main>
   )
 }