lfajardo
/
cloud_bbb
mirror of https://github.com/sualko/cloud_bbb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add copy to clipboard for readonly inputs 

password field and moderator url
pull/120/head
sualko 2021-01-23 12:02:38 +01:00
parent 88a992fa12
commit 24094b6d79
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ts/Manager/App.scss
View File

@ -224,6 +224,12 @@ pre {
background-color: var(--color-success) !important; background-color: var(--color-success) !important;
} }
} }
input.icon-clippy {
background-position: 8px center;
cursor: pointer;
padding-left: 32px;
}
} }
.bbb-form-element { .bbb-form-element {

5
ts/Manager/EditRoomDialog.tsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Access, Room, Permission, RoomShare, api, Restriction } from '../Common/Api'; import { Access, Room, Permission, RoomShare, api, Restriction } from '../Common/Api';
import Dialog from './Dialog'; import Dialog from './Dialog';
import ShareWith from './ShareWith'; import ShareWith from './ShareWith';
@ -80,7 +81,7 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
return <option key={key} value={key}>{label}</option>; return <option key={key} value={key}>{label}</option>;
})} })}
</select> </select>
{(value === Access.Password && room.password) && <input type="text" readOnly={true} value={room.password} />} {(value === Access.Password && room.password) && <CopyToClipboard text={room.password}><input type="text" readOnly={true} className="icon-clippy" value={room.password} /></CopyToClipboard>}
{descriptions[field] && <em>{descriptions[field]}</em>} {descriptions[field] && <em>{descriptions[field]}</em>}
</div> </div>
); );
@ -133,7 +134,7 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
onChange={(event) => updateProperty('moderatorToken', event.target.checked ? 'true' : null)} /> onChange={(event) => updateProperty('moderatorToken', event.target.checked ? 'true' : null)} />
<label htmlFor={`bbb-moderatorToken-${room.id}`}>{t('bbb', 'Moderator access via URL')}</label> <label htmlFor={`bbb-moderatorToken-${room.id}`}>{t('bbb', 'Moderator access via URL')}</label>
</div> </div>
{!!room.moderatorToken && <input type="text" readOnly={true} value={api.getRoomUrl(room, true)} />} {!!room.moderatorToken && <CopyToClipboard text={api.getRoomUrl(room, true)}><input type="text" readOnly={true} className="icon-clippy" value={api.getRoomUrl(room, true)} /></CopyToClipboard>}
<em>{descriptions.moderatorToken}</em> <em>{descriptions.moderatorToken}</em>
</div> </div>