Skip to content
This repository was archived by the owner on Nov 16, 2023. It is now read-only.

PopUpSignIn Feature in NodeJs #39

Open
vamagra wants to merge 4 commits into
base: master
Choose a base branch
from
Open

PopUpSignIn Feature in NodeJs #39

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b0a8754
PopUpSignIn
Jan 4, 2018
7e24e66
PopUp SignIn Resolve Comments
Jan 5, 2018
967a1fe
Comments Resolve PopUp SignIn
Jan 9, 2018
8a64976
Resolved Code Review Comments PopUpSignIn
Feb 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions public/botViews/popUpSignin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
</head>
<!-- This simulates a login page to show what happens when the user clicks on a button with the signin action.
When the user clicks on the Login button, it calls notifySuccess() to fake a successful login and trigger a new message to the bot -->
<body>
<div>
User Name : <input type="text" />
</div>
<br />
<div>
Password : <input type="password" />
</div>

<button onClick="submit()">Login</button>

<script src="https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js"></script>

<script>
microsoftTeams.initialize();
function submit()
{
microsoftTeams.authentication.notifySuccess('PopUpSignInAuthenticationSuccess');
Copy link
Copy Markdown
Contributor

@jotrick jotrick Jan 29, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this example, let's pass the user's input username through the notifySuccess call so that the verifyState handler in the bot can present that field in the outgoing message.

}
</script>
</body>
</html>
23 changes: 19 additions & 4 deletions src/Bot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,16 @@ export class Bot extends builder.UniversalBot {

// setup invoke payload handler
this._connector.onInvoke(this.getInvokeHandler(this));

// setup O365ConnectorCard action handler
this._connector.onO365ConnectorCardAction(this.getO365ConnectorCardActionHandler(this));

// setup conversation update handler for things such as a memberAdded event
this.on("conversationUpdate", this.getConversationUpdateHandler(this));

this._connector.onSigninStateVerification((event, query, callback) =>
{
this.verifySigninState(event, query, callback);
});

// setup compose extension handlers
// onQuery is for events that come through the compose extension itself including
// config and auth responses from popups that were started in the compose extension
Expand All @@ -74,7 +77,6 @@ export class Bot extends builder.UniversalBot {
// Clear the stack on invoke, as many builtin dialogs don't play well with invoke
// Invoke messages should carry the necessary information to perform their action
session.clearDialogStack();

let payload = (event as any).value;

// Invokes don't participate in middleware
Expand All @@ -91,11 +93,24 @@ export class Bot extends builder.UniversalBot {
};
}

private async verifySigninState(
event: builder.IEvent,
query: teams.ISigninStateVerificationQuery,
callback: (err: Error, body: any, status?: number) => void): Promise<void>
{
let session = await loadSessionAsync(this, event);
if (session)
{
session.clearDialogStack();
session.send(Strings.popupsignin_successful);
Copy link
Copy Markdown
Contributor

@jotrick jotrick Jan 29, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this example, let's pass the user's input username through the notifySuccess call so that the verifyState handler in the bot can present that field in the outgoing message - so here, the handler should grab the passed in value and send that out in the message.

}
callback(null, "", 200);
}

// set incoming event to any because membersAdded is not a field in builder.IEvent
private getConversationUpdateHandler(bot: builder.UniversalBot): (event: any) => void {
return async function(event: any): Promise<void> {
let session = await loadSessionAsync(bot, event);

if (event.membersAdded && event.membersAdded[0].id && event.membersAdded[0].id.endsWith(config.get("bot.botId"))) {
session.send(Strings.bot_introduction); // probably only works in Teams
} else {
Expand Down
2 changes: 2 additions & 0 deletions src/dialogs/RootDialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { GetLastDialogUsedDialog } from "./examples/basic/GetLastDialogUsedDialo
import { HelloDialog } from "./examples/basic/HelloDialog";
import { HelpDialog } from "./examples/basic/HelpDialog";
import { HeroCardDialog } from "./examples/basic/HeroCardDialog";
import { PopupSignInDialog } from "./examples/basic/PopupSignInDialog";
import { MessageBackReceiverDialog } from "./examples/basic/MessageBackReceiverDialog";
import { MultiDialog } from "./examples/basic/MultiDialog";
import { O365ConnectorCardActionsDialog } from "./examples/basic/O365ConnectorCardActionsDialog";
Expand Down Expand Up @@ -72,6 +73,7 @@ export class RootDialog extends builder.IntentDialog {
new HelloDialog(bot);
new HelpDialog(bot);
new HeroCardDialog(bot);
new PopupSignInDialog(bot);
new MessageBackReceiverDialog(bot);
new MultiDialog(bot);
new O365ConnectorCardActionsDialog(bot);
Expand Down
35 changes: 35 additions & 0 deletions src/dialogs/examples/basic/PopupSignInDialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import * as builder from "botbuilder";
import { TriggerActionDialog } from "../../../utils/TriggerActionDialog";
import { DialogIds } from "../../../utils/DialogIds";
import { DialogMatches } from "../../../utils/DialogMatches";
import { Strings } from "../../../locale/locale";
import * as config from "config";

// Demonstrates using a signin action to show a login page in a popup
export class PopupSignInDialog extends TriggerActionDialog {

private static async popupsignin(session: builder.Session, args?: any | builder.IDialogResult<any>, next?: (args?: builder.IDialogResult<any>) => void): Promise<void> {
Copy link
Copy Markdown
Contributor

@jotrick jotrick Jan 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NIT: Change name of function to sendPopupSigninCard

Copy link
Copy Markdown
Contributor Author

@vamagra vamagra Feb 1, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

let popUpUrl = config.get("app.baseUri") + "/botViews/popUpSignin.html";

session.send(
new builder.Message(session).addAttachment(
new builder.HeroCard(session)
.title(Strings.popupsignin_card_title)
.buttons([
new builder.CardAction(session)
.type("signin")
.title(Strings.popupsignin_button_title)
.value(popUpUrl)])));
session.endDialog();
}

constructor(
bot: builder.UniversalBot,
) {
super(bot,
DialogIds.PopupSignInDialogId,
DialogMatches.PopUpSignInDialogMatch,
PopupSignInDialog.popupsignin,
);
}
}
5 changes: 4 additions & 1 deletion src/locale/en/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,5 +119,8 @@
"open_uri": "Open Uri",
"message_summary": "A sample O365 actionable card",
"o365connectorcard_action_response": "<h2>Thanks, %s!</h2><br/><h3>Your input action ID:</h3><br/><pre>%s</pre><br/><h3>Your input body:</h3><br/><pre>%s</pre>",
"end_of_example_string_responses": "******************************* EVERYTHING ABOVE HERE IS FOR A TEMPLATE EXAMPLE DIALOG *******************************"
"end_of_example_string_responses": "******************************* EVERYTHING ABOVE HERE IS FOR A TEMPLATE EXAMPLE DIALOG *******************************",
"popupsignin_card_title":"Please click below for Popup Sign-In experience",
Copy link
Copy Markdown
Contributor

@jotrick jotrick Jan 29, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move these three strings above the "****************" line so that the user knows they are strings used by examples.

Copy link
Copy Markdown
Contributor Author

@vamagra vamagra Feb 1, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

"popupsignin_button_title":"Sign In",
"popupsignin_successful":"Authentication Successful!!"
}
1 change: 1 addition & 0 deletions src/utils/DialogIds.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const DialogIds = {
HelloDialogId: "HelloDialog",
HelpDialogId: "HelpDialog",
HeroCardDialogId: "HeroCardDialog",
PopupSignInDialogId: "PopupSignInDailog",
Copy link
Copy Markdown
Contributor

@aosolis aosolis Jan 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: PopupSignInDialog (not Dailog)

Copy link
Copy Markdown
Contributor Author

@vamagra vamagra Jan 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

Copy link
Copy Markdown
Contributor

@jotrick jotrick Jan 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vamagra - Need to fix the other 'Dailog' in this line.

Copy link
Copy Markdown
Contributor Author

@vamagra vamagra Feb 1, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

MessageBackReceiverDialogId: "MessageBackReceiverDialog",
MultiDialogId: "MultiDialog",
MultiDialog2Id: "MultiDialog2",
Expand Down
1 change: 1 addition & 0 deletions src/utils/DialogMatches.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const DialogMatches = {
HelloDialogMatch2: /hi/i,
HelpDialogMatch: /help/i,
HeroCardDialogMatch: /hero card/i,
PopUpSignInDialogMatch: /sign in/i,
Copy link
Copy Markdown
Contributor

@jotrick jotrick Jan 29, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make the space in the regex optional so if I typed "sign in" or "signin", it would trigger the dialog.

Copy link
Copy Markdown
Contributor Author

@vamagra vamagra Feb 1, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

MessageBackReceiverDialogMatch: /incoming message from messageBack button/i,
MultiDialogMatch: /multi dialog 1/i,
MultiDialog2Match: /multi dialog 2/i,
Expand Down