From 5b30068cb2da69b330aa60120d27533bfbe63e64 Mon Sep 17 00:00:00 2001 From: John <109105353+jpeng-ms@users.noreply.github.com> Date: Tue, 20 Aug 2024 22:44:50 -0700 Subject: [PATCH] update - add support for token auth - updated UI --- public/index.html | 1 + src/App.js | 89 ++++++++++++++++----- src/components/forms/AdvancedForm.js | 3 +- src/components/forms/RadioGroup.js | 4 +- src/index.css | 115 ++++++++++++++++++++++++++- src/index.js | 3 +- 6 files changed, 187 insertions(+), 28 deletions(-) diff --git a/public/index.html b/public/index.html index e3b63c0..98feb2e 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,7 @@ + Chat SDK Debug Tool diff --git a/src/App.js b/src/App.js index b911ac9..1f80656 100644 --- a/src/App.js +++ b/src/App.js @@ -73,6 +73,8 @@ export default function App() { } const init = async(value, checked) => { + document.getElementById('sdk-container').style.display = 'block'; + document.getElementById('blank-container').style.display = 'none'; setStatus("init started") try { let token = await _getToken(value); @@ -92,10 +94,12 @@ export default function App() { document.getElementById('full-scale-image').addEventListener('click', () => { document.getElementById('overlay-container').style.display = 'none'; }); - } const _getToken = async(value) => { + if (value.token) { + return value.token + } const identityClient = new CommunicationIdentityClient(value.connectionString); const user = await identityClient.createUser(); setStatus("user created"); @@ -103,7 +107,7 @@ export default function App() { setStatus("token created"); value.token = token; setTokenString(token); - setMRI("MRI: " + user.communicationUserId) + setMRI(user.communicationUserId) return token } @@ -120,9 +124,9 @@ const policy = { const _startChat = async(value, token) => { setStatus("chat start requested") - + let endpointUrl = value.endpointUrl ?? await _getEndpointURL(value.connectionString); window.chatClient = new ChatClient( - await _getEndpointURL(value.connectionString), + endpointUrl, new AzureCommunicationTokenCredential(token), { additionalPolicies: [ @@ -450,8 +454,8 @@ const policy = { // return string1.replace('https://global.chat.prod.communication.microsoft.com', _getEndpointURL(connectionString)); } - async function copyToClipboard() { - await navigator.clipboard.writeText(tokenString.token); + async function copyToClipboard(content) { + await navigator.clipboard.writeText(content); } function toggleHttpContainer() { @@ -484,12 +488,28 @@ const policy = { return str.split("/;accesskey=")[0] } const formSchema = [ - { name: 'connectionString', label: 'Connection String', componentType: 'text', required: true }, - { name: 'threadid', label: 'Thread ID or Meeting URL', componentType: 'text', required: true }, - { name: 'displayname', label: 'Display Name', componentType: 'text', required: true }, + { + name: 'authentication', + label: '1. Authentication', + componentType: 'radioGroup', + defaultValue: 'viaConnectionString', + options: [ + { label: 'via Connection String', value: 'viaConnectionString'}, + { label: 'via Token', value: 'viaToken' } + ], + }, + { + name: 'connectionString', label: 'Connection String', componentType: 'text', + condition: { key: 'authentication', value: 'viaConnectionString', operator: '=' } + }, + { name: 'token', label: 'Token', componentType: 'text', condition: { key: 'authentication', value: 'viaToken', operator: '=' } }, + { name: 'communicationUserId', label: 'User ID (MRI)', componentType: 'text', condition: { key: 'authentication', value: 'viaToken', operator: '=' } }, + { name: 'endpointUrl', label: 'Endpoint URL', componentType: 'text', condition: { key: 'authentication', value: 'viaToken', operator: '=' } }, + { name: 'threadid', label: '2. Thread ID or Meeting URL', componentType: 'text'}, + { name: 'displayname', label: '3. Display Name', componentType: 'text' }, { name: 'action', - label: 'Actions', + label: '4. Actions', componentType: 'radioGroup', options: [ { label: 'Join Chat/Call', value: 'init' }, @@ -552,11 +572,27 @@ const policy = { ] const formSchema2 = [ - { name: 'connectionString', label: 'Connection String', componentType: 'text', required: true }, - { name: 'displayname', label: 'Display Name', componentType: 'text', required: true }, + { + name: 'authentication', + label: '1. Authentication', + componentType: 'radioGroup', + defaultValue: 'viaConnectionString', + options: [ + { label: 'via Connection String', value: 'viaConnectionString'}, + { label: 'via Token', value: 'viaToken'} + ], + }, + { + name: 'connectionString', label: 'Connection String', componentType: 'text', + condition: { key: 'authentication', value: 'viaConnectionString', operator: '=' } + }, + { name: 'token', label: 'Token', componentType: 'text', condition: { key: 'authentication', value: 'viaToken', operator: '=' } }, + { name: 'communicationUserId', label: 'User ID (MRI)', componentType: 'text', condition: { key: 'authentication', value: 'viaToken', operator: '=' } }, + { name: 'endpointUrl', label: 'Endpoint URL', componentType: 'text', condition: { key: 'authentication', value: 'viaToken', operator: '=' } }, + { name: 'displayname', label: '2. Display Name', componentType: 'text'}, { name: 'action', - label: 'Actions', + label: '3. Actions', componentType: 'radioGroup', options: [ { label: 'Create Chat', value: 'init' }, @@ -651,7 +687,7 @@ const policy = {
-

Chat SDK Test

+

Chat SDK Tool

@@ -677,15 +713,20 @@ const policy = {
-
+
-
- - +
+
+ + +
+ +
+
+
+ +
- - -

{ mri }

{ threadInfo }

@@ -712,6 +753,12 @@ const policy = {
+
+
+ +

Fill up details to get started

+
+
diff --git a/src/components/forms/AdvancedForm.js b/src/components/forms/AdvancedForm.js index 1d61346..ac26dd3 100644 --- a/src/components/forms/AdvancedForm.js +++ b/src/components/forms/AdvancedForm.js @@ -37,7 +37,6 @@ export const AdvancedForm = ({ return ( ) })} - diff --git a/src/components/forms/RadioGroup.js b/src/components/forms/RadioGroup.js index 94b7705..7371fc4 100644 --- a/src/components/forms/RadioGroup.js +++ b/src/components/forms/RadioGroup.js @@ -6,10 +6,11 @@ export const RadioGroup = ({ form, required, options, + defaultValue, ...props }) => { return ( - + {options.map((option) => (
diff --git a/src/index.css b/src/index.css index 165efca..42a8e38 100644 --- a/src/index.css +++ b/src/index.css @@ -112,6 +112,10 @@ pre { opacity: 0.5; } +h1 { + color: #1a4aa0; +} + #http-response-container { display: none; } @@ -124,6 +128,11 @@ pre { margin: 0 auto; } +.container-copy { + margin: 0 auto; + display: flex; +} + #root { margin-top: 60px; } @@ -137,6 +146,24 @@ pre { font-size: 12px; } +button[type="submit"] { + width: 100%; + border: none; + background-color: #3f6ec6; +} + +button[type="submit"]:hover { + background-color: #000000; +} + +.chat-icon { + color: #155598; +} + +#sdk-container { + display: none; +} + .box { background-color: #fff; @@ -150,6 +177,8 @@ pre { list-style: none; display: flex; position: relative; + color: #1a4aa0; + font-weight: 800; } .tab-list::before { @@ -159,7 +188,7 @@ pre { width: 50%; position: absolute; bottom: 0; - background-color: #aaa; + background-color: #1a4aa0; transition: .3s; } @@ -340,7 +369,15 @@ file attachments } .container-btn { - margin-top: 10px !important; + background-color: #2a2a2a !important; + border: none; + height: 100%; + align-self: center; + flex-grow: 1; +} + +.container-copy button:hover { + background-color: #084eff !important; } pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! @@ -355,4 +392,76 @@ pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5p Updated for @stackoverflow/stacks v0.64.0 Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less -*/.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700} \ No newline at end of file +*/.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700} + + +.copy-text { + position: relative; + padding: 3px; + background: #fff; + border: 1px solid #ddd; + border-radius: 10px; + display: flex; + width: 100%; +} +.copy-text input.text { + padding: 3px; + font-size: 13px; + color: #555; + border: none; + outline: none; +} +.copy-text button { + padding: 8px; + background: #2a2a2a; + color: #fff; + font-size: 14px; + border: none; + outline: none; + cursor: pointer; +} + +.copy-text button:active { + background: #084eff; +} +.copy-text button:before { + content: "Copied"; + position: absolute; + top: -45px; + right: 0px; + background: #084eff; + padding: 8px 10px; + border-radius: 20px; + font-size: 15px; + display: none; +} +.copy-text button:after { + content: ""; + position: absolute; + top: -20px; + right: 25px; + width: 10px; + height: 10px; + background: #5c81dc; + transform: rotate(45deg); + display: none; +} +.copy-text.active button:before, +.copy-text.active button:after { + display: block; +} + +.loading-container { + display: block; + text-align: center; + margin-top: 20vh; +} + +.loading-icon { + font-size: 120px; + color: grey; +} + +.loading-text { + font-weight: 600; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 4dea2ab..2e83484 100644 --- a/src/index.js +++ b/src/index.js @@ -5,10 +5,11 @@ import './index.css' import App from './App' +console.warn = console.error = () => {}; ReactDOM.render( , document.getElementById('root'), -) +) \ No newline at end of file