Completed create event step

Author: jasonjoh

demo/graph-tutorial/graph.js

@@ -36,6 +36,47 @@ module.exports = {
     return events;
   },
   // </GetCalendarViewSnippet>
+
+  // <CreateEventSnippet>
+  createEvent: async function(accessToken, formData, timeZone) {
+    const client = getAuthenticatedClient(accessToken);
+
+    // Build a Graph event
+    const newEvent = {
+      subject: formData.subject,
+      start: {
+        dateTime: formData.start,
+        timeZone: timeZone
+      },
+      end: {
+        dateTime: formData.end,
+        timeZone: timeZone
+      },
+      body: {
+        contentType: 'text',
+        content: formData.body
+      }
+    };
+
+    // Add attendees if present
+    if (formData.attendees) {
+      newEvent.attendees = [];
+      formData.attendees.forEach(attendee => {
+        newEvent.attendees.push({
+          type: 'required',
+          emailAddress: {
+            address: attendee
+          }
+        });
+      });
+    }
+
+    // POST /me/events
+    await client
+      .api('/me/events')
+      .post(newEvent);
+  }
+  // </CreateEventSnippet>
 };
 
 function getAuthenticatedClient(accessToken) {

demo/graph-tutorial/package-lock.json

@@ -15,6 +15,7 @@
     "express": "^4.17.1",
     "express-promise-router": "^4.0.1",
     "express-session": "^1.17.1",
+    "express-validator": "^6.6.1",
     "hbs": "^4.1.1",
     "http-errors": "^1.8.0",
     "isomorphic-fetch": "^2.2.1",

demo/graph-tutorial/package.json

@@ -5,9 +5,11 @@ const router = require('express-promise-router')();
 const graph = require('../graph.js');
 const moment = require('moment-timezone');
 const iana = require('windows-iana');
+const { body, validationResult } = require('express-validator');
+const validator = require('validator');
 
-/* GET /calendar */
 // <GetRouteSnippet>
+/* GET /calendar */
 router.get('/',
   async function(req, res) {
     if (!req.session.userId) {
@@ -73,6 +75,108 @@ router.get('/',
 );
 // </GetRouteSnippet>
 
+// <GetEventFormSnippet>
+/* GET /calendar/new */
+router.get('/new',
+  function(req, res) {
+    if (!req.session.userId) {
+      // Redirect unauthenticated requests to home page
+      res.redirect('/')
+    } else {
+      res.locals.newEvent = {};
+      res.render('newevent');
+    }
+  }
+);
+// </GetEventFormSnippet>
+
+// <PostEventFormSnippet>
+/* POST /calendar/new */
+router.post('/new', [
+    body('ev-subject').escape(),
+    // Custom sanitizer converts ;-delimited string
+    // to an array of strings
+    body('ev-attendees').customSanitizer(value => {
+      return value.split(';');
+    // Custom validator to make sure each
+    // entry is an email address
+    }).custom(value => {
+      value.forEach(element => {
+        if (!validator.isEmail(element)) {
+          throw new Error('Invalid email address');
+        }
+      });
+
+      return true;
+    }),
+    // Ensure start and end are ISO 8601 date-time values
+    body('ev-start').isISO8601(),
+    body('ev-end').isISO8601(),
+    body('ev-body').escape()
+  ], async function(req, res) {
+    if (!req.session.userId) {
+      // Redirect unauthenticated requests to home page
+      res.redirect('/')
+    } else {
+      // Build an object from the form values
+      const formData = {
+        subject: req.body['ev-subject'],
+        attendees: req.body['ev-attendees'],
+        start: req.body['ev-start'],
+        end: req.body['ev-end'],
+        body: req.body['ev-body']
+      };
+
+      // Check if there are any errors with the form values
+      const formErrors = validationResult(req);
+      if (!formErrors.isEmpty()) {
+
+        let invalidFields = '';
+        formErrors.errors.forEach(error => {
+          invalidFields += `${error.param.slice(3, error.param.length)},`
+        });
+
+        // Preserve the user's input when re-rendering the form
+        // Convert the attendees array back to a string
+        formData.attendees = formData.attendees.join(';');
+        return res.render('newevent', {
+          newEvent: formData,
+          error: [{ message: `Invalid input in the following fields: ${invalidFields}` }]
+        });
+      }
+
+      // Get the access token
+      var accessToken;
+      try {
+        accessToken = await getAccessToken(req.session.userId, req.app.locals.msalClient);
+      } catch (err) {
+        req.flash('error_msg', {
+          message: 'Could not get access token. Try signing out and signing in again.',
+          debug: JSON.stringify(err, Object.getOwnPropertyNames(err))
+        });
+        return;
+      }
+
+      // Get the user
+      const user = req.app.locals.users[req.session.userId];
+
+      // Create the event
+      try {
+        await graph.createEvent(accessToken, formData, user.timeZone);
+      } catch (error) {
+        req.flash('error_msg', {
+          message: 'Could not create event',
+          debug: JSON.stringify(error, Object.getOwnPropertyNames(error))
+        });
+      }
+
+      // Redirect back to the calendar view
+      return res.redirect('/calendar');
+    }
+  }
+);
+// </PostEventFormSnippet>
+
 async function getAccessToken(userId, msalClient) {
   // Look up the user's account in the cache
   const accounts = msalClient

demo/graph-tutorial/routes/calendar.js

@@ -0,0 +1,35 @@
+<!-- Copyright (c) Microsoft Corporation.
+     Licensed under the MIT License. -->
+
+<!-- <NewEventFormSnippet> -->
+<form method="POST">
+  <div class="form-group">
+    <label>Subject</label>
+    <input class="form-control" name="ev-subject" type="text" value="{{ newEvent.subject }}">
+  </div>
+  <div class="form-group">
+    <label>Attendees</label>
+    <input class="form-control" name="ev-attendees" type="text" value="{{ newEvent.attendees }}">
+  </div>
+  <div class="form-row">
+    <div class="col">
+      <div class="form-group">
+        <label>Start</label>
+        <input class="form-control" name="ev-start" type="datetime-local" value="{{ newEvent.start }}">
+      </div>
+    </div>
+    <div class="col">
+      <div class="form-group">
+        <label>End</label>
+        <input class="form-control" name="ev-end" type="datetime-local" value="{{ newEvent.end }}">
+      </div>
+    </div>
+  </div>
+  <div class="form-group mb-3">
+    <label>Body</label>
+    <textarea class="form-control" name="ev-body" rows="3">{{ newEvent.body }}</textarea>
+  </div>
+  <input class="btn btn-primary mr-2" type="submit" value="Create" />
+  <a class="btn btn-secondary" href="/calendar">Cancel</a>
+</form>
+<!-- </NewEventFormSnippet> -->

demo/graph-tutorial/views/newevent.hbs

@@ -46,6 +46,7 @@ Before moving on, install some additional packages that you will use later:
 - [connect-flash](https://github.com/jaredhanson/connect-flash) to flash error messages in the app.
 - [express-session](https://github.com/expressjs/session) to store values in an in-memory server-side session.
 - [express-promise-router](https://github.com/express-promise-router/express-promise-router) to allow route handlers to return a Promise.
+- [express-validator](https://github.com/express-validator/express-validator) for parsing and validating form data.
 - [msal-node](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-node) for authenticating and getting access tokens.
 - [uuid](https://github.com/uuidjs/uuid) used by msal-node to generate GUIDs.
 - [microsoft-graph-client](https://github.com/microsoftgraph/msgraph-sdk-javascript) for making calls to Microsoft Graph.
@@ -55,7 +56,7 @@ Before moving on, install some additional packages that you will use later:
 
     ```Shell
     npm install dotenv@8.2.0 moment@2.28.0 moment-timezone@0.5.31 connect-flash@0.1.1 express-session@1.17.1 isomorphic-fetch@2.2.1
-    npm install @azure/msal-node@1.0.0-alpha.5 @microsoft/microsoft-graph-client@2.0.0 windows-iana@4.2.1
+    npm install @azure/msal-node@1.0.0-alpha.5 @microsoft/microsoft-graph-client@2.0.0 windows-iana@4.2.1 express-validator@6.6.1
     ```
 
     > [!TIP]

tutorial/02-create-app.md

@@ -0,0 +1,33 @@
+<!-- markdownlint-disable MD002 MD041 -->
+
+In this section you will add the ability to create events on the user's calendar.
+
+## Create a new event form
+
+1. Create a new file in the **./views** directory named **newevent.hbs** and add the following code.
+
+    :::code language="html" source="../demo/graph-tutorial/views/newevent.hbs" id="NewEventFormSnippet":::
+
+1. Add the following code to the **./routes/calendar.js** file before the `module.exports = router;` line.
+
+    :::code language="javascript" source="../demo/graph-tutorial/routes/calendar.js" id="GetEventFormSnippet":::
+
+This implements a form for user input and renders it.
+
+## Create the event
+
+1. Open **./graph.js** and add the following function inside `module.exports`.
+
+    :::code language="javascript" source="../demo/graph-tutorial/graph.js" id="CreateEventSnippet":::
+
+    This code uses the form fields to create a Graph event object, then sends a POST request to the `/me/events` endpoint to create the event on the user's default calendar.
+
+1. Add the following code to the **./routes/calendar.js** file before the `module.exports = router;` line.
+
+    :::code language="javascript" source="../demo/graph-tutorial/routes/calendar.js" id="PostEventFormSnippet":::
+
+    This code validates and sanitized the form input, then calls `graph.createEvent` to create the event. It redirects back to the calendar view after the call completes.
+
+1. Save your changes and restart the app. Click the **Calendar** nav item, then click the **Create event** button. Fill in the values and click **Create**. The app returns to the calendar view once the new event is created.
+
+    ![A screenshot of the new event form](images/create-event-01.png)