Adds POC Login Form in React

Author: iMerica

demo/demo/settings.py

@@ -116,10 +116,14 @@
 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 @@
 }
 
 
-CORS_ORIGIN_ALLOW_ALL = True # For demo purposes only. Use a white list in the real world.
+# For demo purposes only. Use a white list in the real world.
+CORS_ORIGIN_ALLOW_ALL = True

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 {

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>
   );

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;
 }