search

John-sCC / jcc_frontend

Apache License 2.0
0 stars 0 forks source link

Frontend Cookie Implementation in Dashboard and ClassPeriod Creation (3/14-3/17) #60

Closed drewreed2005 closed 6 months ago

drewreed2005 commented 6 months ago

Runtime

Video Demonstration

Click here to see cookie implementation with sign-in, dashboard and class period creation (shown to persist and properly redirect in video).

Functionality

Dashboard

The dashboard page utilizes the new dashboard-specific backend ClassPeriod method:

    fetch(deployed + '/api/class_period/dashboard', {
            method: 'GET',
            mode: 'cors', // no-cors, *cors, same-origin
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'include', // include, *same-origin, omit
            headers: {
                "content-type": "application/json",
            },
        })
        // skipping existing content for new catch error
        .catch(error => {
            console.error('There was a problem with the fetch operation:', error);
            window.location.replace("{{site.baseurl}}/sign-in/");
        });

The new catch error functionality expects that, if data could not be found with the JWT-based request, the user has not logged in or, if logged in, has some problem with the login credentials, so it sends the user back to the sign-in screen.

Class Creation

The main change was removing the email line used for test creation, as the JWT is now used to identify the user. As seen in the code below, if credentials and info are proper, the user will be redirected to the class info page to edit it further (after future implementation).

fetch(deployed + new URLSearchParams(formData).toString(), {
      method: 'POST',
      mode: 'cors', // no-cors, *cors, same-origin
      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
      credentials: 'include', // include, *same-origin, omit
      headers: {
          "content-type": "application/json",
      },
    })
    .then(response => {
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    })
    .then(data => {
      console.log("Response:", data);
      var classId = data.id;
      window.location.href = '{{site.baseurl}}/leader-class-data?id=' + classId;
      return;
    })

Future Improvements