Skip to content
This repository was archived by the owner on Jun 30, 2022. It is now read-only.

Commit bc0f320

Browse files
ryanisgrigryanisgrig
authored
[Linked Accounts] Consolidate Web Test changes (#477)
* Updated index/linkedaccounts html with content from web test Added UI styling similar to the F5 new bot experience Refactored ClientDirectLineSecret/ClientDirectLineEndpoint to DirectLineSecret/DirectLineEndpoint to match Web Test usage * Updated site.min.css from latest build
1 parent 887b9c8 commit bc0f320

File tree

9 files changed

+275
-97
lines changed

9 files changed

+275
-97
lines changed

‎solutions/Virtual-Assistant/src/csharp/linkedaccounts/linkedaccounts.web/Controllers/HomeController.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ public async Task<IActionResult> LinkedAccounts()
3939
{
4040
this.ViewData["Message"] = "Your application description page.";
4141

42-
var secret = this.Configuration.GetSection("ClientDirectLineSecret")?.Value;
43-
var endpoint = this.Configuration.GetSection("ClientDirectLineEndpoint")?.Value;
42+
var secret = this.Configuration.GetSection("DirectLineSecret")?.Value;
43+
var endpoint = this.Configuration.GetSection("DirectLineEndpoint")?.Value;
4444

4545
// First step is to exchange the DirectLine Secret for a Token
4646
HttpClient client = new HttpClient();

‎solutions/Virtual-Assistant/src/csharp/linkedaccounts/linkedaccounts.web/Views/Home/Index.cshtml‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
@{
2-
ViewData["Title"] = "Linked Accounts Sample";
2+
ViewData["Title"] = "Testing your Virtual Assistant";
33
}
44

5-
<div class="panel-title">
6-
<p>
7-
8-
This is a sample Linked Accounts website to demonstrate the capability to link accounts to a Virtual Assistant.
9-
In voice focused scenarios there is a need to ensure a companion experience (Website or Mobile App) can be used to link accounts as part of the onboarding process.
10-
11-
<br /><b>Click Linked Accounts above to get started</b>
12-
</p>
13-
</div>
5+
<div class="content-row">
6+
<div class="content-title">Testing your Virtual Assistant</div>
7+
<div class="main-text main-text-p1">
8+
<p>
9+
You can connect to your virtual assistant with an authenticated identity using <a href="https://github.com/Microsoft/AI/blob/master/solutions/Virtual-Assistant/docs/virtualassistant-linkedaccounts.md">Linked Accounts</a>.
10+
</p>
11+
<p>
12+
Voice focused scenarios have a need for a companion experience (a web or mobile app) that can be used to link accounts as part of an onboarding process.
13+
</p>
14+
<p>
15+
You should be logged into this test harness with the same account you are linking to your virtual assistant.
16+
</p>
17+
</div>
18+
</div>

‎solutions/Virtual-Assistant/src/csharp/linkedaccounts/linkedaccounts.web/Views/Home/LinkedAccounts.cshtml‎

Lines changed: 74 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,19 @@
2121
console.log(request.responseText);
2222
}, error => {
2323
console.log('failed to get sessionId', error);
24-
});
24+
});
25+
26+
function copyUserId() {
27+
var copyText = document.getElementById("UserId");
28+
29+
// Select the text field UserId
30+
copyText.select();
31+
32+
// Copy the text inside the text field
33+
document.execCommand("copy");
34+
35+
console.log('Copied user id: ' + copyText.value);
36+
}
2537
</script>
2638

2739

@@ -31,67 +43,70 @@
3143
}
3244
else
3345
{
34-
<div>
35-
<div class="linkedAccount-title">Linked Accounts</div>
46+
<div class="content-row">
47+
<div class="content-title">Linked Accounts</div>
48+
<div class="main-text main-text-p1">
49+
The authentication providers listed below are the same providers you have enabled on your bot.
3650

37-
<div class="linkedAccount-displayName">
38-
User ID:
39-
@using (Html.BeginForm("ChangeUserId", "Home", FormMethod.Post))
40-
{
41-
@Html.TextBoxFor(model => model.UserId, new { style = "width:300px;" })
42-
<button type="submit">Change</button>
43-
}
44-
</div>
51+
You may need to use a different user id in the Web Chat than what is displayed here.
52+
You can update the values and select "Update User ID" to update what is stored in session.
53+
</div>
54+
<div class="linkedAccount-displayName">
55+
User ID:
56+
@using (Html.BeginForm("ChangeUserId", "Home", FormMethod.Post))
57+
{
4558

46-
<div class="linkedAccount-list">
47-
<div class="linkedAccount-header">
48-
<div class="linkedAccount-header-label linkedAccount-header-connectionName">Connection Name</div>
49-
<div class="linkedAccount-header-label linkedAccount-header-displayName">Service Provider</div>
50-
<div class="linkedAccount-header-label linkedAccount-header-status">Status</div>
51-
</div>
59+
@Html.TextBoxFor(model => model.UserId, new { style = "width:300px;" })
60+
<button type="submit">Update User ID</button>
61+
<button onclick="copyUserId()">Copy User ID</button>
62+
@Html.ActionLink("Sign Out All", "SignOutAll", "Home", null, new { @class = "button" })
63+
}
64+
</div>
65+
<div class="linkedAccount-list">
66+
<div class="linkedAccount-header">
67+
<div class="linkedAccount-header-label linkedAccount-header-connectionName">Connection Name</div>
68+
<div class="linkedAccount-header-label linkedAccount-header-displayName">Service Provider</div>
69+
<div class="linkedAccount-header-label linkedAccount-header-status">Status</div>
70+
</div>
5271

53-
@foreach (var account in Model.Status)
54-
{
55-
<div class="linkedAccount">
56-
<div class="linkedAccount-label linkedAccount-connectionName">@account.ConnectionName</div>
57-
<div class="linkedAccount-label linkedAccount-displayName">@account.ServiceProviderDisplayName</div>
58-
@if (!account.HasToken)
59-
{
60-
<div class="linkedAccount-label linkedAccount-status">
61-
<div class="icon">
62-
<svg viewBox="0 0 34 34">
63-
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="gray"></circle>
64-
Sorry, your browser does not support inline SVG.
65-
</svg>
66-
</div>
67-
<div class="online-status">
68-
Offline
69-
</div>
72+
@foreach (var account in Model.Status)
73+
{
74+
<div class="linkedAccount">
75+
<div class="linkedAccount-label linkedAccount-connectionName">@account.ConnectionName</div>
76+
<div class="linkedAccount-label linkedAccount-displayName">@account.ServiceProviderDisplayName</div>
77+
@if (!account.HasToken)
78+
{
79+
<div class="linkedAccount-label linkedAccount-status">
80+
<div class="icon">
81+
<svg viewBox="0 0 34 34">
82+
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="#737373"></circle>
83+
Sorry, your browser does not support inline SVG.
84+
</svg>
7085
</div>
71-
<div id="signin"></div>
72-
@Html.ActionLink("Sign In", "SignIn", "Home", account, new { @class = "button linkedAccount-action" })
73-
}
74-
else
75-
{
76-
<div class="linkedAccount-label linkedAccount-status">
77-
<div class="icon">
78-
<svg viewBox="0 0 34 34">
79-
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="#22ee22" />
80-
Sorry, your browser does not support inline SVG.
81-
</svg>
82-
</div>
83-
<div class="online-status">
84-
Online
85-
</div>
86+
<div class="online-status">
87+
Offline
8688
</div>
87-
@Html.ActionLink("Sign Out", "SignOut", "Home", account, new { @class = "button linkedAccount-action" })
88-
}
89-
</div>
90-
}
91-
</div>
92-
93-
<div class="linkedAccount-actions">
94-
@Html.ActionLink("Sign Out All", "SignOutAll", "Home", null, new { @class = "button" })
95-
</div>
89+
</div>
90+
<div id="signin"></div>
91+
@Html.ActionLink("Sign In", "SignIn", "Home", account, new { @class = "button linkedAccount-action" })
92+
}
93+
else
94+
{
95+
<div class="linkedAccount-label linkedAccount-status">
96+
<div class="icon">
97+
<svg viewBox="0 0 34 34">
98+
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="#9bf00b" />
99+
Sorry, your browser does not support inline SVG.
100+
</svg>
101+
</div>
102+
<div class="online-status">
103+
Online
104+
</div>
105+
</div>
106+
@Html.ActionLink("Sign Out", "SignOut", "Home", account, new { @class = "button linkedAccount-action" })
107+
}
108+
</div>
109+
}
96110
</div>
97-
}
111+
</div>
112+
}

‎solutions/Virtual-Assistant/src/csharp/linkedaccounts/linkedaccounts.web/Views/Shared/_Layout.cshtml‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Linked Accounts Sample</title>
6+
<title>Testing your Virtual Assistant</title>
77

88
<environment include="Development">
99
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
@@ -26,11 +26,10 @@
2626
<span class="icon-bar"></span>
2727
<span class="icon-bar"></span>
2828
</button>
29-
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Linked Accounts Sample</a>
29+
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Testing your Virtual Assistant</a>
3030
</div>
3131
<div class="navbar-collapse collapse">
3232
<ul class="nav navbar-nav">
33-
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
3433
<li><a asp-area="" asp-controller="Home" asp-action="LinkedAccounts">Linked Accounts</a></li>
3534
</ul>
3635
@await Html.PartialAsync("_LoginPartial")

‎solutions/Virtual-Assistant/src/csharp/linkedaccounts/linkedaccounts.web/appsettings.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"MicrosoftAppId": "",
1717
"MicrosoftAppPassword": "",
1818

19-
"ClientDirectLineSecret": "",
20-
"ClientDirectLineEndpoint": "https://directline.botframework.com/v3/directline"
19+
"DirectLineSecret": "",
20+
"DirectLineEndpoint": "https://directline.botframework.com/v3/directline"
2121
}

0 commit comments

Comments
 (0)