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 1 commit
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>
<!--Purpose of this login html page is to show fake authentication when user clicks on SignIn Action -->
<!--This login page will do nothing, except when user will click on Login page it will post back to Main controller -->
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.

"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."

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.

<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>
21 changes: 19 additions & 2 deletions src/Bot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,11 @@ 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(this.SigninHandler(this));

// setup compose extension handlers
// onQuery is for events that come through the compose extension itself including
Expand Down Expand Up @@ -91,6 +90,23 @@ export class Bot extends builder.UniversalBot {
};
}

private SigninHandler(bot: builder.UniversalBot): (event: builder.IEvent, query: teams.ISigninStateVerificationQuery, callback: (err: Error, body: any, status?: number) => void) => void {
return async function (
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.

We should change this getXXXHandler() pattern as it's not clear how to access private members in the handler (this confused Shoeb who was working on the Trello CE).

Better to do something like this:
this._connector.onSigninStateVerification((event, query, callback) => { this.verifySigninState(event, query, callback); });
and put your logic in the private member function verifySigninState().

Copy link
Copy Markdown
Contributor Author

@vamagra vamagra Jan 9, 2018

Choose a reason for hiding this comment

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

Done.

event: builder.IEvent,
query: teams.ISigninStateVerificationQuery,
callback: (err: Error, body: any, status?: number) => void,
): Promise<void>
{
let session = await loadSessionAsync(bot, event);
if (session) {
session.clearDialogStack();
session.send("Authentication Successful!!");

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.

Remove blank line.

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.

}
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> {
Expand Down Expand Up @@ -119,4 +135,5 @@ export class Bot extends builder.UniversalBot {
callback(null, null, 200);
};
}

}
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 { PopupSignInDailog } from "./examples/basic/PopupSignInDailog";
Copy link
Copy Markdown

@msftdherron msftdherron Jan 5, 2018

Choose a reason for hiding this comment

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

typo here Dailog->Dialog

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 PopupSignInDailog(bot);
new MessageBackReceiverDialog(bot);
new MultiDialog(bot);
new O365ConnectorCardActionsDialog(bot);
Expand Down
51 changes: 51 additions & 0 deletions src/dialogs/examples/basic/PopupSignInDailog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import * as builder from "botbuilder";
import { TriggerActionDialog } from "../../../utils/TriggerActionDialog";
import { DialogIds } from "../../../utils/DialogIds";
import { DialogMatches } from "../../../utils/DialogMatches";
import * as config from "config";

export class PopupSignInDailog extends TriggerActionDialog {

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

@msftdherron msftdherron Jan 5, 2018

Choose a reason for hiding this comment

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

there IS only one step, right? so maybe a more descriptive name than "step1"?

let cards = new Array<builder.HeroCard>();

let buttons = new Array<builder.CardAction>();
/**
* This is PopUp SignIn Dialog Class.
* main purpose of this class is to Display the PopUp SignIn Card
*/

// let input = "";
// if (args.response) {
// input = args.response;
// }

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

buttons.push(new builder.CardAction(session)
.type("signin")
.title("Sign In")
.value(popUpUrl),
);

let newCard = new builder.HeroCard(session)
.title("Please click below for Popup Sign-In experience")
.buttons(buttons);

cards.push(newCard);

session.send(new builder.Message(session)
.attachments(cards));
session.endDialog();
}

constructor(
bot: builder.UniversalBot,
) {
super(bot,
DialogIds.PopupSignInDialogId,
DialogMatches.PopUpSignInDialogMatch,
PopupSignInDailog.step1,
);
}
}
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