From a7f54991c1fe4ad675d3d74ab33b40d20272ca3f Mon Sep 17 00:00:00 2001
From: Michael <michaelmartinez@me.com>
Date: Sat, 28 Mar 2020 13:51:31 -0500
Subject: [PATCH] Adds POC Login Form in React

---
 demo/demo/settings.py        |  7 ++++++-
 demo/react-spa/src/App.css   |  2 ++
 demo/react-spa/src/App.js    | 22 +++++++++++++++-------
 demo/react-spa/src/index.css | 35 +++++++++++++++++++++++++++++++++++
 4 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/demo/demo/settings.py b/demo/demo/settings.py
index c001399..4496f0d 100644
--- a/demo/demo/settings.py
+++ b/demo/demo/settings.py
@@ -116,10 +116,14 @@ ACCOUNT_EMAIL_REQUIRED = False
 ACCOUNT_AUTHENTICATION_METHOD = 'username'
 ACCOUNT_EMAIL_VERIFICATION = 'optional'
 
+REST_USE_JWT = True
+JWT_AUTH_COOKIE = 'auth'
+
 REST_FRAMEWORK = {
     'DEFAULT_AUTHENTICATION_CLASSES': (
         'rest_framework.authentication.SessionAuthentication',
         'rest_framework.authentication.TokenAuthentication',
+        'dj_rest_auth.utils.JWTCookieAuthentication'
     ),
     'DEFAULT_SCHEMA_CLASS': 'rest_framework.schemas.coreapi.AutoSchema'
 }
@@ -130,4 +134,5 @@ SWAGGER_SETTINGS = {
 }
 
 
-CORS_ORIGIN_ALLOW_ALL = True # For demo purposes only. Use a white list in the real world.
\ No newline at end of file
+# For demo purposes only. Use a white list in the real world.
+CORS_ORIGIN_ALLOW_ALL = True
diff --git a/demo/react-spa/src/App.css b/demo/react-spa/src/App.css
index 74b5e05..92fd3ac 100644
--- a/demo/react-spa/src/App.css
+++ b/demo/react-spa/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  width: 100%;
 }
 
 .App-logo {
@@ -22,6 +23,7 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  width: 100%;
 }
 
 .App-link {
diff --git a/demo/react-spa/src/App.js b/demo/react-spa/src/App.js
index 70fedad..a8546a4 100644
--- a/demo/react-spa/src/App.js
+++ b/demo/react-spa/src/App.js
@@ -18,21 +18,28 @@ function App() {
       body:  JSON.stringify({username, password})
     }).then(resp => resp.json()).then(data => {
       changeResponse(data)
-    })
+    }).catch(error => console.log('error ->', error))
   }
 
   return (
     <div className="App">
       <header className="App-header">
-        <p>
+        <h1>
           Login
-        </p>
-        <p>
-
+        </h1>
+        <div className={'help-text'}>
+          Inspect the network requests in your browser to view headers returned by dj-rest-auth.
+        </div>
+        <div>
           {resp &&
-            <span>Response: {JSON.stringify(resp)}</span>
+            <div className={'response'}>
+              <code>
+                {JSON.stringify(resp)}
+              </code>
+            </div>
           }
-        </p>
+        </div>
+        <div>
         <form onSubmit={onSubmit}>
           <div>
             <input
@@ -50,6 +57,7 @@ function App() {
           </div>
           <button type={'submit'}>Submit</button>
         </form>
+        </div>
       </header>
     </div>
   );
diff --git a/demo/react-spa/src/index.css b/demo/react-spa/src/index.css
index ec2585e..379ece5 100644
--- a/demo/react-spa/src/index.css
+++ b/demo/react-spa/src/index.css
@@ -1,13 +1,48 @@
 body {
   margin: 0;
+  width: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  flex-direction: column;
+}
+
+body div {
+  flex-direction: row;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+ul {
+  width: 240px;
+  font-size: 11px;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
+  word-break: break-all;
+  height: 200px;
+  color: #0f0f0f;
+}
+
+.response {
+  margin: 20px;
+  background-color: #eee;
+  width: 80%;
+  height: 200px;
+  overflow: scroll;
+}
+
+.help-text {
+  font-size: 11px;
+  margin: 20px;
+}
+
+form > div {
+  margin: 20px;
 }