2024-01-25-CRUD-Team-Teach.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "toc: false\n",
    "comments: true\n",
    "layout: post\n",
    "title: Team Teach - Full Stack and User Profile\n",
    "description: CRUD backend and frontend, Authentication\n",
    "type: hacks\n",
    "courses: { compsci: {week: 19} }\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# CRUD\n",
    "\n",
    "## What is CRUD?\n",
    "\n",
    "CRUD stands for:\n",
    "\n",
    "C-reate: Involves the creation of addition of data to a database. In essence, it \"create\"s entries in databases.\n",
    "\n",
    "R-ead: Involves the retrieval, querying, or \"read\"ing of existing data from a database.\n",
    "\n",
    "U-pdate: Involves the modification or \"update\"ing of existing data in a database. Operation of changing the values of specific fields in a system. \n",
    "\n",
    "D-elete: Involves the removal or \"delete\"ion of existing data from a database. It's the operation of eliminating information from a database.\n",
    "\n",
    "In the past, each function has had its own link to fetch from, but with CRUD all four functions will be under one link, differentiated by the request type most suited for it.\n",
    "Create: POST request, as create operation needs to sent data back to the backend, best suited by post request\n",
    "Read: GET request, as read operation is simple and requires no data to be sent back\n",
    "Update: PUT request, as update requires the user ID of the user being updated, and this can be modified in the URL which PUT requests allow\n",
    "Delete: DELETE request, self explanatory\n",
    "This is simpler and makes fetching less confusing, as everything is done under one link. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Authentication\n",
    "- How users will authenticate to be able to access function that require a token\n",
    "- POST request is sent to backend\n",
    "    - payload contains user ID and password\n",
    "- Backend compares user ID and password, and returns with token if successful\n",
    "- Note that authentication and authorization are two different things\n",
    "    - Authentication is identifying who you are, client saying hi to backend\n",
    "    - Authorization is getting permission to view something, website letting client know that they can view something\n",
    "\n",
    "#### Frontend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "function login_user(){\n",
    "    // Set Authenticate endpoint\n",
    "    const url = 'http://127.0.0.1:8086/api/users/authenticate';\n",
    "\n",
    "    // Set the body of the request to include login data from the DOM\n",
    "    const body = {\n",
    "        uid: document.getElementById(\"uid\").value,\n",
    "        password: document.getElementById(\"password\").value,\n",
    "    };\n",
    "\n",
    "    // Change options according to Authentication requirements\n",
    "    const authOptions = {\n",
    "        mode: 'cors', // no-cors, *cors, same-origin\n",
    "        credentials: 'include', // include, same-origin, omit\n",
    "        headers: {\n",
    "            'Content-Type': 'application/json',\n",
    "        },\n",
    "        method: 'POST', // Override the method property\n",
    "        cache: 'no-cache', // Set the cache property\n",
    "        body: JSON.stringify(body)\n",
    "    };\n",
    "\n",
    "    // Fetch JWT\n",
    "    fetch(url, authOptions)\n",
    "    .then(response => {\n",
    "        // handle error response from Web API\n",
    "        if (!response.ok) {\n",
    "            const errorMsg = 'Login error: ' + response.status;\n",
    "            console.log(errorMsg);\n",
    "            alert(\"Failed Authentication: Credentials Incorrect\")\n",
    "            return;\n",
    "        }\n",
    "        // Success!!!\n",
    "        // Redirect to the database page\n",
    "        window.location.href = \"/csp-blog//log/2024/01/30/Users.html\";\n",
    "    })\n",
    "    // catch fetch errors (ie ACCESS to server blocked)\n",
    "    .catch(err => {\n",
    "        console.error(err);\n",
    "    });\n",
    "}\n",
    "\n",
    "// Attach login_user to the window object, allowing access to form action\n",
    "window.login_user = login_user;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Backend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from werkzeug.security import generate_password_hash, check_password_hash\n",
    "# update password, this is conventional setter\n",
    "def set_password(self, password):\n",
    "    \"\"\"Create a hashed password.\"\"\"\n",
    "    self._password = generate_password_hash(password, \"pbkdf2:sha256\", salt_length=10)\n",
    "\n",
    "# check password parameter versus stored/encrypted password\n",
    "def is_password(self, password):\n",
    "    \"\"\"Check against hashed password.\"\"\"\n",
    "    result = check_password_hash(self._password, password)\n",
    "    return result"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def post(self):\n",
    "            try:\n",
    "                body = request.get_json()\n",
    "                if not body:\n",
    "                    return {\n",
    "                        \"message\": \"Please provide user details\",\n",
    "                        \"data\": None,\n",
    "                        \"error\": \"Bad request\"\n",
    "                    }, 400\n",
    "                ''' Get Data '''\n",
    "                uid = body.get('uid')\n",
    "                if uid is None:\n",
    "                    return {'message': f'User ID is missing'}, 400\n",
    "                password = body.get('password')\n",
    "                \n",
    "                ''' Find user '''\n",
    "                user = User.query.filter_by(_uid=uid).first()\n",
    "                if user is None or not user.is_password(password):\n",
    "                    return {'message': f\"Invalid user id or password\"}, 400\n",
    "                if user:\n",
    "                    try:\n",
    "                        token = jwt.encode(\n",
    "                            {\"_uid\": user._uid},\n",
    "                            current_app.config[\"SECRET_KEY\"],\n",
    "                            algorithm=\"HS256\"\n",
    "                        )\n",
    "                        resp = Response(\"Authentication for %s successful\" % (user._uid))\n",
    "                        resp.set_cookie(\"jwt\", token,\n",
    "                                max_age=3600,\n",
    "                                secure=True,\n",
    "                                httponly=False,\n",
    "                                path='/',\n",
    "                                samesite='None'  # This is the key part for cross-site requests\n",
    "\n",
    "                                # domain=\"frontend.com\"\n",
    "                                )\n",
    "                        return resp\n",
    "                    except Exception as e:\n",
    "                        return {\n",
    "                            \"error\": \"Something went wrong\",\n",
    "                            \"message\": str(e)\n",
    "                        }, 500\n",
    "                return {\n",
    "                    \"message\": \"Error fetching auth token!\",\n",
    "                    \"data\": None,\n",
    "                    \"error\": \"Unauthorized\"\n",
    "                }, 404\n",
    "            except Exception as e:\n",
    "                return {\n",
    "                        \"message\": \"Something went wrong!\",\n",
    "                        \"error\": str(e),\n",
    "                        \"data\": None\n",
    "                }, 500\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create\n",
    "#### Frontend\n",
    "The code below uses user entered data from a form, and sends a POST request to the backend with the user entered data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "import { uri, options } from '{{site.baseurl}}/assets/js/api/config.js';\n",
    "//\n",
    "//    const url = uri + '/api/users/authenticate';\n",
    "//    const body = {\n",
    "//            // name: document.getElementById(\"name\").value,\n",
    "//            uid: \"toby\",\n",
    "//            password: \"123toby\"\n",
    "//            // dob: document.getElementById(\"dob\").value\n",
    "//        };\n",
    "//    const authOptions = {\n",
    "//            ...options, // This will copy all properties from options\n",
    "//            method: 'POST', // Override the method property\n",
    "//            cache: 'no-cache', // Set the cache property\n",
    "//            body: JSON.stringify(body)//       };\n",
    "//    fetch(url, authOptions)\n",
    "    function login_user(){\n",
    "        // Set Authenticate endpoint\n",
    "        const url = uri + '/api/users/';\n",
    "\n",
    "        // Set the body of the request to include login data from the DOM\n",
    "        const body = {\n",
    "            name: document.getElementById(\"name\").value,\n",
    "            uid: document.getElementById(\"uid\").value,\n",
    "            password: document.getElementById(\"password\").value,\n",
    "            dob: document.getElementById(\"dob\").value\n",
    "        };\n",
    "\n",
    "        // Change options according to Authentication requirements\n",
    "        const authOptions = {\n",
    "            ...options, // This will copy all properties from options\n",
    "            method: 'POST', // Override the method property\n",
    "            cache: 'no-cache', // Set the cache property\n",
    "            body: JSON.stringify(body)\n",
    "        };\n",
    "\n",
    "        // Fetch JWT\n",
    "        fetch(url, authOptions)\n",
    "        .then(response => {\n",
    "            // handle error response from Web API\n",
    "            if (!response.ok) {\n",
    "                const errorMsg = 'Login error: ' + response.status;\n",
    "                console.log(errorMsg);\n",
    "                return;\n",
    "            }\n",
    "            // Success!!!\n",
    "            // Redirect to the database page\n",
    "            window.location.href = \"{{site.baseurl}}/data/database\";\n",
    "        })\n",
    "        // catch fetch errors (ie ACCESS to server blocked)\n",
    "        .catch(err => {\n",
    "            console.error(err);\n",
    "        });\n",
    "    }\n",
    "\n",
    "    // Attach login_user to the window object, allowing access to form action\n",
    "    window.login_user = login_user;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Backend\n",
    "The backend then takes the user data, and adds a new user to the database, given that the code is input properly. Note the lack of token required, as this is the create method and shouldn't need authentication."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def post(self, current_user): # Create method\n",
    "            ''' Read data for json body '''\n",
    "            body = request.get_json()\n",
    "            \n",
    "            ''' Avoid garbage in, error checking '''\n",
    "            # validate name\n",
    "            name = body.get('name')\n",
    "            if name is None or len(name) < 2:\n",
    "                return {'message': f'Name is missing, or is less than 2 characters'}, 400\n",
    "            # validate uid\n",
    "            uid = body.get('uid')\n",
    "            if uid is None or len(uid) < 2:\n",
    "                return {'message': f'User ID is missing, or is less than 2 characters'}, 400\n",
    "            # look for password\n",
    "            password = body.get('password')\n",
    "\n",
    "            active_classes = body.get('active_classes')\n",
    "            if active_classes is None or len(active_classes) == 0:\n",
    "                return {'message': 'Active class is missing'}, 400\n",
    "\n",
    "            archived_classes = body.get('archived_classes')\n",
    "\n",
    "            ''' #1: Key code block, setup USER OBJECT '''\n",
    "            uo = User(name=name, \n",
    "                      uid=uid,\n",
    "                      active_classes=active_classes,\n",
    "                      archived_classes=archived_classes)\n",
    "            \n",
    "            ''' Additional garbage error checking '''\n",
    "            # set password if provided\n",
    "            if password is not None:\n",
    "                uo.set_password(password)\n",
    "            # set server request status    \n",
    "            \n",
    "            ''' #2: Key Code block to add user to database '''\n",
    "            # create user in database\n",
    "            user = uo.create()\n",
    "            # success returns json of user\n",
    "            if user:\n",
    "                return jsonify(user.read())\n",
    "            # failure returns error\n",
    "            return {'message': f'Processed {name}, either a format error or User ID {uid} is duplicate'}, 400"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "    def create(self):\n",
    "        try:\n",
    "            # creates a person object from User(db.Model) class, passes initializers\n",
    "            db.session.add(self)  # add prepares to persist person object to Users table\n",
    "            db.session.commit()  # SqlAlchemy \"unit of work pattern\" requires a manual commit\n",
    "            return self\n",
    "        except IntegrityError:\n",
    "            db.session.remove()\n",
    "            return None"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Read\n",
    "#### Frontend\n",
    "This example read code sends a GET request to the backend. Note that read doesn't necessarily mean returning the entire database, but simply reading already existing information from the database. Note that the javaScript below creates a table with the retrieved information but other things can be done with it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "// uri variable and options object are obtained from config.js\n",
    "  import { uri, options } from '/teacher_portfolio/assets/js/api/config.js';\n",
    "\n",
    "  // Set Users endpoint (list of users)\n",
    "  const url = uri + '/api/users/';\n",
    "\n",
    "  // prepare HTML result container for new output\n",
    "  const resultContainer = document.getElementById(\"result\");\n",
    "\n",
    "  // fetch the API\n",
    "  fetch(url, options)\n",
    "    // response is a RESTful \"promise\" on any successful fetch\n",
    "    .then(response => {\n",
    "      // check for response errors and display\n",
    "      if (response.status !== 200) {\n",
    "          const errorMsg = 'Database response error: ' + response.status;\n",
    "          console.log(errorMsg);\n",
    "          const tr = document.createElement(\"tr\");\n",
    "          const td = document.createElement(\"td\");\n",
    "          td.innerHTML = errorMsg;\n",
    "          tr.appendChild(td);\n",
    "          resultContainer.appendChild(tr);\n",
    "          return;\n",
    "      }\n",
    "      // valid response will contain JSON data\n",
    "      response.json().then(data => {\n",
    "          console.log(data);\n",
    "          for (const row of data) {\n",
    "            // tr and td build out for each row\n",
    "            const tr = document.createElement(\"tr\");\n",
    "            const name = document.createElement(\"td\");\n",
    "            const id = document.createElement(\"td\");\n",
    "            const age = document.createElement(\"td\");\n",
    "            // data is specific to the API\n",
    "            name.innerHTML = row.name; \n",
    "            id.innerHTML = row.uid; \n",
    "            age.innerHTML = row.age; \n",
    "            // this builds td's into tr\n",
    "            tr.appendChild(name);\n",
    "            tr.appendChild(id);\n",
    "            tr.appendChild(age);\n",
    "            // append the row to table\n",
    "            resultContainer.appendChild(tr);\n",
    "          }\n",
    "      })\n",
    "  })\n",
    "  // catch fetch errors (ie ACCESS to server blocked)\n",
    "  .catch(err => {\n",
    "    console.error(err);\n",
    "    const tr = document.createElement(\"tr\");\n",
    "    const td = document.createElement(\"td\");\n",
    "    td.innerHTML = err + \": \" + url;\n",
    "    tr.appendChild(td);\n",
    "    resultContainer.appendChild(tr);\n",
    "  });"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Backend\n",
    "The below code returns all users from the database in as JSON when fetched."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "@token_required\n",
    "def get(self, current_user): # Read Method\n",
    "    users = User.query.all()    # read/extract all users from database\n",
    "    json_ready = [user.read() for user in users]  # prepare output in json\n",
    "    return jsonify(json_ready)  # jsonify creates Flask response object, more specific to APIs than json.dumps"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Put\n",
    "#### Frontend\n",
    "The following code sends a put request to backend to update a user based on the user's UID."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "function update_user(){\n",
    "      if (document.getElementById(\"password\").value != document.getElementById(\"confirmpassword\").value) {\n",
    "        alert(\"Error: Passwords do not match.\");\n",
    "        return;\n",
    "      }\n",
    "      const body = {\n",
    "        uid: document.getElementById(\"uid\").value,\n",
    "        password: document.getElementById(\"password\").value,\n",
    "        name: document.getElementById(\"name\").value,\n",
    "      };\n",
    "      const AuthOptions = {\n",
    "                  mode: 'cors', // no-cors, *cors, same-origin\n",
    "                  credentials: 'include', // include, same-origin, omit\n",
    "                  headers: {\n",
    "                      'Content-Type': 'application/json',\n",
    "                  },\n",
    "                  method: 'PUT', // Override the method property\n",
    "                  cache: 'no-cache', // Set the cache property\n",
    "                  body: JSON.stringify(body)\n",
    "              };\n",
    "        // fetch the API\n",
    "        fetch(url, AuthOptions)\n",
    "          // response is a RESTful \"promise\" on any successful fetch\n",
    "          .then(response => {\n",
    "            // check for response errors and display\n",
    "            if (response.status !== 200) {\n",
    "                window.location.href = \"/csp-blog/403.html\";\n",
    "            }\n",
    "            // valid response will contain JSON data\n",
    "            response.json().then(data => {\n",
    "              // insert whatever code you want here\n",
    "            })\n",
    "        })\n",
    "        // catch fetch errors (ie ACCESS to server blocked)\n",
    "        .catch(err => {\n",
    "          console.log(err)\n",
    "        });\n",
    "    }\n",
    "    // Attach login_user to the window object, allowing access to form action\n",
    "    window.update_user = update_user;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Backend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "@token_required\n",
    "def put(self, current_user):\n",
    "    body = request.get_json() # get the body of the request\n",
    "    uid = body.get('uid') # get the UID (Know what to reference)\n",
    "    name = body.get('name') # get name (to change)\n",
    "    password = body.get('password') # get password (to change)\n",
    "    users = User.query.all() # get users\n",
    "    for user in users:\n",
    "        if user.uid == uid: # find user with matching uid\n",
    "            user.update(name,'',password) # update info\n",
    "    return f\"{user.read()} Updated\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Delete\n",
    "#### Frontend\n",
    "Similarly to put, this code removes the appropriate user from the database"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "function delete_user(){\n",
    "    const body = {\n",
    "      uid: document.getElementById(\"duid\").value,\n",
    "    };\n",
    "    const AuthOptions = {\n",
    "                mode: 'cors', // no-cors, *cors, same-origin\n",
    "                credentials: 'include', // include, same-origin, omit\n",
    "                headers: {\n",
    "                    'Content-Type': 'application/json',\n",
    "                },\n",
    "                method: 'DELETE', // Override the method property\n",
    "                cache: 'no-cache', // Set the cache property\n",
    "                body: JSON.stringify(body) // delete if using backend code that fetches directly from the cookie\n",
    "            };\n",
    "      // fetch the API\n",
    "      fetch(url, AuthOptions)\n",
    "        // response is a RESTful \"promise\" on any successful fetch\n",
    "        .then(response => {\n",
    "          // check for response errors and display\n",
    "          if (response.status !== 200) {\n",
    "              window.location.href = \"/csp-blog/403.html\";\n",
    "          }\n",
    "          // valid response will contain JSON data\n",
    "          response.json().then(data => {\n",
    "            window.location.href = \"/csp-blog//log/2024/01/30/Users.html\";\n",
    "          })\n",
    "      })\n",
    "      // catch fetch errors (ie ACCESS to server blocked)\n",
    "      .catch(err => {\n",
    "        console.log(err)\n",
    "      });\n",
    "  }\n",
    "  window.delete_user = delete_user;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Backend"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Mr.Mortensen Version"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def delete(self, id):  # Delete method\n",
    "#Find user by ID \n",
    "user = User.query.get(id)\n",
    "if user is None:\n",
    "    return {'message': f'User with ID {id} not found'}, 404\n",
    "\n",
    "''' Delete user '''\n",
    "user.delete()\n",
    "return {'message': f'User with ID {id} has been deleted'}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Ian's Version"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "@token_required\n",
    "def delete(self, current_user):\n",
    "    body = request.get_json()\n",
    "    uid = body.get('uid')\n",
    "    users = User.query.all()\n",
    "    for user in users:\n",
    "        if user.uid == uid:\n",
    "            user.delete()\n",
    "    return jsonify(user.read())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Tarun's Version"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "@token_required\n",
    "def delete(self, current_user):\n",
    "    token = request.cookies.get(\"jwt\")\n",
    "    cur_user= data=jwt.decode(token, current_app.config[\"SECRET_KEY\"], algorithms=[\"HS256\"])['_uid']\n",
    "    users = User.query.all()\n",
    "    for user in users:\n",
    "        if user.uid == uid and user.id==cur_user: # modified with the and user.id==cur_user so random users can't delete other ppl\n",
    "            user.delete()\n",
    "        elif(user.uid == uid):\n",
    "            print(cur_user,\" tried to delete someone who they are not\")\n",
    "            return \n",
    "    return jsonify(user.read())"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}