diff --git a/README.md b/README.md index c4db294a8d..7f50e3a3ed 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,8 @@ | | Sample Name | Description | C# | TypeScript | |:--:|:-------------------|:-------------------------------------------------------------------------------------------------|:--------|:-------------| |1|Connectors | Sample Office 365 Connector generating notifications to teams channel. |[View][connector#cs] |[View][connector#ts] -|2|Outgoing Webhooks | Samples to create "Custom Bots" to be used in Microsoft Teams. |[View][outgoing-webhook#cs]|[View][outgoing-webhook#ts] +|2|Generic connectors sample | Sample code for a generic connector that's easy to customize for any system which supports webhooks. | |[View][connector-generic#ts] +|3|Outgoing Webhooks | Samples to create "Custom Bots" to be used in Microsoft Teams. |[View][outgoing-webhook#cs]|[View][outgoing-webhook#ts] ## Samples with multiple entry points @@ -94,6 +95,7 @@ [connector#cs]:csharp/connector-todo-notification [connector#ts]:nodejs/connector-github-notification +[connector-generic#ts]:nodejs/connector-generic [app-auth#ts]:nodejs/app-auth diff --git a/nodejs/connector-generic/.gitignore b/nodejs/connector-generic/.gitignore new file mode 100644 index 0000000000..ad46b30886 --- /dev/null +++ b/nodejs/connector-generic/.gitignore @@ -0,0 +1,61 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next diff --git a/nodejs/connector-generic/LICENSE b/nodejs/connector-generic/LICENSE new file mode 100644 index 0000000000..21071075c2 --- /dev/null +++ b/nodejs/connector-generic/LICENSE @@ -0,0 +1,21 @@ + MIT License + + Copyright (c) Microsoft Corporation. All rights reserved. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE diff --git a/nodejs/connector-generic/README.md b/nodejs/connector-generic/README.md new file mode 100644 index 0000000000..01d0f91a77 --- /dev/null +++ b/nodejs/connector-generic/README.md @@ -0,0 +1,52 @@ +# Sample Connector +This contains the source for a generic connector that's easy to customize for any system which supports webhooks. + +## Prerequisites +To complete this tutorial, you need the following tools. If you don't already have them you can install them from these links. + +* [Git](https://git-scm.com/downloads) +* [Node.js and NPM](https://nodejs.org/) +* Get any text editor or IDE. You can install and use [Visual Studio Code](https://code.visualstudio.com/download) for free. +* An Office 365 account with access to Microsoft Teams, with [sideloading enabled](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading). +* If you want to run this code locally, use a tunnelling service. These instructions assume you are using [ngrok](https://ngrok.com/). + +### Configure your own connector + +1. Start the tunnelling service to get an https endpoint. + 1. Open a new command prompt window. + 1. Change to the directory that contains the ngrok.exe application. + 1. In the command prompt, run the command `ngrok http 3978 --host-header=localhost`. + 1. Ngrok will fill the entire prompt window. Make note of the https:// Forwarding URL. This URL will be your [BASE_URI] referenced below. + 1. Minimize the ngrok Command Prompt window. It is no longer referenced in these instructions, but it must remain running. +1. [Register a new connector](https://docs.microsoft.com/microsoftteams/platform/webhooks-and-connectors/how-to/connectors-creating#adding-a-connector-to-your-teams-app) + 1. Open [Connector Developer Portal](https://outlook.office.com/connectors/home/login/#/new) and select New Connector. + 1. Fill in all the basic details such as name, logo, descriptions etc. for the new connector. + 1. For the configuration page, you'll use our sample code's setup endpoint: `https://[BASE_URI]/connector/setup` + 1. For Valid domains, make enter your domain's http or https URL, e.g. XXXXXXXX.ngrok.io. + 1. Click on Save. After the save completes, you will see your connector ID in address bar. +1. In the `~/views/connectorconfig.jade` file line 27 and replace `ngrokURL` to the ngrok https forwarding url from the above. +1. Install all the dependencies by running `npm install` in root directory. +1. Run the sample: `node server.js` +1. Manifest updates: + 1. Replace `ConnectorId` field in `~/app manifest/manifest.json` file with your newly registered connector ID. + 1. Select all three files (manifest.json, outline_icon.png, color_icon.png) and create a zip file. This is your Teams App Manifest package. +1. Now you can [upload your app manifest](https://docs.microsoft.com/microsoftteams/platform/concepts/deploy-and-publish/apps-upload#upload-your-package-into-a-team-using-the-apps-tab) package in a team and test your new connector by following instructions in config UI. + +## More Information +For more information about getting started with Teams, please review the following resources: +- Review [Office 365 Connectors](https://docs.microsoft.com/microsoftteams/platform/webhooks-and-connectors/how-to/connectors-creating) +- Review [Understanding Teams app capabilities](https://docs.microsoft.com/microsoftteams/platform/concepts/capabilities-overview) + +## Contributing + +This project welcomes contributions and suggestions. Most contributions require you to agree to a +Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us +the rights to use your contribution. For details, visit https://cla.microsoft.com. + +When you submit a pull request, a CLA-bot will automatically determine whether you need to provide +a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions +provided by the bot. You will only need to do this once across all repos using our CLA. + +This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). +For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or +contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. diff --git a/nodejs/connector-generic/app manifest/color_icon.png b/nodejs/connector-generic/app manifest/color_icon.png new file mode 100644 index 0000000000..abb50f1d0c Binary files /dev/null and b/nodejs/connector-generic/app manifest/color_icon.png differ diff --git a/nodejs/connector-generic/app manifest/manifest.json b/nodejs/connector-generic/app manifest/manifest.json new file mode 100644 index 0000000000..86cc76c7df --- /dev/null +++ b/nodejs/connector-generic/app manifest/manifest.json @@ -0,0 +1,35 @@ +{ + "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json", + "manifestVersion": "1.8", + "id": "3ea203f0-07f0-46d2-8da3-4639b616cf37", + "version": "1.0", + "packageName": "com.NotifyMe", + "developer": { + "name": "Developer", + "websiteUrl": "https://www.microsoft.com", + "privacyUrl": "https://www.microsoft.com", + "termsOfUseUrl": "https://www.microsoft.com" + }, + "name": { + "full": "NotifyMe", + "short": "NotifyMe" + }, + "accentColor": "#FFFFFF", + "description": { + "full": "Sample to show how to configure a connector and send notifications inside teams", + "short": "Sample to show how connector works inside teams" + }, + "icons": { + "outline": "outline_icon.png", + "color": "color_icon.png" + }, + "connectors": [ + { + "connectorId": "3ea203f0-07f0-46d2-8da3-4639b616cf37", + "configurationUrl": "https://671872397d19.ngrok.io/connectorconfig", + "scopes": [ + "team" + ] + } + ] +} \ No newline at end of file diff --git a/nodejs/connector-generic/app manifest/outline_icon.png b/nodejs/connector-generic/app manifest/outline_icon.png new file mode 100644 index 0000000000..0474c90f21 Binary files /dev/null and b/nodejs/connector-generic/app manifest/outline_icon.png differ diff --git a/nodejs/connector-generic/package.json b/nodejs/connector-generic/package.json new file mode 100644 index 0000000000..f1d224fdb9 --- /dev/null +++ b/nodejs/connector-generic/package.json @@ -0,0 +1,21 @@ +{ + "name": "connectersample", + "version": "1.0.0", + "main": "app.js", + "dependencies": { + "async": "^2.3.0", + "body-parser": "^1.17.1", + "config": "^1.26.1", + "cookie-parser": "^1.4.3", + "express": "^4.15.2", + "express-partials": "^0.3.0", + "express-session": "^1.15.2", + "jade": "^1.11.0", + "jquery": "^3.2.1", + "method-override": "^2.3.8", + "passport": "^0.3.2" + }, + "author": "", + "license": "ISC", + "description": "" +} diff --git a/nodejs/connector-generic/public/custom/assets/config.PNG b/nodejs/connector-generic/public/custom/assets/config.PNG new file mode 100644 index 0000000000..0cf936dd0d Binary files /dev/null and b/nodejs/connector-generic/public/custom/assets/config.PNG differ diff --git a/nodejs/connector-generic/public/custom/assets/login.PNG b/nodejs/connector-generic/public/custom/assets/login.PNG new file mode 100644 index 0000000000..70d6a3650c Binary files /dev/null and b/nodejs/connector-generic/public/custom/assets/login.PNG differ diff --git a/nodejs/connector-generic/public/custom/css/msteams-app.css b/nodejs/connector-generic/public/custom/css/msteams-app.css new file mode 100644 index 0000000000..7cae3c4765 --- /dev/null +++ b/nodejs/connector-generic/public/custom/css/msteams-app.css @@ -0,0 +1,619 @@ +@charset "UTF-8"; + +html { + font-size: 10px; +} +body { + font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important; + font-size: 1.4rem; + min-width: auto; +} +a { + color: #5558af; +} +a:hover, a:focus { + color: #5558af; + text-decoration: underline; + outline: none; +} +a:visited { + color: #5558af; +} +* { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; +} +/* Form controls */ +.settings-section { + margin: 0 0 0 0; + clear: both; + overflow: hidden; +} +.form-field-title:first-of-type { + margin-top: 0; +} +.form-field-title { + display: flex; + margin: .7rem 0 .3rem; +} +.form-control:focus { + border-bottom-color: #5558af; + box-shadow: none; + outline: 0; +} +.form-control { + background: #eef1f5; + border: 0 solid transparent; + border-bottom-width: .2rem; + border-radius: .3rem; + color: #16233a; + resize: none; + box-shadow: none; + display: block; + width: 100%; + padding: 6px 12px; + font-family: inherit; + font-size: 14px; + line-height: 1.4286; +} +input, textarea { + font-family: inherit; + width: 50% !important; +} + +/* Buttons and content */ +.ts-btn { + background: 0; + border: .2rem solid transparent; + border-radius: .3rem; + font-size: 1.4rem; + padding: .4rem 3.2rem; + height: 3.2rem; + min-width: 3.2rem; + white-space: nowrap; +} +.ts-btn:hover { + outline: 0; + text-decoration: none +} +.ts-btn-primary { + background: #5558af; + outline-style: none; + color: #fff +} +.ts-btn-primary:focus, +.ts-btn-primary:hover { + background: rgba(85, 88, 175, 0.8); + color: #fff; + cursor: pointer; +} +#page-choice-button-group { + float: right; +} +#webhook { + background: #eef1f5; + border: 0 solid transparent; + border-bottom-width: .2rem; + border-radius: .3rem; + color: #16233a; + width: 70%; + padding: 6px 12px; + margin-right: 15px; + font-family: inherit; + font-size: 14px; + line-height: 1.4286; +} +#repo-choice-button { + font-size: 1.4rem; + font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: #eef1f5; + color: black !important; + margin-bottom: 0; + text-align: left; + width : 258.5px; + height: 32px; + border: none; + box-shadow: none; +} +#page-choice-button { + font-size: 1.4rem; + font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: #eef1f5; + color: black !important; + margin-bottom: 0; + text-align: left; + width: 258.5px; + height: 32px; + border: none; + box-shadow: none; +} +.dropdown-menu { + width: 258.5px; + background-color: #eef1f5; + text-align: left; + border: none; + box-shadow: none; + margin-top: -1px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} +.dropdown-menu:active { + border-top-right-radius: 0px; + border-top-left-radius: 0px; +} +.dropdown-menu>li :hover { + background-color: rgba(85, 88, 175, 0.8) !important; + color: white !important; +} +.dropdown-menu>li>a { + line-height: 32px; + padding: 0px 12px; + font-size: 1.4rem; + color: #525C6D; + border: none; + box-shadow: none; +} +.content-section { + float: left; + height: 132px; + width: 536px; + overflow: hidden; + padding: none; +} +.content-border-top { + border-top : 2px solid #eef1f5; +} +.content-border-bottom { + border-bottom : 2px solid #eef1f5; +} +.list-border-rounded { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.list-border-flat { + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} +.content-container { + height: 128px; + overflow: hidden; + width: 536px; + padding-right: 0px; + background: #fff; +} +.content-container:hover { + overflow: auto; +} +.content-container::-webkit-scrollbar { + width: 10px; +} +.content-container::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: rgba(22,35,58,0.52) !important; +} +#repoList { + list-style-type: none; + padding-left: 0px; + width: 526px; +} +#NoRepoDiv { + padding-left: 12px; +} +.listitem { + color: #16233A; + line-height: 32px; + padding: 0px 4px; + font-size: 1.4rem; + cursor: pointer; +} +.listitem:hover { + background-color: rgba(85, 88, 175, 0.8) !important; + color: white !important; + cursor: pointer; +} +.highlight { + background-color: #3f487f !important; + color: #fff !important; +} + +/* Generic section styles */ +.section-caption { + color: #000; + font-size: 18Px; + font-display: bold; + margin: .5rem 0 .5rem 0; +} +.radio-section-caption { + font-size: 1.2rem; + margin: .5rem 0 .5rem 0; + color: black; +} + +/* Login area */ +.login-container { + margin: 0 0 2.0rem 0; +} +.logout-link { + margin-left: .6rem; +} + +/* Error list */ +.error-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: -2.0rem; +} +.error-title { + font-size: 1.8rem; + font-weight: 600; +} +.error-subtitle { + margin: 0 0 1.6rem 0; +} + +/* Settings area */ +.settings-container { + margin: 0 0 0 0; +} +#table-pullrequests_paginate{ + float:none !important; + width :50%; + margin: 0 auto; + text-align: center; + padding-top: 16px; + padding-bottom: 16px; +} +#table-pullrequests_paginate .paginate_button{ + border: .05px solid #000; + margin-left: 0px !important; + border-color: #e1e4e8; + border-radius: 0px; +} +.dataTables_scrollHead{ + display:none !important; +} +table.dataTable thead th, table.dataTable thead td { + line-height: 1.4286 !important; + padding: 8px ; + border-top: none !important; + border-bottom: 1px solid #F0F2F4 !important; +} +table.dataTable.no-footer { + border: none !important; +} +.dataTables_wrapper.no-footer .dataTables_scrollBody { + border: none !important; +} +.table-responsive { + border: none !important; +} +.table tbody tr td{ + line-height: 1.4286 !important; + padding: 8px ; + border-top: none !important; + border-bottom: 2px solid #F0F2F4!important; +} +table.dataTable thead .sorting { + background: none; +} +.title-container{ + font-size: 14px; + font-weight: bold; +} +.title-metadata{ + color: #525C6D !important; + font-size: 12px !important; + margin: 0px !important; +} +#settingsSection{ + background-color: #F0F2F4 !important; + padding-bottom: 16px; +} +.index-page-subtitle{ + font-size :12px; + float: right; + color:#525C6D; +} +.index-page-title{ + float: left; + font-size :18px; + color :#16233A; +} +.label-container{ + color: #16233A !important; + font-size: 15px !important; + font-weight: bold; +} +a.label-container:hover{ + cursor: pointer !important; + color: #0366d6 !important; + text-decoration: none !important; +} +a.label-container{ + text-decoration: none !important; +} +.repo-container{ + color: #525C6D !important; + font-size: 15px !important; + font-weight: bold; +} +a.repo-container:hover{ + cursor: pointer !important; + color: #0366d6 !important; + text-decoration: none !important; +} +a.repo-container{ + text-decoration: none !important; +} + +/* Sign in Container */ +.signin-container { + display: flex; + flex-direction: column; + align-items: center; + height: 350px; + width: 350px; + position: absolute !important; + top: 0 !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + margin: auto !important; +} +.signin-title { + font-size: 1.8rem; + font-weight: 600; +} +.signin-subtitle { + margin: 0 0 0 0; +} +.signin-lastsubtitle { + margin: 0 0 1.2rem 0; +} +.signin-img { + height: 64px; + width : 64px; + margin-bottom: 24px; + border-radius: 3px; +} +.connector-img { + width : 600px; + margin-bottom: 24px; + margin-bottom: 24px; + border-radius: 3px; +} +.list-item-image { + width: 26px; + height: 26px; +} +.image-div { + padding-top: 4px !important; + vertical-align: top !important; +} +.error-message-container { + display: flex; + flex-direction: column; + align-items: center; + height: 500px; + width: 500px; + position: absolute !important; + top: 0 !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + margin: auto !important; +} +.message-img { + height: 280px; + width : 280px; + margin-bottom: 24px; + border-radius: 3px; +} +.message-title { + font-size: 24px; + font-weight: 600; + text-align: center; +} +.message-subtitle { + margin: 0 0 0 0; +} +/* Spinner */ +.loader { + position: absolute; + left: 50%; + top: 50%; + z-index: 1; + width: 60px; + height: 60px; + margin: -75px 0 0 -75px; + border: 6px solid #f3f3f3; + border-radius: 50%; + border-top: 6px solid rgba(85, 88, 175, 0.8) !important; + width: 60px; + height: 60px; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; +} + +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Dark theme overides */ +body.theme-dark { + background: #404045; + color: #fff; +} +.theme-dark a { + color: #9fa4fe; +} +.theme-dark .form-control { + background: #2b2b30; + color: #fff; +} +.theme-dark .ts-btn-primary { + background: #9fa4fe; + color: #2b2b30; +} +.theme-dark .ts-btn-primary:focus, +.theme-dark .ts-btn-primary:hover { + background: #696cb9; + color: #fff; + cursor: pointer; +} +.theme-dark .section-caption { + color: rgba(255,255,255,.74); +} +.theme-dark #repo-choice-button { + background-color:#2B2B30; + color: #fff !important; +} +.theme-dark #page-choice-button { + background-color:#2B2B30; + color: #fff !important; +} +.theme-dark .dropdown-menu { + background-color:#2B2B30; + color: #fff !important; +} +.theme-dark .dropdown-menu>li>a { + color: #fff !important; +} +.theme-dark .dropdown-menu>li :hover { + background-color: rgba(85, 88, 175, 0.8) !important; + color: #fff !important; +} +.theme-dark .content-section { + background: #404045; +} +.theme-dark .content-border-top { + border-top : 2px solid rgba(0, 0, 0, .14); +} +.theme-dark .content-border-bottom { + border-bottom : 2px solid rgba(0, 0, 0, .14); +} +.theme-dark .content-container { + background: #404045; +} +.theme-dark .content-container::-webkit-scrollbar-thumb { + background-color: rgba(255,255,255,0.52) !important; +} +.theme-dark .listitem:hover { + color: #fff !important; +} +.theme-dark .listitem { + color: #fff !important; +} +.theme-dark .highlight { + background-color: #3f487f !important;; + color: #fff !important; +} +.theme-dark #settingsSection{ + background-color: #2b2b30 !important; +} +.theme-dark .index-page-subtitle{ + color: #fff; +} +.theme-dark .index-page-title{ + color: #fff; +} +.theme-dark .dataTables_paginate .paginate_button { + color: #fff !important; +} + +/* High-contrast theme overides */ +body.theme-contrast { + background: #000; + color: #fff; +} +.theme-contrast a { + color: #ffff01; +} +.theme-contrast .form-control { + background: #000; + color: #fff; +} +.theme-contrast .ts-btn-primary { + background: #000; + border: .2rem solid #fff; + color: #fff; +} +.theme-contrast .ts-btn-primary:focus, +.theme-contrast .ts-btn-primary:hover { + background: #ffff01; + color: #000; + cursor: pointer; +} +.theme-contrast .section-caption { + color: #fff; +} +.theme-contrast #repo-choice-button { + background-color: #000; + border: 1px solid #fff; + color: #fff !important; +} +.theme-contrast #page-choice-button { + background-color: #000; + border: 1px solid #fff; + color: #fff !important; +} +.theme-contrast .dropdown-menu { + background-color:#000; + border: 1px solid #fff; +} +.theme-contrast .dropdown-menu>li>a { + background-color:#000; + color: #fff !important; +} +.theme-contrast .dropdown-menu>li :hover { + background-color: #ffff01 !important; + color: #000 !important; +} +.theme-contrast .content-section { + background: #000; +} +.theme-contrast .content-container { + background: #000; +} +.theme-contrast .content-container::-webkit-scrollbar-thumb { + background-color :#fff !important; +} +.theme-contrast .content-border-top { + border-top : 2px solid #fff; +} +.theme-contrast .content-border-bottom { + border-bottom : 2px solid #fff +} +.theme-contrast .listitem { + color: #fff !important; +} +.theme-contrast .listitem:hover { + background-color: #ffff01 !important; + color: #000 !important; +} +.theme-contrast .highlight { + background-color: #1aebff !important;; + color: #000 !important; +} +.theme-contrast #settingsSection{ + background-color: #000 !important; +} +.theme-contrast .index-page-subtitle{ + color: #fff; +} +.theme-contrast .index-page-title{ + color : #fff; +} +.theme-contrast .dataTables_paginate .paginate_button { + color: #fff !important; +} \ No newline at end of file diff --git a/nodejs/connector-generic/public/custom/js/connectorTabConfig.js b/nodejs/connector-generic/public/custom/js/connectorTabConfig.js new file mode 100644 index 0000000000..c11d0c6450 --- /dev/null +++ b/nodejs/connector-generic/public/custom/js/connectorTabConfig.js @@ -0,0 +1,6 @@ +$(document).ready(function () { + microsoftTeams.settings.getSettings(function (settings) { + document.getElementById("webhook").value = settings.webhookUrl; + microsoftTeams.settings.setValidityState(true); + }); +}); \ No newline at end of file diff --git a/nodejs/connector-generic/public/custom/js/theme.js b/nodejs/connector-generic/public/custom/js/theme.js new file mode 100644 index 0000000000..3bbae950f8 --- /dev/null +++ b/nodejs/connector-generic/public/custom/js/theme.js @@ -0,0 +1,41 @@ +/** + * Class for managing Microsoft Teams themes + * idea borrowed from the Dizz: https://github.com/richdizz/Microsoft-Teams-Tab-Themes/blob/master/app/config.html + * Updated on 4/27/17 to use a hierarchical styles approach with a simple stylesheet + */ +var TeamsTheme = (function () { + function TeamsTheme() { + } + /** + * Set up themes on a page + */ + TeamsTheme.fix = function (context) { + microsoftTeams.initialize(); + microsoftTeams.registerOnThemeChangeHandler(TeamsTheme.themeChanged); + if (context) { + TeamsTheme.themeChanged(context.theme); + } + else { + microsoftTeams.getContext(function (context) { + TeamsTheme.themeChanged(context.theme); + }); + } + }; + /** + * Manages theme changes + * @param theme default|contrast|dark + */ + TeamsTheme.themeChanged = function (theme) { + var bodyElement = document.getElementsByTagName("body")[0]; + switch (theme) { + case "dark": + case "contrast": + bodyElement.className = "theme-" + theme; + break; + case "default": + bodyElement.className = ""; + } + }; + return TeamsTheme; +}()); + diff --git a/nodejs/connector-generic/server.js b/nodejs/connector-generic/server.js new file mode 100644 index 0000000000..52b55ccb56 --- /dev/null +++ b/nodejs/connector-generic/server.js @@ -0,0 +1,40 @@ +var express = require('express'), + bodyParser = require('body-parser'), + cookieParser = require('cookie-parser'), + session = require('express-session'); + +var app = express(); + +app.set('views', __dirname + '/views'); +app.set('view engine', 'jade'); + +app.use(express.static(__dirname + '/public')); + +app.use(session({ + secret: "random", + saveUninitialized: true, + resave: true +})); + +// This is used to prevent your tabs from being embedded in other systems than Microsoft Teams +app.use(function (req, res, next) { + res.setHeader("Content-Security-Policy", "frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com"); + res.setHeader("X-Frame-Options", "ALLOW-FROM https://teams.microsoft.com/."); // IE11 + return next(); +}); + +app.get('/connectorconfig', function (req, res) { + renderView(req, res, 'connectorconfig.jade', { user: req.user }); +}); + +function renderView(req, res, view, locals) { + if (locals === undefined) { + locals = {}; + } + res.render(view, locals); +} + +var port = process.env.port || 3978; +app.listen(port, function () { + console.log('Listening on http://localhost:' + port); +}); \ No newline at end of file diff --git a/nodejs/connector-generic/views/connectorconfig.jade b/nodejs/connector-generic/views/connectorconfig.jade new file mode 100644 index 0000000000..f2eb276194 --- /dev/null +++ b/nodejs/connector-generic/views/connectorconfig.jade @@ -0,0 +1,67 @@ +doctype html + +html(lang="en") + head + title Notify Me - Microsoft Teams + meta(charset="utf-8") + meta(http-equiv="X-UA-Compatible", content="IE=edge") + meta(name="viewport", content="width=device-width, initial-scale=1") + link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet") + link(href="/custom/css/msteams-app.css", rel="stylesheet") + script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js") + script(src="https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js") + script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js") + script(src="/custom/js/theme.js") + script(src="/custom/js/connectorTabConfig.js") + body + script. + microsoftTeams.initialize(); + + microsoftTeams.getContext(function (context) { + TeamsTheme.fix(context); + }); + + microsoftTeams.settings.registerOnSaveHandler(function(saveEvent) { + microsoftTeams.settings.setSettings({ + entityId: "bing", + contentUrl: "[ngrokURL]/connectorconfig", + configName: "bing" + }); + saveEvent.notifySuccess(); + }); + + microsoftTeams.settings.registerOnRemoveHandler(function (removeEvent) { + alert("remove"); + }); + + div.settings-container + div.settings-section + div.section-caption 1. Get the incoming webhook URL for your Connector. + div.form-field-title + div Each time a unique webhook Url for a channel is created, which can be accessed through Teams client SDK (getSettings). Copy the following URL to save it to the Clipboard. You'll need this URL when you configure the connector. + p(style='white-space:pre;') + div.form-group + input#webhook(type='text' readonly) + button.ts-btn.ts-btn-primary(type='button', onclick='copyWebhookToClipborad()') Copy Text + div.section-caption 2. Instructions. + div.form-field-title + div a) Get the user authenticated using Teams client SDK, if needed, before displaying the webhook URL. Like below + p(style='white-space:pre;') + img.connector-img(src='/custom/assets/login.png') + div b) Provide a configuration experience to the user and save it in your database. Like below + p(style='white-space:pre;') + img.connector-img(src='/custom/assets/config.png') + div.form-field-title + div c) The above url can be stored in your database/service to send any notification to that particular channel. It can be quickly tested using Curl/Postman by posting any connector card from Card Playground + + script(type='text/javascript'). + function copyWebhookToClipborad() { + var copyText = document.getElementById("webhook"); + copyText.select(); + document.execCommand("copy"); + if(copyText.value.length<=0) + { + alert("Some Error"); + } + } + diff --git a/nodejs/connector-generic/web.config b/nodejs/connector-generic/web.config new file mode 100644 index 0000000000..0600bef19a --- /dev/null +++ b/nodejs/connector-generic/web.config @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file