Auth branch (tastytrade#4)

* Login page and connection to API created

Created 'login' route, with a simple login interface.
Created authService, with functions that point to the API
Requests to API error out, will fix now.

* login functionality

Need to figure out how to make this into classes, so that non-browser based requests can be saved

* Created Session functionality

1. Created classes in session-service.ts
2. dmossSample has no function, just for reference
3. Login.js allows the user to login/out
4. Renamed the HTTP folder to service.

* Implemented dmoss changes

* New changes

1. Moved postData to http common
2. Took out if statement from validate

* commit to fix axios problem

.gitignore

@@ -33,3 +33,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+package-lock.json

components/layout.tsx

@@ -8,6 +8,7 @@ export default function Layout(props: any) {
       <div className="navBar">
         <Link href="/">Quote Data</Link>
         <Link href="/account-streamer">Account Data</Link>
+        <Link href = "/login">Login</Link>
       </div>
       <Toaster
         toastOptions={{

lib/models/tastytrade-session.ts

@@ -0,0 +1,13 @@
+import _ from 'lodash'
+
+export default class TastytradeSession { 
+    authToken: string | null = null
+
+    get isValid(){
+        return !_.isNil(this.authToken)
+    }
+
+    clear() {
+        this.authToken = null
+    }
+};

lib/service/http-common.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "https://api.cert.tastyworks.com",
+  headers: {
+    "Content-type": "application/json",
+    "Accept": "application/json",
+  }
+});
+
+export async function postData(url: string, data: object, headers: object): Promise<any> {
+  const response = await api.post(url, data, { headers });
+  return response;
+}

lib/service/session-service.ts

@@ -0,0 +1,21 @@
+import TastytradeSession from '../models/tastytrade-session';
+import { postData } from "./http-common";
+
+
+export default class SessionService {
+    authToken: string | null = null
+    constructor(private session: TastytradeSession) {
+
+    }
+    async login(login: string, password: string){
+        this.session.authToken = (await postData('/sessions', {login, password}, {})).data.data["session-token"]
+    }
+    async validate() {
+        const response = await postData('/sessions/validate', {}, { Authorization: this.session.authToken });
+        return response.data;
+      }
+
+    async logout(){
+        this.session.clear()
+    }
+}

package.json

@@ -11,12 +11,15 @@
   "dependencies": {
     "@dxfeed/api": "^1.1.0",
     "@types/lodash": "^4.14.182",
+    "axios": "^1.3.4",
     "dayjs": "^1.11.1",
     "lodash": "^4.17.21",
     "next": "12.1.5",
     "react": "18.0.0",
+    "react-bootstrap": "^2.7.2",
     "react-dom": "18.0.0",
-    "react-hot-toast": "^2.4.0"
+    "react-hot-toast": "^2.4.0",
+    "react-router-dom": "^6.9.0"
   },
   "devDependencies": {
     "@types/node": "17.0.27",

pages/login.js

@@ -0,0 +1,64 @@
+import React, {useState, useEffect} from 'react'
+import {Form } from 'react-bootstrap'
+import SessionService from '../lib/service/session-service.ts'
+import TastytradeSession from "../lib/models/tastytrade-session.ts"
+
+export default function Login() {
+  const [login_information_object, setLogin_information_object] = useState({});
+  const [error, setError] = useState("");
+  const tastytradeSession = new TastytradeSession();
+  const sessionService = new SessionService(tastytradeSession)
+
+  useEffect(()=>{
+    console.log('in login useEffect')
+  }, []);
+
+  const handleLogin = async (e) =>{
+    e.preventDefault();
+    setError("")
+    try {
+      await sessionService.login(login_information_object.login, login_information_object.password);
+      await sessionService.validate();
+      console.log(tastytradeSession.authToken)
+    } catch (error) {
+        console.log(error)
+      setError(error.message);
+    }
+  };
+
+  const handleLogout = async (e) =>{
+    e.preventDefault();
+    console.log(tastytradeSession.isValid)
+    if(tastytradeSession.isValid){
+      try {
+          await sessionService.logout();
+          console.log(tastytradeSession.authToken)
+        }catch (error) {
+          console.log(error)
+          setError(error.message);
+        }
+    }else{
+
+    }
+  }
+
+  return (
+    <>
+        <h2 className = "text-center mb-4">Log In</h2>
+        <form onSubmit={handleLogin}>
+            <Form.Group id = "email">
+                <Form.Label>Email</Form.Label>
+                <Form.Control id="email"  placeholder="Username" name="username" value={login_information_object.login} onChange={(event) => setLogin_information_object({...login_information_object, login: event.target.value})} required/>
+            </Form.Group>
+            <Form.Group id = "Password">
+                <Form.Label>Password</Form.Label>
+                <Form.Control type="password" id="password" placeholder="Password" name="password" value={login_information_object.password} onChange={(event) => setLogin_information_object({...login_information_object, password: event.target.value})} required/>
+            </Form.Group>
+            {error && <alert variant="danger">{error}</alert>}
+            <br/>
+            <button type = "submit" className="btn btn-primary w-100">Log In</button>
+        </form>
+        <button type = "submit" className = "btn btn-primary w-100" onClick = {handleLogout}>Logout</button>
+    </>
+  )
+};