Skip to content

Commit

Permalink
Added token auth + UI update (#28)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpeng-ms
jpeng-ms authored Aug 27, 2024
2 parents 1b02328 + 5b30068 commit 8f0e25d
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 28 deletions.
1 change: 1 addition & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Chat SDK Debug Tool" />
<title>Chat SDK Debug Tool</title>
Expand Down
89 changes: 68 additions & 21 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -92,18 +94,20 @@ 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");
const token = await identityClient.getToken(user, ["voip", "chat"]);
setStatus("token created");
value.token = token;
setTokenString(token);
setMRI("MRI: " + user.communicationUserId)
setMRI(user.communicationUserId)
return token
}

Expand All @@ -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: [
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -651,7 +687,7 @@ const policy = {
<div className="flex">
<div className="form section">
<div className="container">
<h1>Chat SDK Test</h1>
<h1><i className="fa-regular fa-message"></i> Chat SDK Tool</h1>
<div className="box">
<input type="radio" className="tab-toggle" name="tab-toggle" id="tab1" onChange={handleTab} checked={checked === 0} />
<input type="radio" className="tab-toggle" name="tab-toggle" id="tab2" onChange={handleTab} checked={checked === 1} />
Expand All @@ -677,15 +713,20 @@ const policy = {
</div>

</div>
<div className="results section advanced-form">
<div className="results section advanced-form" id='sdk-container'>
<div className='advanced-form'>
<div className='container'>
<input type="text" value={tokenString.token}></input>
<button onClick={copyToClipboard} className='container-btn'> Copy token</button>
<div className='container-copy'>
<div className="copy-text">
<input type="text" className="text" value={tokenString.token ?? 'N/A'} disabled />
<button onClick={() => copyToClipboard(tokenString.token)}><i className="fa fa-clone" ></i></button>
</div>
<button onClick={toggleHttpContainer} className='container-btn'>Traffic</button>
</div>
<br/>
<div className="copy-text">
<input type="text" className="text" value={mri ?? 'N/A'} disabled />
<button onClick={() => copyToClipboard(mri)}><i className="fa fa-clone" ></i></button>
</div>
<button onClick={toggleHttpContainer} className='container-btn'> Show/Hide Network Traffic</button>

<p>{ mri }</p>
<p>{ threadInfo }</p>
<hr></hr>
<label>Request status:</label>
Expand All @@ -712,6 +753,12 @@ const policy = {
</Highlight>

</div>
<div className='results section' id='blank-container'>
<div className='loading-container'>
<i className="fas fa-rocket loading-icon"></i>
<p className='loading-text'>Fill up details to get started</p>
</div>
</div>
</div>
<p id='footer'>SDK: 1.5.0, Sgianling: Beta 26, API: 2024-03-07</p>
</>
Expand Down
3 changes: 1 addition & 2 deletions src/components/forms/AdvancedForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ export const AdvancedForm = ({
return (
<Formik
initialValues={getInitialValues(defaultValues, initialValues)}
validationSchema={validationSchema}
onSubmit={onSubmit}
validateOnMount
{...props}
Expand Down Expand Up @@ -101,7 +100,7 @@ export const AdvancedForm = ({
/>
)
})}
<button type="submit" disabled={!isValid || isSubmitting}>
<button type="submit">
{buttonLabel}
</button>
</form>
Expand Down
4 changes: 3 additions & 1 deletion src/components/forms/RadioGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ export const RadioGroup = ({
form,
required,
options,
defaultValue,
...props
}) => {
return (
<FormField id={name} label={label} required={required} formProps={form}>
<FormField id={name} label={label} required={required} formProps={form} defaultValue={defaultValue}>
{options.map((option) => (
<div key={option.value}>
<input
Expand All @@ -19,6 +20,7 @@ export const RadioGroup = ({
value={option.value}
checked={option.value === value}
disabled={option.disabled}
defaultValue={option.value}
{...fieldProps}
{...props}
/>
Expand Down
115 changes: 112 additions & 3 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,10 @@ pre {
opacity: 0.5;
}

h1 {
color: #1a4aa0;
}

#http-response-container {
display: none;
}
Expand All @@ -124,6 +128,11 @@ pre {
margin: 0 auto;
}

.container-copy {
margin: 0 auto;
display: flex;
}

#root {
margin-top: 60px;
}
Expand All @@ -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;
Expand All @@ -150,6 +177,8 @@ pre {
list-style: none;
display: flex;
position: relative;
color: #1a4aa0;
font-weight: 800;
}

.tab-list::before {
Expand All @@ -159,7 +188,7 @@ pre {
width: 50%;
position: absolute;
bottom: 0;
background-color: #aaa;
background-color: #1a4aa0;
transition: .3s;
}

Expand Down Expand Up @@ -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}/*!
Expand All @@ -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}
*/.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;
}
3 changes: 2 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import './index.css'

import App from './App'

console.warn = console.error = () => {};

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
)
)

0 comments on commit 8f0e25d

Please sign in to comment.