diff --git a/tiddlers/content/labs/lab08/$__Labs_08_Customer Account Input Validation.md b/tiddlers/content/labs/lab08/$__Labs_08_Customer Account Input Validation.md deleted file mode 100644 index 10ae217..0000000 --- a/tiddlers/content/labs/lab08/$__Labs_08_Customer Account Input Validation.md +++ /dev/null @@ -1,11 +0,0 @@ -Client-side input validation is fairly simple. Add an attribute called `required` to the form input tags (as shown in step 8 of the <>. It has no value --- just put the word `required` in the tag definition. - -For the email input, use `type="email"` as an attribute. - -For the password input, use `type="password"` as an attribute. This does not add any validation, but it does mask the user input. - -Add appropriate validation to the customer account form components. All of the fields are important, so all should be required. - -Save, reload, and test. You should not be allowed to leave fields empty now. - -Server-side customer validation (as done in lab 6 using the OVal framework) is a bonus task. \ No newline at end of file diff --git a/tiddlers/content/labs/lab08/$__Labs_08_Customer Account Input Validation.md.meta b/tiddlers/content/labs/lab08/$__Labs_08_Customer Account Input Validation.md.meta deleted file mode 100644 index b8515cd..0000000 --- a/tiddlers/content/labs/lab08/$__Labs_08_Customer Account Input Validation.md.meta +++ /dev/null @@ -1,4 +0,0 @@ -section: 9 -tags: lab08 lab incomplete hidden -title: $:/Labs/08/Customer Account Input Validation -type: text/x-markdown \ No newline at end of file diff --git a/tiddlers/content/labs/lab08/$__Labs_08_Customer Sign In.md b/tiddlers/content/labs/lab08/$__Labs_08_Customer Sign In.md deleted file mode 100644 index 1578227..0000000 --- a/tiddlers/content/labs/lab08/$__Labs_08_Customer Sign In.md +++ /dev/null @@ -1,64 +0,0 @@ -The following happens in the sign in page that you created as part of last week's project tasks. - - 1. Add the `script` tags to the page. We can reuse the existing `customer.js` file for the sign in operation. - - 2. We need a message placeholder that we can use to give the user some feedback relating to their sign in attempts. - - Add a `

` tag above the form. The message will come from the controller: - - ```html -

{{signInMessage}}

- ``` - -3. Set the default message as a model in the `data` section: - - ```javascript - signInMessage: "Please sign in to continue." - ``` - - Don't forget to put a comma at the end of the previous model. - -3. Add a `signIn` function to the `methods` section. It doesn't need to take any parameters since we will be reusing the existing `customer` model. - -3. Add an alert to the function to check that we have access to the username and password that the user has entered. As mentioned, we are going to be reusing the existing `customer` model, so the code looks like: - - ```javascript - alert("Sign In " + this.customer.username + ", " + this.customer.password); - ``` - -4. Back in the HTML page, set the `v-model` attributes for the `input` tags to `customer.username` and `customer.password`. - -4. Register the `signIn` function as the form's submit handler: - - ```javascript - @submit.prevent="signIn()" - ``` - -4. Save, reload, and test. You should see the alert with the username and password. - -5. Add another URI variable near the top of the file for the GET customer operation. It should point at `/api/customers/{username}`. Since there is a path parameter, you will need to use a *template literal* as shown in <>. - -6. Complete the `signIn` function: - - ```javascript - axios.get(customerApi({'username': this.customer.username})) - .then(response => { - this.customer = response.data; - window.location = 'products.html'; - }) - .catch(error => { - this.signInMessage = 'Sign in failed. Check your username and password and try again.'; - }); - ``` - - Where `customerApi` is the name of the template literal that you added in the previous step. - - If there is an error then we can assume that the user entered the incorrect credentials, so we change the `signInMessage` to reflect that. - - <> The error will only trigger if you have explicitly added code to your `CustomerModle` that returns a `404 / Not Found` error if the user enters a bad username (which you should do). See the reference section <> for details. - - 8. Save, reload, and test. - - You should now be able to create a new account, and then sign in with the new details. - -Note that the password is **not** currently being checked. Full authentication is a bonus task. We will give you some more details on how to do this in the reference document soon. Note that we want pretty much all requests to be authenticated, so we can't just add a simple check to the `signIn` function for this, not to mention that it would take an attacker 10 seconds to defeat that check. \ No newline at end of file diff --git a/tiddlers/content/labs/lab08/$__Labs_08_Customer Sign In.md.meta b/tiddlers/content/labs/lab08/$__Labs_08_Customer Sign In.md.meta deleted file mode 100644 index 273e750..0000000 --- a/tiddlers/content/labs/lab08/$__Labs_08_Customer Sign In.md.meta +++ /dev/null @@ -1,4 +0,0 @@ -section: 10 -tags: lab08 lab incomplete hidden -title: $:/Labs/08/Customer Sign In -type: text/x-markdown \ No newline at end of file diff --git a/tiddlers/content/labs/lab08/$__Labs_08_Displaying the Majors.md b/tiddlers/content/labs/lab08/$__Labs_08_Displaying the Majors.md deleted file mode 100644 index 12adb59..0000000 --- a/tiddlers/content/labs/lab08/$__Labs_08_Displaying the Majors.md +++ /dev/null @@ -1,34 +0,0 @@ -We need to get the majprs to appear in the page so that the user can click a category to filter the products. We can add this to the same component, so the following code can go in the `products-list.js` file. - - 1. Add another variable near the top of the file that holds the path for the GET categories operation: - - ```javascript - var categoriesApi = '/api/categories'; - ``` - - 2. Add a model object to `data` that will hold the list of catgories: - - ```javascript - products: new Array(), - categories: new Array() - ``` - - We included the existing `products` model to show you that you need to use commas to separate the models. Don't just blindly copy and paste this code --- modify your existing code to match. - -4. Add another function to `methods` that will get the categories. Copy the existing `getAllProducts` function and adapt it to suit. Make sure that you add a comma to the end of the previous function since commas are used here to separate the functions. - -5. Add another call to `mounted` that calls the new function to load the categories when the page loads. - - 4. Back in the products page, find the HTML that adds the categories to the page. Modify the first item (whether it is a button or link) as follows: - - ```html - - ``` - - If you used links instead of buttons, then this would be the same but using `` tags instead of ` + ``` + + If you used links instead of buttons, then this would be the same but using `` tags instead of `