TeaSpeak
/
TeaWeb
1
0
Fork 0
Code Issues 1 Pull Requests Activity

strip foroaccount

localemoji
gapodo 2023-11-20 17:08:45 +01:00
parent 4c5e744f62
commit cbb340aa8d
14 changed files with 478 additions and 1253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
shared/css/static/modal-settings.scss
View File

@ -3,14 +3,15 @@
:global {
.modal-body.modal-settings {
padding: 0!important;
padding: 0 !important;
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
display: flex !important;
flex-direction: column !important;
justify-content: stretch !important;
@include user-select(none);
width: 10000em; /* allocate some space */
width: 10000em;
/* allocate some space */
.inner-container {
flex-grow: 1;
@ -23,7 +24,8 @@
flex-direction: row !important;
justify-content: stretch;
> .left, > .right {
>.left,
>.right {
display: flex;
flex-direction: column;
justify-content: stretch;
@ -38,10 +40,10 @@
.container-seperator {
height: unset !important;
background-color: #222224!important;
background-color: #222224 !important;
}
> .left {
>.left {
width: 25%;
min-width: 10em;
@ -86,7 +88,7 @@
}
}
> .right {
>.right {
width: 75%;
min-width: 12em;
@ -94,7 +96,7 @@
background-color: #2f2f35;
> .container {
>.container {
position: absolute;
top: 0;
bottom: 0;
@ -113,13 +115,15 @@
@include chat-scrollbar-horizontal();
&.general-chat, &.general-application, &.audio-sounds {
&.general-chat,
&.general-application,
&.audio-sounds {
label {
display: flex;
flex-direction: row;
justify-content: flex-start;
> * {
>* {
align-self: center;
}
@ -130,11 +134,11 @@
}
&.general-application {
> div {
>div {
margin-top: .25em;
}
> label:not(:first-child) {
>label:not(:first-child) {
margin-top: 0.25em;
}
@ -168,7 +172,8 @@
flex-direction: row;
justify-content: flex-start;
a, div {
a,
div {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@ -184,7 +189,7 @@
flex-direction: row;
justify-content: flex-start;
> .country {
>.country {
align-self: center;
margin-right: .3em;
}
@ -274,7 +279,7 @@
border-radius: $border_radius_middle;
> div {
>div {
align-self: center;
}
@ -282,7 +287,7 @@
background-color: #3c3d40;
}
> *:not(.spacer) {
>*:not(.spacer) {
flex-grow: 0;
flex-shrink: 1;
}
@ -333,15 +338,21 @@
}
}
&.audio-speaker, &.audio-sounds, &.identity-forum {
&.audio-speaker,
&.audio-sounds,
&.identity-forum {
flex-direction: row;
justify-content: stretch;
.left, .right, .fill {
.left,
.right,
.fill {
flex-grow: 1;
flex-shrink: 1;
width: calc(50% - .5em); /* the .5em for the padding/margin */
width: calc(50% - .5em);
/* the .5em for the padding/margin */
&.fill {
width: calc(100% - 1em);
}
@ -410,7 +421,8 @@
background-color: $color_list_background;
&.container-devices, .container-devices {
&.container-devices,
.container-devices {
flex-grow: 1;
flex-shrink: 1;
@ -451,7 +463,7 @@
border: none;
border-right: 1px solid #242527;
> .icon_em {
>.icon_em {
font-size: 2em;
opacity: 0;
}
@ -530,7 +542,7 @@
&.selected {
.container-selected {
> .icon_em {
>.icon_em {
opacity: 1;
}
@ -540,7 +552,9 @@
border-bottom: 1px solid #242527;
border-top: 1px solid #242527;
}
.container-name, .container-activity {
.container-name,
.container-activity {
margin-top: 0;
margin-bottom: 0;
@ -588,8 +602,10 @@
}
}
.right, .fill {
padding-right: .5em; /* for the sliders etc*/
.right,
.fill {
padding-right: .5em;
/* for the sliders etc*/
justify-content: flex-start;
.body {
@ -628,14 +644,14 @@
flex-direction: column;
justify-content: stretch;
> .container {
>.container {
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
> label {
>label {
flex-shrink: 0;
min-width: 5em;
@ -706,13 +722,14 @@
.container-activity-bar {
.bar-hider {
width: 100%!important;
width: 100% !important;
}
.thumb {
background-color: #4d4d4d!important;
background-color: #4d4d4d !important;
.tooltip {
opacity: 0!important;
opacity: 0 !important;
}
}
}
@ -785,9 +802,9 @@
background-color: transparent;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
@ -1082,11 +1099,13 @@
position: relative;
.left, .right {
.left,
.right {
flex-grow: 1;
flex-shrink: 1;
width: calc(50% - .5em); /* the .5em for the padding/margin */
width: calc(50% - .5em);
/* the .5em for the padding/margin */
display: flex;
flex-direction: column;
@ -1158,16 +1177,17 @@
background-color: #242527;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.75);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.75);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75);
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75);
border-bottom-right-radius: $border_radius_large;
border-top-right-radius: $border_radius_large;
}
&[value] {
overflow: visible; /* for the thumb */
overflow: visible;
/* for the thumb */
border-bottom-left-radius: $border_radius_large;
border-top-left-radius: $border_radius_large;
@ -1212,16 +1232,21 @@
}
}
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#70407e+0,45407e+100 */
background: rgb(112,64,126); /* Old browsers */
background: -moz-linear-gradient(left, rgba(112,64,126,1) 0%, rgba(69,64,126,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(112,64,126,1) 0%,rgba(69,64,126,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(112,64,126,1) 0%,rgba(69,64,126,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70407e', endColorstr='#45407e',GradientType=1 ); /* IE6-9 */
background: rgb(112, 64, 126);
/* Old browsers */
background: -moz-linear-gradient(left, rgba(112, 64, 126, 1) 0%, rgba(69, 64, 126, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(112, 64, 126, 1) 0%, rgba(69, 64, 126, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(112, 64, 126, 1) 0%, rgba(69, 64, 126, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70407e', endColorstr='#45407e', GradientType=1);
/* IE6-9 */
}
.left {
@ -1245,7 +1270,8 @@
background-color: $color_list_background;
&.container-devices, .container-devices {
&.container-devices,
.container-devices {
flex-grow: 1;
flex-shrink: 1;
@ -1288,7 +1314,7 @@
border: none;
border-right: 1px solid #242527;
> * {
>* {
padding: .5em;
position: absolute;
@ -1300,21 +1326,21 @@
margin: auto;
}
> .icon_em {
>.icon_em {
font-size: 2em;
opacity: 0;
}
> .icon-loading {
>.icon-loading {
opacity: 0;
img {
max-height: 100%;
max-width: 100%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
}
}
@ -1392,7 +1418,7 @@
&.selected {
.container-selected {
> .icon_em {
>.icon_em {
opacity: 1;
}
@ -1402,7 +1428,9 @@
border-bottom: 1px solid #242527;
border-top: 1px solid #242527;
}
.container-name, .container-activity {
.container-name,
.container-activity {
margin-top: 0;
margin-bottom: 0;
@ -1480,7 +1508,8 @@
}
.right {
padding-right: .5em; /* for the sliders etc*/
padding-right: .5em;
/* for the sliders etc*/
justify-content: flex-start;
.body {
@ -1519,14 +1548,14 @@
flex-direction: column;
justify-content: stretch;
> .container {
>.container {
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
> label {
>label {
flex-shrink: 0;
min-width: 5em;
@ -1597,13 +1626,14 @@
.container-activity-bar {
.bar-hider {
width: 100%!important;
width: 100% !important;
}
.thumb {
background-color: #4d4d4d!important;
background-color: #4d4d4d !important;
.tooltip {
opacity: 0!important;
opacity: 0 !important;
}
}
}
@ -1676,9 +1706,9 @@
background-color: transparent;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
@ -1731,7 +1761,8 @@
position: relative;
.left, .right {
.left,
.right {
flex-grow: 1;
flex-shrink: 1;
@ -1902,11 +1933,13 @@
text-overflow: ellipsis;
white-space: nowrap;
> *:not(:first-of-type) {
>*:not(:first-of-type) {
margin-left: .25em;
}
.icon-status {
margin-bottom: .2em; /* push it a bit higher than the center */
margin-bottom: .2em;
/* push it a bit higher than the center */
}
div {
@ -1934,7 +1967,8 @@
}
}
.buttons, .buttons-small {
.buttons,
.buttons-small {
flex-grow: 0;
flex-shrink: 0;
@ -1977,7 +2011,8 @@
}
.right {
padding-right: .5em; /* for the sliders etc*/
padding-right: .5em;
/* for the sliders etc*/
justify-content: flex-start;
.body {
@ -1988,7 +2023,7 @@
flex-direction: column;
justify-content: stretch;
> div {
>div {
flex-shrink: 0;
}
@ -1997,6 +2032,7 @@
padding: 1em;
text-align: center;
}
.container-valid {
.container-level {
display: flex;
@ -2023,7 +2059,7 @@
flex-direction: row;
justify-content: space-between;
> div {
>div {
text-align: right;
width: max-content;
@ -2042,17 +2078,6 @@
}
}
.container-teaforo {
.container-valid, .container-invalid {
padding: 1em;
text-align: center;
button {
margin-top: .5em;
}
}
}
.container-highlight-dummy {
margin-top: 1em;
margin-bottom: .5em;
@ -2065,9 +2090,11 @@
}
/* the highlight stuff for the newcommer modal */
.container-settings-identity-profile, .container-settings-audio-microphone {
.container-settings-identity-profile,
.container-settings-audio-microphone {
$highlight-time: .5s;
$backdrop-color: rgba(0, 0, 0, .9);
.help-background {
position: absolute;
@ -2164,12 +2191,13 @@
}
}
.container-teamspeak, .container-teaforo, .container-nickname {
.container-teamspeak,
.container-nickname {
display: none;
}
.container-highlight-dummy {
display: flex!important;
display: flex !important;
}
&.hide-help {
@ -2195,17 +2223,32 @@
:global {
.container-settings-identity-profile {
.buttons {
display: flex!important;
display: flex !important;
}
.buttons-small {
display: none!important;
display: none !important;
}
}
}
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

85
shared/html/templates.html
View File

@ -1,12 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TeaSpeak-Web client templates</title>
</head>
<body>
<div class="template-group-modals">
<script class="jsrender-template" id="tmpl_modal" type="text/html">
<head>
<meta charset="UTF-8">
<title>TeaSpeak-Web client templates</title>
</head>
<body>
<div class="template-group-modals">
<script class="jsrender-template" id="tmpl_modal" type="text/html">
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content" style="{{if full_size}}flex-grow: 1{{/if}}">
@ -32,7 +34,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_modal_input" type="text/html">
<script class="jsrender-template" id="tmpl_modal_input" type="text/html">
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
@ -82,10 +84,10 @@
</div>
</div>
</script>
</div>
</div>
<!-- Template for the settings -->
<script class="jsrender-template" id="tmpl_settings" type="text/html">
<!-- Template for the settings -->
<script class="jsrender-template" id="tmpl_settings" type="text/html">
<div class="inner-container">
<div class="left">
<div class="entry group">{{tr "General Settings" /}}</div>
@ -103,7 +105,6 @@
<div class="entry group">{{tr "Identity" /}}</div>
<div class="entry" container="identity-profiles">{{tr "Profiles" /}}</div>
<div class="entry" container="identity-forum">{{tr "TeaForo connection" /}}</div>
</div>
<div class="container-seperator vertical" seperator-id="seperator-settings"></div>
<div class="right">
@ -360,7 +361,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_settings-profiles" type="text/html">
<script class="jsrender-template" id="tmpl_settings-profiles" type="text/html">
<div class="container-settings-identity-profile">
<div class="left highlight-profile-list highlightable">
<div class="header">
@ -417,7 +418,6 @@
<select class="form-control profile-identity-type">
<option value="error" style="display: none">error: error</option>
<option value="unset" style="display: none">{{tr "Unset" /}}</option>
<option value="teaforo">{{tr "Forum Account" /}}</option>
<option value="teamspeak">{{tr "TeamSpeak Identity" /}}</option>
<option value="nickname">{{tr "Nickname (Debug only!)" /}}</option>
</select>
@ -453,16 +453,6 @@
</div>
</div>
</div>
<div class="container-teaforo">
<div class="container-valid">
{{tr "You're using your forum account as identification" /}}
</div>
<div class="container-invalid">
<a>{{tr "You cant use your TeaSpeak forum account. You're not connected with your forum Account!" /}}</a>
<button class="btn btn-success button-setup">{{tr "Setup your connection" /}}
</button>
</div>
</div>
<div class="container-nickname">
<div class="form-group">
<label>{{tr "Nickname" /}}</label>
@ -482,7 +472,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_settings-sound_entry" type="text/html">
<script class="jsrender-template" id="tmpl_settings-sound_entry" type="text/html">
<div class="entry">
<div class="column sound-name">
<div class="icon client-play button-playback"></div>
@ -498,7 +488,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_settings-teamspeak_import" type="text/html">
<script class="jsrender-template" id="tmpl_settings-teamspeak_import" type="text/html">
<div>
<div class="container-status"><a></a></div>
<fieldset class="">
@ -534,7 +524,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_settings-teamspeak_improve" type="text/html">
<script class="jsrender-template" id="tmpl_settings-teamspeak_improve" type="text/html">
<div>
<div class="options">
<div class="title">{{tr "Identity: "/}} {{>identity_name}}</div>
@ -597,7 +587,7 @@
</div>
</script>
<script class="jsrender-template" id="settings-profile-list-entry" type="text/html">
<script class="jsrender-template" id="settings-profile-list-entry" type="text/html">
<div class="entry profile {{if id == 'default'}}default{{/if}}">
<div class="name">{{>profile_name}}</div>
<!-- <div class="button button-delete"><div class="icon client-delete"></div></div> -->
@ -606,7 +596,7 @@
</div>
</script>
<script class="jsrender-template" id="settings-translations-list-entry" type="text/html">
<script class="jsrender-template" id="settings-translations-list-entry" type="text/html">
{{if type == "repository" }}
<div class="entry repository" repository="{{:id}}">
<div class="name">{{> name}}</div>
@ -634,7 +624,7 @@
{{/if}}
</script>
<script class="jsrender-template" id="settings-translations-list-entry-info" type="text/html">
<script class="jsrender-template" id="settings-translations-list-entry-info" type="text/html">
<div class="entry-info-container">
{{if type == "repository" }}
<!--
@ -713,7 +703,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_change_latency" type="text/html">
<script class="jsrender-template" id="tmpl_change_latency" type="text/html">
<div> <!-- for the renderer -->
<div class="info">
<div>{{tr "Change latency for client "/}} <node key="client"></node></div>
@ -758,7 +748,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_server_edit" type="text/html">
<script class="jsrender-template" id="tmpl_server_edit" type="text/html">
<div> <!-- Only for rendering -->
<div class="container-general">
<div class="container-name-icon">
@ -1354,8 +1344,8 @@
</div>
</script>
<!-- General management templates -->
<script class="jsrender-template" id="tmpl_ban_list" type="text/html">
<!-- General management templates -->
<script class="jsrender-template" id="tmpl_ban_list" type="text/html">
<div> <!-- required for jquery -->
<div class="left">
<div class="head">
@ -1641,7 +1631,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_client_ban" type="text/html">
<script class="jsrender-template" id="tmpl_client_ban" type="text/html">
<div> <!-- for the renderer -->
<div class="container-info">
<div class="container container-name">
@ -1724,7 +1714,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_query_create" type="text/html">
<script class="jsrender-template" id="tmpl_query_create" type="text/html">
<div class="query-create">
<a>{{tr "Set the login name for your Server Query account." /}}</a>
<a>{{tr "You'll receive your password within the next step." /}}</a>
@ -1738,7 +1728,7 @@
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_query_created" type="text/html">
<script class="jsrender-template" id="tmpl_query_created" type="text/html">
<div class="query-created">
<a>{{tr "Your server query credentials:" /}}</a>
<div class="form-row">
@ -1763,7 +1753,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_query_manager" type="text/html">
<script class="jsrender-template" id="tmpl_query_manager" type="text/html">
<div class="container"> <!-- required for the seperator -->
<div class="left">
<div class="title">
@ -1823,7 +1813,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_avatar_list" type="text/html">
<script class="jsrender-template" id="tmpl_avatar_list" type="text/html">
<div class="modal-avatar-list">
<div class="container-list">
<div class="list-header">
@ -1885,7 +1875,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_avatar_list-list_entry" type="text/html">
<script class="jsrender-template" id="tmpl_avatar_list-list_entry" type="text/html">
<div class="entry">
<div class="column column-username">{{>username}}</div>
<div class="column column-unique-id">{{>unique_id}}</div>
@ -1894,7 +1884,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_key_select" type="text/html">
<script class="jsrender-template" id="tmpl_key_select" type="text/html">
<div> <!-- required for the renderer-->
<div class="body">
<a>{{tr "Press any key which you want to use." /}}</a>
@ -1912,7 +1902,7 @@
</div>
</script>
<script class="jsrender-template" id="tmpl_client_info" type="text/html">
<script class="jsrender-template" id="tmpl_client_info" type="text/html">
<div> <!-- Important for the renderer -->
<div class="head">
<div class="status-row">
@ -1970,14 +1960,6 @@
</div>
</div>
</div>
<div class="property property-teaforo">
<div class="title">
<a>{{tr "TeaForo Connection" /}}</a>
</div>
<div class="value">
<a>This will be a really long string...</a>
</div>
</div>
<div class="property property-version">
<div class="title">
<a>{{tr "Version" /}}</a>
@ -2169,5 +2151,6 @@
</div>
</div>
</script>
</body>
</body>
</html>

57
shared/js/SelectedClientInfo.ts
View File

@ -1,12 +1,12 @@
import {ConnectionHandler, ConnectionState} from "tc-shared/ConnectionHandler";
import { ConnectionHandler, ConnectionState } from "tc-shared/ConnectionHandler";
import {
ClientForumInfo,
ClientInfoType,
ClientStatusInfo,
ClientVersionInfo
} from "tc-shared/ui/frames/side/ClientInfoDefinitions";
import {ClientEntry, ClientType, LocalClientEntry} from "tc-shared/tree/Client";
import {Registry} from "tc-shared/events";
import { ClientEntry, ClientType, LocalClientEntry } from "tc-shared/tree/Client";
import { Registry } from "tc-shared/events";
import * as i18nc from "./i18n/CountryFlag";
export type CachedClientInfoCategory = "name" | "description" | "online-state" | "country" | "volume" | "status" | "forum-account" | "group-channel" | "groups-server" | "version";
@ -55,7 +55,7 @@ export class SelectedClientInfo {
this.listenerClient = [];
this.listenerConnection = [];
this.listenerConnection.push(connection.channelTree.events.on("notify_client_leave_view", event => {
if(event.client !== this.currentClient) {
if (event.client !== this.currentClient) {
return;
}
@ -67,7 +67,7 @@ export class SelectedClientInfo {
}));
this.listenerConnection.push(connection.events().on("notify_connection_state_changed", event => {
if(event.newState !== ConnectionState.CONNECTED && this.currentClientStatus) {
if (event.newState !== ConnectionState.CONNECTED && this.currentClientStatus) {
this.currentClient = undefined;
this.currentClientStatus.leaveTimestamp = Date.now() / 1000;
this.events.fire("notify_cache_changed", { category: "online-state" });
@ -82,23 +82,23 @@ export class SelectedClientInfo {
this.unregisterClientEvents();
}
getInfo() : CachedClientInfo {
getInfo(): CachedClientInfo {
return this.currentClientStatus;
}
setClient(client: ClientEntry | undefined) {
if(this.currentClient === client) {
if (this.currentClient === client) {
return;
}
if(client.channelTree.client !== this.connection) {
if (client.channelTree.client !== this.connection) {
throw tr("client does not belong to current connection handler");
}
this.unregisterClientEvents();
this.currentClient = client;
this.currentClientStatus = undefined;
if(this.currentClient) {
if (this.currentClient) {
this.currentClient.updateClientVariables().then(undefined);
this.registerClientEvents(this.currentClient);
this.initializeClientInfo(this.currentClient);
@ -107,7 +107,7 @@ export class SelectedClientInfo {
this.events.fire("notify_client_changed", { newClient: client });
}
getClient() : ClientEntry | undefined {
getClient(): ClientEntry | undefined {
return this.currentClient;
}
@ -120,57 +120,52 @@ export class SelectedClientInfo {
const events = this.listenerClient;
events.push(client.events.on("notify_properties_updated", event => {
if('client_nickname' in event.updated_properties) {
if ('client_nickname' in event.updated_properties) {
this.currentClientStatus.name = event.client_properties.client_nickname;
this.events.fire("notify_cache_changed", { category: "name" });
}
if('client_description' in event.updated_properties) {
if ('client_description' in event.updated_properties) {
this.currentClientStatus.description = event.client_properties.client_description;
this.events.fire("notify_cache_changed", { category: "description" });
}
if('client_channel_group_id' in event.updated_properties || 'client_channel_group_inherited_channel_id' in event.updated_properties) {
if ('client_channel_group_id' in event.updated_properties || 'client_channel_group_inherited_channel_id' in event.updated_properties) {
this.updateChannelGroup(client);
this.events.fire("notify_cache_changed", { category: "group-channel" });
}
if('client_servergroups' in event.updated_properties) {
if ('client_servergroups' in event.updated_properties) {
this.currentClientStatus.serverGroups = client.assignedServerGroupIds();
this.events.fire("notify_cache_changed", { category: "groups-server" });
}
/* Can happen since that variable isn't in view on client appearance */
if('client_lastconnected' in event.updated_properties) {
if ('client_lastconnected' in event.updated_properties) {
this.currentClientStatus.joinTimestamp = event.client_properties.client_lastconnected;
this.events.fire("notify_cache_changed", { category: "online-state" });
}
if('client_country' in event.updated_properties) {
if ('client_country' in event.updated_properties) {
this.updateCachedCountry(client);
this.events.fire("notify_cache_changed", { category: "country" });
}
for(const key of ["client_away", "client_away_message", "client_input_muted", "client_input_hardware", "client_output_muted", "client_output_hardware"]) {
if(key in event.updated_properties) {
for (const key of ["client_away", "client_away_message", "client_input_muted", "client_input_hardware", "client_output_muted", "client_output_hardware"]) {
if (key in event.updated_properties) {
this.updateCachedClientStatus(client);
this.events.fire("notify_cache_changed", { category: "status" });
break;
}
}
if('client_platform' in event.updated_properties || 'client_version' in event.updated_properties) {
if ('client_platform' in event.updated_properties || 'client_version' in event.updated_properties) {
this.currentClientStatus.version = {
platform: client.properties.client_platform,
version: client.properties.client_version
};
this.events.fire("notify_cache_changed", { category: "version" });
}
if('client_teaforo_flags' in event.updated_properties || 'client_teaforo_name' in event.updated_properties || 'client_teaforo_id' in event.updated_properties) {
this.updateForumAccount(client);
this.events.fire("notify_cache_changed", { category: "forum-account" });
}
}));
events.push(client.events.on("notify_audio_level_changed", () => {
@ -209,22 +204,11 @@ export class SelectedClientInfo {
}
}
private updateForumAccount(client: ClientEntry) {
if(client.properties.client_teaforo_id) {
this.currentClientStatus.forumAccount = {
flags: client.properties.client_teaforo_flags,
nickname: client.properties.client_teaforo_name,
userId: client.properties.client_teaforo_id
};
} else {
this.currentClientStatus.forumAccount = undefined;
}
}
private updateChannelGroup(client: ClientEntry) {
this.currentClientStatus.channelGroup = client.properties.client_channel_group_id;
this.currentClientStatus.channelGroupInheritedChannel = client.properties.client_channel_group_inherited_channel_id;
if(this.currentClientStatus.channelGroupInheritedChannel === client.currentChannel().channelId) {
if (this.currentClientStatus.channelGroupInheritedChannel === client.currentChannel().channelId) {
this.currentClientStatus.channelGroupInheritedChannel = 0;
}
}
@ -259,6 +243,5 @@ export class SelectedClientInfo {
this.updateCachedClientStatus(client);
this.updateCachedCountry(client);
this.updateCachedVolume(client);
this.updateForumAccount(client);
}
}

181
shared/js/main.tsx
View File

@ -1,31 +1,30 @@
import * as loader from "tc-loader";
import {initializeI18N, tra} from "./i18n/localize";
import * as fidentity from "./profiles/identities/TeaForumIdentity";
import { initializeI18N, tra } from "./i18n/localize";
import * as global_ev_handler from "./events/ClientGlobalControlHandler";
import {AppParameters, settings, Settings, UrlParameterBuilder, UrlParameterParser} from "tc-shared/settings";
import {LogCategory, logDebug, logError, logInfo, logWarn} from "tc-shared/log";
import {ConnectionHandler} from "tc-shared/ConnectionHandler";
import {createErrorModal, createInfoModal} from "tc-shared/ui/elements/Modal";
import {RecorderProfile, setDefaultRecorder} from "tc-shared/voice/RecorderProfile";
import {formatMessage} from "tc-shared/ui/frames/chat";
import {openModalNewcomer} from "tc-shared/ui/modal/ModalNewcomer";
import {global_client_actions} from "tc-shared/events/GlobalEvents";
import {MenuEntryType, spawn_context_menu} from "tc-shared/ui/elements/ContextMenu";
import {copyToClipboard} from "tc-shared/utils/helpers";
import {checkForUpdatedApp} from "tc-shared/update";
import {setupJSRender} from "tc-shared/ui/jsrender";
import {ConnectRequestData} from "tc-shared/ipc/ConnectHandler";
import {defaultConnectProfile, findConnectProfile} from "tc-shared/profiles/ConnectionProfile";
import {server_connections} from "tc-shared/ConnectionManager";
import {spawnConnectModalNew} from "tc-shared/ui/modal/connect/Controller";
import {initializeKeyControl} from "./KeyControl";
import {assertMainApplication} from "tc-shared/ui/utils";
import {clientServiceInvite} from "tc-shared/clientservice";
import {ActionResult} from "tc-services";
import {CommandResult} from "tc-shared/connection/ServerConnectionDeclaration";
import {ErrorCode} from "tc-shared/connection/ErrorCode";
import {bookmarks} from "tc-shared/Bookmarks";
import {getAudioBackend, OutputDevice} from "tc-shared/audio/Player";
import { AppParameters, settings, Settings, UrlParameterBuilder, UrlParameterParser } from "tc-shared/settings";
import { LogCategory, logDebug, logError, logInfo, logWarn } from "tc-shared/log";
import { ConnectionHandler } from "tc-shared/ConnectionHandler";
import { createErrorModal, createInfoModal } from "tc-shared/ui/elements/Modal";
import { RecorderProfile, setDefaultRecorder } from "tc-shared/voice/RecorderProfile";
import { formatMessage } from "tc-shared/ui/frames/chat";
import { openModalNewcomer } from "tc-shared/ui/modal/ModalNewcomer";
import { global_client_actions } from "tc-shared/events/GlobalEvents";
import { MenuEntryType, spawn_context_menu } from "tc-shared/ui/elements/ContextMenu";
import { copyToClipboard } from "tc-shared/utils/helpers";
import { checkForUpdatedApp } from "tc-shared/update";
import { setupJSRender } from "tc-shared/ui/jsrender";
import { ConnectRequestData } from "tc-shared/ipc/ConnectHandler";
import { defaultConnectProfile, findConnectProfile } from "tc-shared/profiles/ConnectionProfile";
import { server_connections } from "tc-shared/ConnectionManager";
import { spawnConnectModalNew } from "tc-shared/ui/modal/connect/Controller";
import { initializeKeyControl } from "./KeyControl";
import { assertMainApplication } from "tc-shared/ui/utils";
import { clientServiceInvite } from "tc-shared/clientservice";
import { ActionResult } from "tc-services";
import { CommandResult } from "tc-shared/connection/ServerConnectionDeclaration";
import { ErrorCode } from "tc-shared/connection/ErrorCode";
import { bookmarks } from "tc-shared/Bookmarks";
import { getAudioBackend, OutputDevice } from "tc-shared/audio/Player";
/* required import for init */
import "svg-sprites/client-icons";
@ -50,9 +49,9 @@ import "./ui/elements/Tab";
import "./clientservice";
import "./text/bbcode/InviteController";
import "./text/bbcode/YoutubeController";
import {initializeSounds, setSoundMasterVolume} from "./audio/Sounds";
import {getInstanceConnectHandler, setupIpcHandler} from "./ipc/BrowserIPC";
import {promptYesNo} from "tc-shared/ui/modal/yes-no/Controller";
import { initializeSounds, setSoundMasterVolume } from "./audio/Sounds";
import { getInstanceConnectHandler, setupIpcHandler } from "./ipc/BrowserIPC";
import { promptYesNo } from "tc-shared/ui/modal/yes-no/Controller";
assertMainApplication();
@ -60,7 +59,7 @@ let preventWelcomeUI = false;
async function initialize() {
try {
await initializeI18N();
} catch(error) {
} catch (error) {
console.error(tr("Failed to initialized the translation system!\nError: %o"), error);
loader.critical_error("Failed to setup the translation system");
return;
@ -75,13 +74,13 @@ async function initializeApp() {
getAudioBackend().executeWhenInitialized(() => {
const defaultDeviceId = getAudioBackend().getDefaultDeviceId();
let targetDeviceId = settings.getValue(Settings.KEY_SPEAKER_DEVICE_ID, OutputDevice.DefaultDeviceId);
if(targetDeviceId === OutputDevice.DefaultDeviceId) {
if (targetDeviceId === OutputDevice.DefaultDeviceId) {
targetDeviceId = defaultDeviceId;
}
getAudioBackend().setCurrentDevice(targetDeviceId).catch(error => {
logWarn(LogCategory.AUDIO, tr("Failed to set last used output speaker device: %o"), error);
if(targetDeviceId !== defaultDeviceId) {
if (targetDeviceId !== defaultDeviceId) {
getAudioBackend().setCurrentDevice(defaultDeviceId).catch(error => {
logError(LogCategory.AUDIO, tr("Failed to set output device to default device: %o"), error);
createErrorModal(tr("Failed to initialize output device"), tr("Failed to initialize output device.")).open();
@ -108,10 +107,10 @@ async function initializeApp() {
/* The native client has received a connect request. */
export function handleNativeConnectRequest(url: URL) {
let serverAddress = url.host;
if(url.searchParams.has("port")) {
if(serverAddress.indexOf(':') !== -1) {
if (url.searchParams.has("port")) {
if (serverAddress.indexOf(':') !== -1) {
logWarn(LogCategory.GENERAL, tr("Received connect request which specified the port twice (via parameter and host). Using host port."));
} else if(serverAddress.indexOf(":") === -1) {
} else if (serverAddress.indexOf(":") === -1) {
serverAddress += ":" + url.searchParams.get("port");
} else {
serverAddress = `[${serverAddress}]:${url.searchParams.get("port")}`;
@ -125,16 +124,16 @@ export async function handleConnectRequest(serverAddress: string, serverUniqueId
const inviteLinkId = parameters.getValue(AppParameters.KEY_CONNECT_INVITE_REFERENCE, undefined);
logDebug(LogCategory.STATISTICS, tr("Executing connect request with invite key reference: %o"), inviteLinkId);
if(inviteLinkId) {
if (inviteLinkId) {
clientServiceInvite.logAction(inviteLinkId, "ConnectAttempt").then(result => {
if(result.status !== "success") {
if (result.status !== "success") {
logWarn(LogCategory.STATISTICS, tr("Failed to register connect attempt: %o"), result.result);
}
});
}
const result = await doHandleConnectRequest(serverAddress, serverUniqueId, parameters);
if(inviteLinkId) {
if (inviteLinkId) {
let promise: Promise<ActionResult<void>>;
switch (result.status) {
case "success":
@ -152,7 +151,7 @@ export async function handleConnectRequest(serverAddress: string, serverUniqueId
}
promise.then(result => {
if(result.status !== "success") {
if (result.status !== "success") {
logWarn(LogCategory.STATISTICS, tr("Failed to register connect result: %o"), result.result);
}
});
@ -161,14 +160,14 @@ export async function handleConnectRequest(serverAddress: string, serverUniqueId
type ConnectRequestResult = {
status:
"success" |
"profile-invalid" |
"client-aborted" |
"server-join-failed" |
"server-already-joined" |
"channel-already-joined" |
"channel-not-visible" |
"channel-join-failed"
"success" |
"profile-invalid" |
"client-aborted" |
"server-join-failed" |
"server-already-joined" |
"channel-already-joined" |
"channel-not-visible" |
"channel-join-failed"
}
/**
@ -176,12 +175,12 @@ type ConnectRequestResult = {
* @param serverUniqueId If given a server unique id. If any of our current connections matches it, such connection will be used
* @param parameters General connect parameters from the connect URL
*/
async function doHandleConnectRequest(serverAddress: string, serverUniqueId: string | undefined, parameters: UrlParameterParser) : Promise<ConnectRequestResult> {
async function doHandleConnectRequest(serverAddress: string, serverUniqueId: string | undefined, parameters: UrlParameterParser): Promise<ConnectRequestResult> {
let targetServerConnection: ConnectionHandler;
let isCurrentServerConnection: boolean;
if(serverUniqueId) {
if(server_connections.getActiveConnectionHandler()?.getCurrentServerUniqueId() === serverUniqueId) {
if (serverUniqueId) {
if (server_connections.getActiveConnectionHandler()?.getCurrentServerUniqueId() === serverUniqueId) {
targetServerConnection = server_connections.getActiveConnectionHandler();
isCurrentServerConnection = true;
} else {
@ -193,7 +192,7 @@ async function doHandleConnectRequest(serverAddress: string, serverUniqueId: str
const profileId = parameters.getValue(AppParameters.KEY_CONNECT_PROFILE, undefined);
const profile = findConnectProfile(profileId) || targetServerConnection?.serverConnection.handshake_handler()?.parameters.profile || defaultConnectProfile();
if(!profile || !profile.valid()) {
if (!profile || !profile.valid()) {
spawnConnectModalNew({
selectedAddress: serverAddress,
selectedProfile: profile
@ -201,14 +200,14 @@ async function doHandleConnectRequest(serverAddress: string, serverUniqueId: str
return { status: "profile-invalid" };
}
if(!getAudioBackend().isInitialized()) {
if (!getAudioBackend().isInitialized()) {
/* Trick the client into clicking somewhere on the site to initialize audio */
const result = await promptYesNo({
title: tra("Connect to {}", serverAddress),
question: tra("Would you like to connect to {}?", serverAddress)
});
if(!result) {
if (!result) {
/* Well... the client don't want to... */
return { status: "client-aborted" };
}
@ -226,30 +225,30 @@ async function doHandleConnectRequest(serverAddress: string, serverUniqueId: str
const connectToken = parameters.getValue(AppParameters.KEY_CONNECT_TOKEN, undefined);
if(!targetServerConnection) {
if (!targetServerConnection) {
targetServerConnection = server_connections.getActiveConnectionHandler();
if(targetServerConnection.connected) {
if (targetServerConnection.connected) {
targetServerConnection = server_connections.spawnConnectionHandler();
}
}
server_connections.setActiveConnectionHandler(targetServerConnection);
if(targetServerConnection.getCurrentServerUniqueId() === serverUniqueId) {
if (targetServerConnection.getCurrentServerUniqueId() === serverUniqueId) {
/* Just join the new channel and may use the token (before) */
if(connectToken) {
if (connectToken) {
try {
await targetServerConnection.serverConnection.send_command("tokenuse", { token: connectToken }, { process_result: false });
} catch (error) {
if(error instanceof CommandResult) {
if(error.id === ErrorCode.TOKEN_INVALID_ID) {
targetServerConnection.log.log("error.custom", { message: tr("Try to use invite key token but the token is invalid.")});
} else if(error.id == ErrorCode.TOKEN_EXPIRED) {
targetServerConnection.log.log("error.custom", { message: tr("Try to use invite key token but the token is expired.")});
} else if(error.id === ErrorCode.TOKEN_USE_LIMIT_EXCEEDED) {
targetServerConnection.log.log("error.custom", { message: tr("Try to use invite key token but the token has been used too many times.")});
if (error instanceof CommandResult) {
if (error.id === ErrorCode.TOKEN_INVALID_ID) {
targetServerConnection.log.log("error.custom", { message: tr("Try to use invite key token but the token is invalid.") });
} else if (error.id == ErrorCode.TOKEN_EXPIRED) {
targetServerConnection.log.log("error.custom", { message: tr("Try to use invite key token but the token is expired.") });
} else if (error.id === ErrorCode.TOKEN_USE_LIMIT_EXCEEDED) {
targetServerConnection.log.log("error.custom", { message: tr("Try to use invite key token but the token has been used too many times.") });
} else {
targetServerConnection.log.log("error.custom", { message: tra("Try to use invite key token but an error occurred: {}", error.formattedMessage())});
targetServerConnection.log.log("error.custom", { message: tra("Try to use invite key token but an error occurred: {}", error.formattedMessage()) });
}
} else {
logError(LogCategory.GENERAL, tr("Failed to use token: {}"), error);
@ -257,9 +256,9 @@ async function doHandleConnectRequest(serverAddress: string, serverUniqueId: str
}
}
if(!channel) {
if (!channel) {
/* No need to join any channel */
if(!connectToken) {
if (!connectToken) {
createInfoModal(tr("Already connected"), tr("You're already connected to the target server.")).open();
} else {
/* Don't show a message since a token has been used */
@ -269,19 +268,19 @@ async function doHandleConnectRequest(serverAddress: string, serverUniqueId: str
}
const targetChannel = targetServerConnection.channelTree.resolveChannelPath(channel);
if(!targetChannel) {
if (!targetChannel) {
createErrorModal(tr("Missing target channel"), tr("Failed to join channel since it is not visible.")).open();
return { status: "channel-not-visible" };
}
if(targetServerConnection.getClient().currentChannel() === targetChannel) {
if (targetServerConnection.getClient().currentChannel() === targetChannel) {
createErrorModal(tr("Channel already joined"), tr("You already joined the channel.")).open();
return { status: "channel-already-joined" };
}
if(targetChannel.getCachedPasswordHash()) {
if (targetChannel.getCachedPasswordHash()) {
const succeeded = await targetChannel.joinChannel();
if(succeeded) {
if (succeeded) {
/* Successfully joined channel with a password we already knew */
return { status: "success" };
}
@ -289,7 +288,7 @@ async function doHandleConnectRequest(serverAddress: string, serverUniqueId: str
targetChannel.setCachedHashedPassword(channelPassword);
/* Force join the channel. Either we have the password, can ignore the password or we don't want to join. */
if(await targetChannel.joinChannel(true)) {
if (await targetChannel.joinChannel(true)) {
return { status: "success" };
} else {
/* TODO: More detail? */
@ -313,7 +312,7 @@ async function doHandleConnectRequest(serverAddress: string, serverUniqueId: str
defaultChannelPasswordHashed: passwordsHashed
}, false);
if(targetServerConnection.connected) {
if (targetServerConnection.connected) {
return { status: "success" };
} else {
/* TODO: More detail? */
@ -348,13 +347,13 @@ function main() {
/* context menu prevent */
document.addEventListener("contextmenu", event => {
if(event.defaultPrevented) {
if (event.defaultPrevented) {
return;
}
if(event.target instanceof HTMLInputElement) {
if (event.target instanceof HTMLInputElement) {
const target = event.target;
if((!!event.target.value || __build.target === "client") && !event.target.disabled && !event.target.readOnly && event.target.type !== "number") {
if ((!!event.target.value || __build.target === "client") && !event.target.disabled && !event.target.readOnly && event.target.type !== "number") {
spawn_context_menu(event.pageX, event.pageY, {
type: MenuEntryType.ENTRY,
name: tr("Copy"),
@ -377,7 +376,7 @@ function main() {
return;
}
if(settings.getValue(Settings.KEY_DISABLE_GLOBAL_CONTEXT_MENU)) {
if (settings.getValue(Settings.KEY_DISABLE_GLOBAL_CONTEXT_MENU)) {
event.preventDefault();
}
});
@ -385,15 +384,13 @@ function main() {
const initialHandler = server_connections.spawnConnectionHandler();
server_connections.setActiveConnectionHandler(initialHandler);
initialHandler.acquireInputHardware().then(() => {});
initialHandler.acquireInputHardware().then(() => { });
/** Setup the XF forum identity **/
fidentity.update_forum();
initializeKeyControl();
checkForUpdatedApp();
if(settings.getValue(Settings.KEY_USER_IS_NEW) && !preventWelcomeUI) {
if (settings.getValue(Settings.KEY_USER_IS_NEW) && !preventWelcomeUI) {
const modal = openModalNewcomer();
modal.close_listener.push(() => settings.setValue(Settings.KEY_USER_IS_NEW, false));
}
@ -408,7 +405,7 @@ const task_teaweb_starter: loader.Task = {
loader.config.abortAnimationOnFinish = settings.getValue(Settings.KEY_LOADER_ANIMATION_ABORT);
} catch (ex) {
console.error(ex.stack);
if(ex instanceof ReferenceError || ex instanceof TypeError) {
if (ex instanceof ReferenceError || ex instanceof TypeError) {
ex = ex.name + ": " + ex.message;
}
loader.critical_error("Failed to invoke main function:<br>" + ex);
@ -421,7 +418,7 @@ const task_connect_handler: loader.Task = {
name: "Connect handler",
function: async () => {
const address = AppParameters.getValue(AppParameters.KEY_CONNECT_ADDRESS, undefined);
if(typeof address === "undefined") {
if (typeof address === "undefined") {
loader.register_task(loader.Stage.LOADED, task_teaweb_starter);
return;
}
@ -440,7 +437,7 @@ const task_connect_handler: loader.Task = {
};
const chandler = getInstanceConnectHandler();
if(chandler && AppParameters.getValue(AppParameters.KEY_CONNECT_NO_SINGLE_INSTANCE)) {
if (chandler && AppParameters.getValue(AppParameters.KEY_CONNECT_NO_SINGLE_INSTANCE)) {
try {
await chandler.post_connect_request(connectData, async () => {
return await promptYesNo({
@ -459,11 +456,11 @@ const task_connect_handler: loader.Task = {
}
).open();
return;
} catch(error) {
} catch (error) {
logInfo(LogCategory.CLIENT, tr("Failed to execute connect within other TeaWeb instance. Using this one. Error: %o"), error);
}
if(chandler) {
if (chandler) {
/* no instance avail, so lets make us avail */
chandler.callback_available = () => {
return !settings.getValue(Settings.KEY_DISABLE_MULTI_SESSION);
@ -497,7 +494,7 @@ loader.register_task(loader.Stage.JAVASCRIPT_INITIALIZING, {
name: "jrendere initialize",
function: async () => {
try {
if(!setupJSRender())
if (!setupJSRender())
throw "invalid load";
} catch (error) {
loader.critical_error(tr("Failed to setup jsrender"));
@ -514,17 +511,17 @@ loader.register_task(loader.Stage.JAVASCRIPT_INITIALIZING, {
try {
await initialize();
if(__build.target == "web") {
if (__build.target == "web") {
loader.register_task(loader.Stage.LOADED, task_connect_handler);
} else {
loader.register_task(loader.Stage.LOADED, task_teaweb_starter);
}
} catch (ex) {
if(ex instanceof Error || typeof(ex.stack) !== "undefined") {
if (ex instanceof Error || typeof (ex.stack) !== "undefined") {
console.error((tr || (msg => msg))("Critical error stack trace: %o"), ex.stack);
}
if(ex instanceof ReferenceError || ex instanceof TypeError) {
if (ex instanceof ReferenceError || ex instanceof TypeError) {
ex = ex.name + ": " + ex.message;
}
@ -537,7 +534,7 @@ loader.register_task(loader.Stage.JAVASCRIPT_INITIALIZING, {
loader.register_task(loader.Stage.LOADED, {
name: "error task",
function: async () => {
if(AppParameters.getValue(AppParameters.KEY_LOAD_DUMMY_ERROR)) {
if (AppParameters.getValue(AppParameters.KEY_LOAD_DUMMY_ERROR)) {
loader.critical_error("The tea is cold!", "Argh, this is evil! Cold tea does not taste good.");
throw "The tea is cold!";
}
@ -549,7 +546,7 @@ let preventExecuteAutoConnect = false;
loader.register_task(loader.Stage.LOADED, {
priority: 0,
function: async () => {
if(preventExecuteAutoConnect) {
if (preventExecuteAutoConnect) {
return;
}

46
shared/js/profiles/ConnectionProfile.ts
View File

@ -1,18 +1,17 @@
import {decode_identity, IdentitifyType, Identity} from "../profiles/Identity";
import {guid} from "../crypto/uid";
import {TeaForumIdentity} from "../profiles/identities/TeaForumIdentity";
import {TeaSpeakIdentity} from "../profiles/identities/TeamSpeakIdentity";
import {AbstractServerConnection} from "../connection/ConnectionBase";
import {HandshakeIdentityHandler} from "../connection/HandshakeHandler";
import {createErrorModal} from "../ui/elements/Modal";
import {formatMessage} from "../ui/frames/chat";
import { decode_identity, IdentitifyType, Identity } from "../profiles/Identity";
import { guid } from "../crypto/uid";
import { TeaSpeakIdentity } from "../profiles/identities/TeamSpeakIdentity";
import { AbstractServerConnection } from "../connection/ConnectionBase";
import { HandshakeIdentityHandler } from "../connection/HandshakeHandler";
import { createErrorModal } from "../ui/elements/Modal";
import { formatMessage } from "../ui/frames/chat";
import * as loader from "tc-loader";
import {Stage} from "tc-loader";
import {LogCategory, logDebug, logError} from "tc-shared/log";
import {tr} from "tc-shared/i18n/localize";
import {getStorageAdapter} from "tc-shared/StorageAdapter";
import {ignorePromise} from "tc-shared/proto";
import {assertMainApplication} from "tc-shared/ui/utils";
import { Stage } from "tc-loader";
import { LogCategory, logDebug, logError } from "tc-shared/log";
import { tr } from "tc-shared/i18n/localize";
import { getStorageAdapter } from "tc-shared/StorageAdapter";
import { ignorePromise } from "tc-shared/proto";
import { assertMainApplication } from "tc-shared/ui/utils";
/*
* We're loading & saving profiles with the StorageAdapter.
@ -52,9 +51,7 @@ export class ConnectionProfile {
if (current_type === undefined)
return undefined;
if (current_type == IdentitifyType.TEAFORO) {
return TeaForumIdentity.identity();
} else if (current_type == IdentitifyType.TEAMSPEAK || current_type == IdentitifyType.NICKNAME) {
if (current_type == IdentitifyType.TEAMSPEAK || current_type == IdentitifyType.NICKNAME) {
return this.identities[IdentitifyType[current_type].toLowerCase()];
}
@ -144,7 +141,7 @@ async function loadConnectProfiles() {
const profiles_json = await getStorageAdapter().get("profiles");
let profiles_data: ProfilesData = (() => {
try {
return profiles_json ? JSON.parse(profiles_json) : {version: 0} as any;
return profiles_json ? JSON.parse(profiles_json) : { version: 0 } as any;
} catch (error) {
logError(LogCategory.IDENTITIES, tr("Invalid profile json! Resetting profiles :( (%o)"), profiles_json);
createErrorModal(tr("Profile data invalid"), formatMessage(tr("The profile data is invalid.{:br:}This might cause data loss."))).open();
@ -170,7 +167,7 @@ async function loadConnectProfiles() {
}
const defaultProfile = findConnectProfile("default");
if (!defaultProfile) { //Create a default profile and teaforo profile
if (!defaultProfile) { //Create a default profile
{
const profile = createConnectProfile(tr("Default Profile"), "default");
profile.defaultPassword = "";
@ -194,15 +191,6 @@ async function loadConnectProfiles() {
}
}
{ /* forum identity (works only when connected to the forum) */
const profile = createConnectProfile(tr("TeaSpeak Forum Profile"), "teaforo");
profile.defaultPassword = "";
profile.defaultUsername = "";
profile.setIdentity(IdentitifyType.TEAFORO, TeaForumIdentity.identity());
profile.selectedIdentityType = IdentitifyType[IdentitifyType.TEAFORO];
}
save();
}
}
@ -280,7 +268,7 @@ export function delete_profile(profile: ConnectionProfile) {
}
window.addEventListener("beforeunload", event => {
if(requires_save()) {
if (requires_save()) {
save();
}
});

47
shared/js/profiles/Identity.ts
View File

@ -1,51 +1,46 @@
import {AbstractServerConnection, ServerCommand} from "../connection/ConnectionBase";
import {HandshakeIdentityHandler} from "../connection/HandshakeHandler";
import {AbstractCommandHandler} from "../connection/AbstractCommandHandler";
import {LogCategory, logError, logWarn} from "tc-shared/log";
import {tr} from "tc-shared/i18n/localize";
import { AbstractServerConnection, ServerCommand } from "../connection/ConnectionBase";
import { HandshakeIdentityHandler } from "../connection/HandshakeHandler";
import { AbstractCommandHandler } from "../connection/AbstractCommandHandler";
import { LogCategory, logError, logWarn } from "tc-shared/log";
import { tr } from "tc-shared/i18n/localize";
export enum IdentitifyType {
TEAFORO,
TEAMSPEAK,
NICKNAME
}
export interface Identity {
fallback_name(): string | undefined ;
uid() : string;
type() : IdentitifyType;
fallback_name(): string | undefined;
uid(): string;
type(): IdentitifyType;
valid() : boolean;
valid(): boolean;
encode?() : string;
decode(data: string) : Promise<void>;
encode?(): string;
decode(data: string): Promise<void>;
spawn_identity_handshake_handler(connection: AbstractServerConnection) : HandshakeIdentityHandler;
spawn_identity_handshake_handler(connection: AbstractServerConnection): HandshakeIdentityHandler;
}
/* avoid circular dependencies here */
export async function decode_identity(type: IdentitifyType, data: string) : Promise<Identity> {
export async function decode_identity(type: IdentitifyType, data: string): Promise<Identity> {
let identity: Identity;
switch (type) {
case IdentitifyType.NICKNAME:
const nidentity = require("tc-shared/profiles/identities/NameIdentity");
identity = new nidentity.NameIdentity();
break;
case IdentitifyType.TEAFORO:
const fidentity = require("tc-shared/profiles/identities/TeaForumIdentity");
identity = new fidentity.TeaForumIdentity(undefined);
break;
case IdentitifyType.TEAMSPEAK:
const tidentity = require("tc-shared/profiles/identities/TeamSpeakIdentity");
identity = new tidentity.TeaSpeakIdentity(undefined, undefined);
break;
}
if(!identity)
if (!identity)
return undefined;
try {
await identity.decode(data)
} catch(error) {
} catch (error) {
logError(LogCategory.IDENTITIES, tr("Failed to decode identity: %o"), error);
return undefined;
}
@ -60,10 +55,6 @@ export function create_identity(type: IdentitifyType) {
const nidentity = require("tc-shared/profiles/identities/NameIdentity");
identity = new nidentity.NameIdentity();
break;
case IdentitifyType.TEAFORO:
const fidentity = require("tc-shared/profiles/identities/TeaForumIdentity");
identity = new fidentity.TeaForumIdentity(undefined);
break;
case IdentitifyType.TEAMSPEAK:
const tidentity = require("tc-shared/profiles/identities/TeamSpeakIdentity");
identity = new tidentity.TeaSpeakIdentity(undefined, undefined);
@ -82,9 +73,9 @@ export class HandshakeCommandHandler<T extends AbstractHandshakeIdentityHandler>
handle_command(command: ServerCommand): boolean {
if(typeof this[command.command] === "function") {
if (typeof this[command.command] === "function") {
this[command.command](command.arguments);
} else if(command.command == "error") {
} else if (command.command == "error") {
return false;
} else {
logWarn(LogCategory.IDENTITIES, tr("Received unknown command while handshaking (%o)"), command);
@ -111,12 +102,12 @@ export abstract class AbstractHandshakeIdentityHandler implements HandshakeIdent
abstract executeHandshake();
protected trigger_success() {
for(const callback of this.callbacks)
for (const callback of this.callbacks)
callback(true);
}
protected trigger_fail(message: string) {
for(const callback of this.callbacks)
for (const callback of this.callbacks)
callback(false, message);
}
}

135
shared/js/profiles/identities/TeaForumIdentity.ts
View File

@ -1,135 +0,0 @@
import {
AbstractHandshakeIdentityHandler,
HandshakeCommandHandler,
IdentitifyType,
Identity
} from "../../profiles/Identity";
import {LogCategory, logError} from "../../log";
import {CommandResult} from "../../connection/ServerConnectionDeclaration";
import {AbstractServerConnection} from "../../connection/ConnectionBase";
import {HandshakeIdentityHandler} from "../../connection/HandshakeHandler";
import * as forum from "./teaspeak-forum";
import { tr } from "tc-shared/i18n/localize";
class TeaForumHandshakeHandler extends AbstractHandshakeIdentityHandler {
readonly identity: TeaForumIdentity;
handler: HandshakeCommandHandler<TeaForumHandshakeHandler>;
constructor(connection: AbstractServerConnection, identity: TeaForumIdentity) {
super(connection);
this.identity = identity;
this.handler = new HandshakeCommandHandler(connection, this);
this.handler["handshakeidentityproof"] = this.handle_proof.bind(this);
}
executeHandshake() {
this.connection.getCommandHandler().registerHandler(this.handler);
this.connection.send_command("handshakebegin", {
intention: 0,
authentication_method: this.identity.type(),
data: this.identity.data().data_json()
}).catch(error => {
logError(LogCategory.IDENTITIES, tr("Failed to initialize TeaForum based handshake. Error: %o"), error);
if(error instanceof CommandResult)
error = error.extra_message || error.message;
this.trigger_fail("failed to execute begin (" + error + ")");
});
}
private handle_proof(json) {
this.connection.send_command("handshakeindentityproof", {
proof: this.identity.data().data_sign()
}).catch(error => {
logError(LogCategory.IDENTITIES, tr("Failed to proof the identity. Error: %o"), error);
if(error instanceof CommandResult)
error = error.extra_message || error.message;
this.trigger_fail("failed to execute proof (" + error + ")");
}).then(() => this.trigger_success());
}
protected trigger_fail(message: string) {
this.connection.getCommandHandler().unregisterHandler(this.handler);
super.trigger_fail(message);
}
protected trigger_success() {
this.connection.getCommandHandler().unregisterHandler(this.handler);
super.trigger_success();
}
}
export class TeaForumIdentity implements Identity {
private readonly identity_data: forum.Data;
valid() : boolean {
return !!this.identity_data && !this.identity_data.is_expired();
}
constructor(data: forum.Data) {
this.identity_data = data;
}
data() {
return this.identity_data;
}
decode(data) : Promise<void> {
data = JSON.parse(data);
if(data.version !== 1)
throw "invalid version";
return;
}
encode() : string {
return JSON.stringify({
version: 1
});
}
spawn_identity_handshake_handler(connection: AbstractServerConnection) : HandshakeIdentityHandler {
return new TeaForumHandshakeHandler(connection, this);
}
fallback_name(): string | undefined {
return this.identity_data ? this.identity_data.name() : undefined;
}
type(): IdentitifyType {
return IdentitifyType.TEAFORO;
}
uid(): string {
//FIXME: Real UID!
return "TeaForo#" + ((this.identity_data ? this.identity_data.name() : "Another TeaSpeak user"));
}
public static identity() {
return static_identity;
}
}
let static_identity: TeaForumIdentity;
export function set_static_identity(identity: TeaForumIdentity) {
static_identity = identity;
}
export function update_forum() {
if(forum.logged_in() && (!static_identity || static_identity.data() !== forum.data())) {
static_identity = new TeaForumIdentity(forum.data());
} else {
static_identity = undefined;
}
}
export function valid_static_forum_identity() : boolean {
return static_identity && static_identity.valid();
}
export function static_forum_identity() : TeaForumIdentity | undefined {
return static_identity;
}

399
shared/js/profiles/identities/teaspeak-forum.ts
View File

@ -1,399 +0,0 @@
import {settings, Settings} from "../../settings";
import * as loader from "tc-loader";
import * as fidentity from "./TeaForumIdentity";
import {LogCategory, logDebug, logError, logInfo, logWarn} from "../../log";
import {tr} from "tc-shared/i18n/localize";
import {getStorageAdapter} from "tc-shared/StorageAdapter";
/* TODO: Properly redesign this whole system! */
declare global {
interface Window {
grecaptcha: GReCaptcha;
}
}
interface GReCaptcha {
render(container: string | HTMLElement, parameters: {
sitekey: string;
theme?: "dark" | "light";
size?: "compact" | "normal";
tabindex?: number;
callback?: (token: string) => any;
"expired-callback"?: () => any;
"error-callback"?: (error: any) => any;
}) : string; /* widget_id */
reset(widget_id?: string);
}
export namespace gcaptcha {
export async function initialize() {
if(typeof(window.grecaptcha) === "undefined") {
let script = document.createElement("script");
script.async = true;
let timeout;
const callback_name = "captcha_callback_" + Math.random().toString().replace(".", "");
try {
await new Promise((resolve, reject) => {
script.onerror = reject;
window[callback_name] = resolve;
script.src = "https://www.google.com/recaptcha/api.js?onload=" + encodeURIComponent(callback_name) + "&render=explicit";
document.body.append(script);
timeout = setTimeout(() => reject("timeout"), 15000);
});
} catch(error) {
script.remove();
script = undefined;
logError(LogCategory.GENERAL, tr("Failed to fetch recaptcha javascript source: %o"), error);
throw tr("failed to download source");
} finally {
if(script)
script.onerror = undefined;
delete window[callback_name];
timeout && clearTimeout(timeout);
}
}
if(typeof(window.grecaptcha) === "undefined") {
throw tr("failed to load recaptcha");
}
}
export async function spawn(container: JQuery, key: string, callback_data: (token: string) => any) {
try {
await initialize();
} catch(error) {
logError(LogCategory.GENERAL, tr("Failed to initialize G-Recaptcha. Error: %o"), error);
throw tr("initialisation failed");
}
if(container.attr("captcha-uuid"))
window.grecaptcha.reset(container.attr("captcha-uuid"));
else {
container.attr("captcha-uuid", window.grecaptcha.render(container[0], {
"sitekey": key,
callback: callback_data
}));
}
}
}
function getForumApiURL() {
return settings.getValue(Settings.KEY_TEAFORO_URL);
}
export class Data {
readonly auth_key: string;
readonly raw: string;
readonly sign: string;
parsed: {
user_id: number;
user_name: string;
data_age: number;
user_group_id: number;
is_staff: boolean;
user_groups: number[];
};
constructor(auth: string, raw: string, sign: string) {
this.auth_key = auth;
this.raw = raw;
this.sign = sign;
this.parsed = JSON.parse(raw);
}
data_json() : string { return this.raw; }
data_sign() : string { return this.sign; }
name() : string { return this.parsed.user_name; }
user_id() { return this.parsed.user_id; }
user_group() { return this.parsed.user_group_id; }
is_stuff() : boolean { return this.parsed.is_staff; }
is_premium() : boolean { return this.parsed.user_groups.indexOf(5) != -1; }
data_age() : Date { return new Date(this.parsed.data_age); }
is_expired() : boolean { return this.parsed.data_age + 48 * 60 * 60 * 1000 < Date.now(); }
should_renew() : boolean { return this.parsed.data_age + 24 * 60 * 60 * 1000 < Date.now(); } /* renew data all 24hrs */
}
let forumData: Data | undefined;
export function logged_in() : boolean {
return !!forumData && !forumData.is_expired();
}
export function data() : Data { return forumData; }
export interface LoginResult {
status: "success" | "captcha" | "error";
error_message?: string;
captcha?: {
type: "gre-captcha" | "unknown";
data: any; /* in case of gre-captcha it would be the side key */
};
}
export async function login(username: string, password: string, captcha?: any) : Promise<LoginResult> {
let response;
try {
response = await new Promise<any>((resolve, reject) => {
$.ajax({
url: getForumApiURL() + "?web-api/v1/login",
type: "POST",
cache: false,
data: {
username: username,
password: password,
remember: true,
"g-recaptcha-response": captcha
},
crossDomain: true,
success: resolve,
error: (xhr, status, error) => {
logDebug(LogCategory.GENERAL, tr("Login request failed %o: %o"), status, error);
reject(tr("request failed"));
}
})
});
} catch(error) {
return {
status: "error",
error_message: tr("failed to send login request")
};
}
if(response["status"] !== "ok") {
logError(LogCategory.GENERAL, tr("Response status not okey. Error happend: %o"), response);
return {
status: "error",
error_message: (response["errors"] || [])[0] || tr("Unknown error")
};
}
if(!response["success"]) {
logError(LogCategory.GENERAL, tr("Login failed. Response %o"), response);
let message = tr("failed to login");
let captcha;
/* user/password wrong | and maybe captcha required */
if(response["code"] == 1 || response["code"] == 3)
message = tr("Invalid username or password");
if(response["code"] == 2 || response["code"] == 3) {
captcha = {
type: response["captcha"]["type"],
data: response["captcha"]["siteKey"] //TODO: Why so static here?
};
if(response["code"] == 2)
message = tr("captcha required");
}
return {
status: typeof(captcha) !== "undefined" ? "captcha" : "error",
error_message: message,
captcha: captcha
};
}
//document.cookie = "user_data=" + response["data"] + ";path=/";
//document.cookie = "user_sign=" + response["sign"] + ";path=/";
try {
forumData = new Data(response["auth-key"], response["data"], response["sign"]);
const adapter = getStorageAdapter();
await adapter.set("teaspeak-forum-data", response["data"]);
await adapter.set("teaspeak-forum-sign", response["sign"]);
await adapter.set("teaspeak-forum-auth", response["auth-key"]);
fidentity.update_forum();
} catch(error) {
logError(LogCategory.GENERAL, tr("Failed to parse forum given data: %o"), error);
return {
status: "error",
error_message: tr("Failed to parse response data")
}
}
return {
status: "success"
};
}
async function resetForumLocalData() {
const adapter = getStorageAdapter();
await adapter.delete("teaspeak-forum-data");
await adapter.delete("teaspeak-forum-sign");
await adapter.delete("teaspeak-forum-auth");
}
export async function renew_data() : Promise<"success" | "login-required"> {
let response;
try {
response = await new Promise<any>((resolve, reject) => {
$.ajax({
url: getForumApiURL() + "?web-api/v1/renew-data",
type: "GET",
cache: false,
crossDomain: true,
data: {
"auth-key": forumData.auth_key
},
success: resolve,
error: (xhr, status, error) => {
logError(LogCategory.GENERAL, tr("Renew request failed %o: %o"), status, error);
reject(tr("request failed"));
}
})
});
} catch(error) {
throw tr("failed to send renew request");
}
if(response["status"] !== "ok") {
logError(LogCategory.GENERAL, tr("Response status not okey. Error happend: %o"), response);
throw (response["errors"] || [])[0] || tr("Unknown error");
}
if(!response["success"]) {
if(response["code"] == 1) {
return "login-required";
}
throw "invalid error code (" + response["code"] + ")";
}
if(!response["data"] || !response["sign"])
throw tr("response missing data");
logDebug(LogCategory.GENERAL, tr("Renew succeeded. Parsing data."));
try {
forumData = new Data(forumData.auth_key, response["data"], response["sign"]);
await getStorageAdapter().set("teaspeak-forum-data", response["data"]);
await getStorageAdapter().set("teaspeak-forum-sign", response["sign"]);
fidentity.update_forum();
} catch(error) {
logError(LogCategory.GENERAL, tr("Failed to parse forum given data: %o"), error);
throw tr("failed to parse data");
}
return "success";
}
export async function logout() : Promise<void> {
if(!logged_in()) {
return;
}
let response;
try {
response = await new Promise<any>((resolve, reject) => {
$.ajax({
url: getForumApiURL() + "?web-api/v1/logout",
type: "GET",
cache: false,
crossDomain: true,
data: {
"auth-key": forumData.auth_key
},
success: resolve,
error: (xhr, status, error) => {
logInfo(LogCategory.GENERAL, tr("Logout request failed %o: %o"), status, error);
reject(tr("request failed"));
}
})
});
} catch(error) {
throw tr("failed to send logout request");
}
if(response["status"] !== "ok") {
logError(LogCategory.GENERAL, tr("Response status not ok. Error happened: %o"), response);
throw (response["errors"] || [])[0] || tr("Unknown error");
}
if(!response["success"]) {
/* code 1 means not logged in, its an success */
if(response["code"] != 1) {
throw "invalid error code (" + response["code"] + ")";
}
}
forumData = undefined;
await resetForumLocalData();
fidentity.update_forum();
}
loader.register_task(loader.Stage.JAVASCRIPT_INITIALIZING, {
name: "TeaForo initialize",
priority: 10,
function: async () => {
const rawData = await getStorageAdapter().get("teaspeak-forum-data");
const rawSign = await getStorageAdapter().get("teaspeak-forum-sign");
const rawForumAuth = await getStorageAdapter().get("teaspeak-forum-auth");
if(!rawData || !rawSign || !rawForumAuth) {
logInfo(LogCategory.GENERAL, tr("No TeaForo authentication found. TeaForo connection status: unconnected"));
return;
}
try {
forumData = new Data(rawForumAuth, rawData, rawSign);
} catch(error) {
logError(LogCategory.GENERAL, tr("Failed to initialize TeaForo connection from local data. Error: %o"), error);
return;
}
if(forumData.should_renew()) {
logInfo(LogCategory.GENERAL, tr("TeaForo data should be renewed. Executing renew."));
renew_data().then(async status => {
if(status === "success") {
logInfo(LogCategory.GENERAL, tr("TeaForo data has been successfully renewed."));
} else {
logWarn(LogCategory.GENERAL, tr("Failed to renew TeaForo data. New login required."));
await resetForumLocalData();
}
}).catch(error => {
logWarn(LogCategory.GENERAL, tr("Failed to renew TeaForo data. An error occurred: %o"), error);
});
return;
}
if(forumData && forumData.is_expired()) {
logError(LogCategory.GENERAL, tr("TeaForo data is expired. TeaForo connection isn't available!"));
}
setInterval(() => {
/* if we don't have any _data object set we could not renew anything */
if(forumData) {
logInfo(LogCategory.IDENTITIES, tr("Renewing TeaForo data."));
renew_data().then(async status => {
if(status === "success") {
logInfo(LogCategory.IDENTITIES,tr("TeaForo data has been successfully renewed."));
} else {
logWarn(LogCategory.IDENTITIES,tr("Failed to renew TeaForo data. New login required."));
await resetForumLocalData();
}
}).catch(error => {
logWarn(LogCategory.GENERAL, tr("Failed to renew TeaForo data. An error occurred: %o"), error);
});
}
}, 24 * 60 * 60 * 1000);
}
});

6
shared/js/settings.ts
View File

@ -572,12 +572,6 @@ export class Settings {
valueType: "boolean",
};
static readonly KEY_TEAFORO_URL: ValuedRegistryKey<string> = {
key: "teaforo_url",
defaultValue: "https://forum.teaspeak.de/",
valueType: "string",
};
static readonly KEY_FONT_SIZE: ValuedRegistryKey<number> = {
key: "font_size",
valueType: "number",

4
shared/js/tree/Client.ts
View File

@ -74,10 +74,6 @@ export class ClientProperties {
client_output_muted: boolean = false;
client_is_channel_commander: boolean = false;
client_teaforo_id: number = 0;
client_teaforo_name: string = "";
client_teaforo_flags: number = 0; /* 0x01 := Banned | 0x02 := Stuff | 0x04 := Premium */
/* not updated in view! */
client_month_bytes_uploaded: number = 0;

34
shared/js/ui/frames/side/ClientInfoRenderer.scss
View File

@ -83,9 +83,11 @@ $bot_thumbnail_height: 9em;
&:hover {
opacity: 1;
}
@include transition(opacity $button_hover_animation_time ease-in-out);
&:before, &:after {
&:before,
&:after {
position: absolute;
left: .25em;
content: ' ';
@ -126,6 +128,7 @@ $bot_thumbnail_height: 9em;
&:hover {
background-color: #393939;
}
@include transition($button_hover_animation_time ease-in-out);
}
}
@ -208,8 +211,8 @@ $bot_thumbnail_height: 9em;
}
&.disabled {
opacity: 0!important;
pointer-events: none!important;
opacity: 0 !important;
pointer-events: none !important;
}
}
@ -282,7 +285,7 @@ $bot_thumbnail_height: 9em;
flex-direction: row;
justify-content: stretch;
> .icon {
>.icon {
margin-bottom: .1em;
font-size: 2em;
@ -300,8 +303,9 @@ $bot_thumbnail_height: 9em;
}
&.list {
> .icon_em {
margin-top: 0; /* for lists the .1em patting on the top looks odd */
>.icon_em {
margin-top: 0;
/* for lists the .1em patting on the top looks odd */
}
}
@ -311,13 +315,15 @@ $bot_thumbnail_height: 9em;
flex-shrink: 1;
flex-grow: 1;
min-width: 4em; /* 2em for the icon the last 4 for the text */
min-width: 4em;
/* 2em for the icon the last 4 for the text */
display: flex;
flex-direction: column;
justify-content: flex-start;
.title, .value {
.title,
.value {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@ -340,10 +346,12 @@ $bot_thumbnail_height: 9em;
align-self: center;
}
&.status, &.groups {
&.status,
&.groups {
flex-direction: column;
.statusEntry, .groupEntry {
.statusEntry,
.groupEntry {
.icon {
vertical-align: text-top;
}
@ -366,12 +374,6 @@ $bot_thumbnail_height: 9em;
justify-content: flex-end;
}
}
&.clientTeaforoAccount {
a, a:visited {
color: #d9d9d9;
}
}
}
}

187
shared/js/ui/frames/side/ClientInfoRenderer.tsx
View File

@ -1,5 +1,5 @@
import * as React from "react";
import {useContext, useEffect, useRef, useState} from "react";
import { useContext, useEffect, useRef, useState } from "react";
import {
ClientCountryInfo,
ClientForumInfo,
@ -11,22 +11,22 @@ import {
ClientVolumeInfo, InheritedChannelInfo,
OptionalClientInfoInfo
} from "tc-shared/ui/frames/side/ClientInfoDefinitions";
import {Registry} from "tc-shared/events";
import {ClientAvatar, getGlobalAvatarManagerFactory} from "tc-shared/file/Avatars";
import {AvatarRenderer} from "tc-shared/ui/react-elements/Avatar";
import {Translatable} from "tc-shared/ui/react-elements/i18n";
import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots";
import {ClientTag} from "tc-shared/ui/tree/EntryTags";
import {guid} from "tc-shared/crypto/uid";
import {useDependentState} from "tc-shared/ui/react-elements/Helper";
import {format_online_time} from "tc-shared/utils/TimeUtils";
import {ClientIcon} from "svg-sprites/client-icons";
import {ClientIconRenderer} from "tc-shared/ui/react-elements/Icons";
import {getIconManager} from "tc-shared/file/Icons";
import {RemoteIconRenderer} from "tc-shared/ui/react-elements/Icon";
import {CountryCode} from "tc-shared/ui/react-elements/CountryCode";
import {getKeyBoard} from "tc-shared/PPTListener";
import {tra} from "tc-shared/i18n/localize";
import { Registry } from "tc-shared/events";
import { ClientAvatar, getGlobalAvatarManagerFactory } from "tc-shared/file/Avatars";
import { AvatarRenderer } from "tc-shared/ui/react-elements/Avatar";
import { Translatable } from "tc-shared/ui/react-elements/i18n";
import { LoadingDots } from "tc-shared/ui/react-elements/LoadingDots";
import { ClientTag } from "tc-shared/ui/tree/EntryTags";
import { guid } from "tc-shared/crypto/uid";
import { useDependentState } from "tc-shared/ui/react-elements/Helper";
import { format_online_time } from "tc-shared/utils/TimeUtils";
import { ClientIcon } from "svg-sprites/client-icons";
import { ClientIconRenderer } from "tc-shared/ui/react-elements/Icons";
import { getIconManager } from "tc-shared/file/Icons";
import { RemoteIconRenderer } from "tc-shared/ui/react-elements/Icon";
import { CountryCode } from "tc-shared/ui/react-elements/CountryCode";
import { getKeyBoard } from "tc-shared/PPTListener";
import { tra } from "tc-shared/i18n/localize";
const cssStyle = require("./ClientInfoRenderer.scss");
@ -67,7 +67,7 @@ const Avatar = React.memo(() => {
const client = useContext(ClientContext);
let avatar: "loading" | ClientAvatar;
if(client.type === "none") {
if (client.type === "none") {
avatar = "loading";
} else {
avatar = getGlobalAvatarManagerFactory().getManager(client.handlerId)
@ -88,13 +88,13 @@ const ClientName = React.memo(() => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ name, setName ] = useDependentState<string | null>(() => {
if(client.type !== "none") {
const [name, setName] = useDependentState<string | null>(() => {
if (client.type !== "none") {
events.fire("query_client_name");
}
return null;
}, [ client.contextHash ]);
}, [client.contextHash]);
events.reactUse("notify_client_name", event => setName(event.name), undefined, []);
@ -111,13 +111,13 @@ const ClientName = React.memo(() => {
const ClientDescription = React.memo(() => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ description, setDescription ] = useDependentState<string | null | undefined>(() => {
if(client.type !== "none") {
const [description, setDescription] = useDependentState<string | null | undefined>(() => {
if (client.type !== "none") {
events.fire("query_client_description");
}
return null;
}, [ client.contextHash ]);
}, [client.contextHash]);
events.reactUse("notify_client_description", event => {
setDescription(event.description ? event.description : null);
@ -150,23 +150,23 @@ const InfoBlock = (props: { imageUrl?: string, clientIcon?: ClientIcon, children
const ClientOnlineSince = React.memo(() => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ onlineInfo, setOnlineInfo ] = useDependentState<ClientInfoOnline>(() => {
if(client.type !== "none") {
const [onlineInfo, setOnlineInfo] = useDependentState<ClientInfoOnline>(() => {
if (client.type !== "none") {
events.fire("query_online");
}
return undefined;
}, [ client.contextHash ]);
const [ revision, setRevision ] = useState(0);
}, [client.contextHash]);
const [revision, setRevision] = useState(0);
events.reactUse("notify_online", event => setOnlineInfo(event.status), undefined, []);
let onlineBody;
if(client.type === "none" || !onlineInfo) {
if (client.type === "none" || !onlineInfo) {
onlineBody = <React.Fragment key={"loading"}><Translatable>loading</Translatable> <LoadingDots /></React.Fragment>;
} else if(onlineInfo.joinTimestamp === 0) {
} else if (onlineInfo.joinTimestamp === 0) {
onlineBody = <React.Fragment key={"invalid"}><Translatable>Join timestamp not logged</Translatable></React.Fragment>;
} else if(onlineInfo.leaveTimestamp === 0) {
} else if (onlineInfo.leaveTimestamp === 0) {
const onlineTime = Date.now() / 1000 - onlineInfo.joinTimestamp;
onlineBody = <React.Fragment key={"value-live"}>{format_online_time(onlineTime)}</React.Fragment>;
} else {
@ -175,7 +175,7 @@ const ClientOnlineSince = React.memo(() => {
}
useEffect(() => {
if(!onlineInfo || onlineInfo.leaveTimestamp !== 0 || onlineInfo.joinTimestamp === 0) {
if (!onlineInfo || onlineInfo.leaveTimestamp !== 0 || onlineInfo.joinTimestamp === 0) {
return;
}
@ -194,13 +194,13 @@ const ClientOnlineSince = React.memo(() => {
const ClientCountry = React.memo(() => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ country, setCountry ] = useDependentState<ClientCountryInfo>(() => {
if(client.type !== "none") {
const [country, setCountry] = useDependentState<ClientCountryInfo>(() => {
if (client.type !== "none") {
events.fire("query_country");
}
return undefined;
}, [ client.contextHash ]);
}, [client.contextHash]);
events.reactUse("notify_country", event => setCountry(event.country), undefined, []);
@ -215,24 +215,24 @@ const ClientCountry = React.memo(() => {
const ClientVolume = React.memo(() => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ volume, setVolume ] = useDependentState<ClientVolumeInfo>(() => {
if(client.type !== "none") {
const [volume, setVolume] = useDependentState<ClientVolumeInfo>(() => {
if (client.type !== "none") {
events.fire("query_volume");
}
return undefined;
}, [ client.contextHash ]);
}, [client.contextHash]);
events.reactUse("notify_volume", event => setVolume(event.volume), undefined, []);
if(client.type === "self" || client.type === "none") {
if (client.type === "self" || client.type === "none") {
return null;
}
let body;
if(volume) {
if (volume) {
let text = (volume.volume * 100).toFixed(0) + "%";
if(volume.muted) {
if (volume.muted) {
text += " (" + tr("Muted") + ")";
}
body = <React.Fragment key={"value"}>{text}</React.Fragment>;
@ -248,62 +248,24 @@ const ClientVolume = React.memo(() => {
);
});
const ClientForumAccount = React.memo(() => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ forum, setForum ] = useDependentState<ClientForumInfo>(() => {
if(client.type !== "none") {
events.fire("query_forum");
}
return undefined;
}, [ client.contextHash ]);
events.reactUse("notify_forum", event => setForum(event.forum), undefined, []);
if(!forum) {
return null;
}
let text = forum.nickname;
if((forum.flags & 0x01) > 0) {
text += " (" + tr("Banned") + ")";
}
if((forum.flags & 0x02) > 0) {
text += " (" + tr("Stuff") + ")";
}
if((forum.flags & 0x04) > 0) {
text += " (" + tr("Premium") + ")";
}
return (
<InfoBlock clientIcon={ClientIcon.ClientInfoForumAccount} valueClass={cssStyle.clientTeaforoAccount}>
<Translatable>TeaSpeak Forum account</Translatable>
<a href={"https://forum.teaspeak.de/index.php?members/" + forum.userId} target={"_blank"}>{text}</a>
</InfoBlock>
);
});
const ClientVersion = React.memo(() => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ version, setVersion ] = useDependentState<ClientVersionInfo>(() => {
if(client.type !== "none") {
const [version, setVersion] = useDependentState<ClientVersionInfo>(() => {
if (client.type !== "none") {
events.fire("query_version");
}
return undefined;
}, [ client.contextHash ]);
}, [client.contextHash]);
events.reactUse("notify_version", event => setVersion(event.version), undefined, []);
let body;
if(version) {
if (version) {
let platform = version.platform;
if(platform.indexOf("Win32") != 0 && (version.version.indexOf("Win64") != -1 || version.version.indexOf("WOW64") != -1)) {
if (platform.indexOf("Win32") != 0 && (version.version.indexOf("Win64") != -1 || version.version.indexOf("WOW64") != -1)) {
platform = platform.replace("Win32", "Win64");
}
@ -330,41 +292,41 @@ const ClientStatusEntry = (props: { icon: ClientIcon, children: React.ReactEleme
const ClientStatus = React.memo(() => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ status, setStatus ] = useDependentState<ClientStatusInfo>(() => {
if(client.type !== "none") {
const [status, setStatus] = useDependentState<ClientStatusInfo>(() => {
if (client.type !== "none") {
events.fire("query_status");
}
return undefined;
}, [ client.contextHash ]);
}, [client.contextHash]);
events.reactUse("notify_status", event => setStatus(event.status), undefined, []);
let elements = [];
if(status) {
if(status.away) {
if (status) {
if (status.away) {
let message = typeof status.away === "string" ? " (" + status.away + ")" : undefined;
elements.push(<ClientStatusEntry key={"away"} icon={ClientIcon.Away}><><Translatable>Away</Translatable> {message}</></ClientStatusEntry>);
}
if(status.speakerDisabled) {
if (status.speakerDisabled) {
elements.push(<ClientStatusEntry key={"hardwareoutputmuted"} icon={ClientIcon.HardwareOutputMuted}><Translatable>Speakers/Headphones disabled</Translatable></ClientStatusEntry>);
}
if(status.microphoneDisabled) {
if (status.microphoneDisabled) {
elements.push(<ClientStatusEntry key={"hardwareinputmuted"} icon={ClientIcon.HardwareInputMuted}><Translatable>Microphone disabled</Translatable></ClientStatusEntry>);
}
if(status.speakerMuted) {
if (status.speakerMuted) {
elements.push(<ClientStatusEntry key={"outputmuted"} icon={ClientIcon.OutputMuted}><Translatable>Speakers/Headphones Muted</Translatable></ClientStatusEntry>);
}
if(status.microphoneMuted) {
if (status.microphoneMuted) {
elements.push(<ClientStatusEntry key={"inputmuted"} icon={ClientIcon.InputMuted}><Translatable>Microphone Muted</Translatable></ClientStatusEntry>);
}
}
if(elements.length === 0) {
if (elements.length === 0) {
return null;
}
@ -379,17 +341,17 @@ const ClientStatus = React.memo(() => {
const FullInfoButton = () => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ onlineInfo, setOnlineInfo ] = useDependentState<ClientInfoOnline>(() => {
if(client.type !== "none") {
const [onlineInfo, setOnlineInfo] = useDependentState<ClientInfoOnline>(() => {
if (client.type !== "none") {
events.fire("query_online");
}
return undefined;
}, [ client.contextHash ]);
}, [client.contextHash]);
events.reactUse("notify_online", event => setOnlineInfo(event.status), undefined, []);
if(!onlineInfo || onlineInfo.leaveTimestamp !== 0) {
if (!onlineInfo || onlineInfo.leaveTimestamp !== 0) {
return null;
}
@ -413,15 +375,15 @@ const GroupRenderer = (props: { group: ClientGroupInfo }) => {
const ChannelGroupRenderer = () => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ channelGroup, setChannelGroup ] = useDependentState<ClientGroupInfo>(() => {
if(client.type !== "none") {
const [channelGroup, setChannelGroup] = useDependentState<ClientGroupInfo>(() => {
if (client.type !== "none") {
events.fire("query_channel_group");
}
return undefined;
}, [ client.contextHash ]);
}, [client.contextHash]);
const [ inheritedChannel, setInheritedChannel ] = useDependentState<InheritedChannelInfo>(() => undefined, [ client.contextHash ]);
const [inheritedChannel, setInheritedChannel] = useDependentState<InheritedChannelInfo>(() => undefined, [client.contextHash]);
events.reactUse("notify_channel_group", event => {
setChannelGroup(event.group);
@ -429,9 +391,9 @@ const ChannelGroupRenderer = () => {
}, undefined, []);
let body;
if(channelGroup) {
if (channelGroup) {
let groupRendered = <GroupRenderer group={channelGroup} key={"group-" + channelGroup.groupId} />;
if(inheritedChannel) {
if (inheritedChannel) {
body = (
<React.Fragment key={"inherited"}>
{groupRendered}
@ -459,18 +421,18 @@ const ChannelGroupRenderer = () => {
const ServerGroupRenderer = () => {
const events = useContext(EventsContext);
const client = useContext(ClientContext);
const [ serverGroups, setServerGroups ] = useDependentState<ClientGroupInfo[]>(() => {
if(client.type !== "none") {
const [serverGroups, setServerGroups] = useDependentState<ClientGroupInfo[]>(() => {
if (client.type !== "none") {
events.fire("query_server_groups");
}
return undefined;
}, [ client.contextHash ]);
}, [client.contextHash]);
events.reactUse("notify_server_groups", event => setServerGroups(event.groups), undefined, []);
let body;
if(serverGroups) {
if (serverGroups) {
body = serverGroups.map(group => <GroupRenderer group={group} key={"group-" + group.groupId} />);
} else {
body = <React.Fragment key={"loading"}><Translatable>loading</Translatable> <LoadingDots /></React.Fragment>;
@ -486,7 +448,7 @@ const ServerGroupRenderer = () => {
const ConnectedClientInfoBlock = () => {
const client = useContext(ClientContext);
if(client.type === "query" || client.type === "none") {
if (client.type === "query" || client.type === "none") {
return null;
}
@ -494,7 +456,6 @@ const ConnectedClientInfoBlock = () => {
<React.Fragment key={"info"}>
<ClientOnlineSince />
<ClientCountry />
<ClientForumAccount />
<ClientVolume />
<ClientVersion />
<ClientStatus />
@ -505,12 +466,12 @@ const ConnectedClientInfoBlock = () => {
const ClientInfoProvider = () => {
const events = useContext(EventsContext);
const [ client, setClient ] = useState<OptionalClientInfoInfo>(() => {
const [client, setClient] = useState<OptionalClientInfoInfo>(() => {
events.fire("query_client");
return { type: "none", contextHash: guid() };
});
events.reactUse("notify_client", event => {
if(event.info) {
if (event.info) {
setClient({
contextHash: guid(),
type: event.info.type,
@ -519,7 +480,7 @@ const ClientInfoProvider = () => {
clientId: event.info.clientId,
clientDatabaseId: event.info.clientDatabaseId
});
} else if(client.type !== "none") {
} else if (client.type !== "none") {
setClient({ type: "none", contextHash: guid() });
}
});

53
shared/js/ui/modal/ModalClientInfo.ts
View File

@ -1,13 +1,13 @@
import {ClientConnectionInfo, ClientEntry} from "../../tree/Client";
import { ClientConnectionInfo, ClientEntry } from "../../tree/Client";
import PermissionType from "../../permission/PermissionType";
import {createInfoModal, createModal, Modal} from "../../ui/elements/Modal";
import {copyToClipboard} from "../../utils/helpers";
import { createInfoModal, createModal, Modal } from "../../ui/elements/Modal";
import { copyToClipboard } from "../../utils/helpers";
import * as i18nc from "../../i18n/CountryFlag";
import * as tooltip from "../../ui/elements/Tooltip";
import moment from "moment";
import {format_number, network} from "../../ui/frames/chat";
import {generateIconJQueryTag, getIconManager} from "tc-shared/file/Icons";
import {tr} from "tc-shared/i18n/localize";
import { format_number, network } from "../../ui/frames/chat";
import { generateIconJQueryTag, getIconManager } from "tc-shared/file/Icons";
import { tr } from "tc-shared/i18n/localize";
type InfoUpdateCallback = (info: ClientConnectionInfo) => any;
@ -147,31 +147,6 @@ function apply_basic_info(client: ClientEntry, tag: JQuery, modal: Modal, callba
});
}
/* TeaForo */
{
const container = tag.find(".property-teaforo .value").empty();
if (client.properties.client_teaforo_id) {
container.children().remove();
let text = client.properties.client_teaforo_name;
if ((client.properties.client_teaforo_flags & 0x01) > 0)
text += " (" + tr("Banned") + ")";
if ((client.properties.client_teaforo_flags & 0x02) > 0)
text += " (" + tr("Stuff") + ")";
if ((client.properties.client_teaforo_flags & 0x04) > 0)
text += " (" + tr("Premium") + ")";
$.spawn("a")
.attr("href", "https://forum.teaspeak.de/index.php?members/" + client.properties.client_teaforo_id)
.attr("target", "_blank")
.text(text)
.appendTo(container);
} else {
container.append($.spawn("a").text(tr("Not connected")));
}
}
/* Version */
{
const container = tag.find(".property-version");
@ -376,7 +351,7 @@ function apply_packets(client: ClientEntry, tag: JQuery, modal: Modal, callbacks
if (packets == 0 && info.connection_packets_received_keepalive == -1)
node_downstream.innerText = tr("Not calculated");
else
node_downstream.innerText = format_number(packets, {unit: "Packets"});
node_downstream.innerText = format_number(packets, { unit: "Packets" });
});
node_downstream.innerText = tr("loading...");
}
@ -390,7 +365,7 @@ function apply_packets(client: ClientEntry, tag: JQuery, modal: Modal, callbacks
if (packets == 0 && info.connection_packets_sent_keepalive == -1)
node_upstream.innerText = tr("Not calculated");
else
node_upstream.innerText = format_number(packets, {unit: "Packets"});
node_upstream.innerText = format_number(packets, { unit: "Packets" });
});
node_upstream.innerText = tr("loading...");
}
@ -446,7 +421,7 @@ function apply_packets(client: ClientEntry, tag: JQuery, modal: Modal, callbacks
if (bytes == 0 && info.connection_bandwidth_received_last_second_keepalive == -1)
node_downstream.innerText = tr("Not calculated");
else
node_downstream.innerText = network.format_bytes(bytes, {time: "s"});
node_downstream.innerText = network.format_bytes(bytes, { time: "s" });
});
node_downstream.innerText = tr("loading...");
}
@ -460,7 +435,7 @@ function apply_packets(client: ClientEntry, tag: JQuery, modal: Modal, callbacks
if (bytes == 0 && info.connection_bandwidth_sent_last_second_keepalive == -1)
node_upstream.innerText = tr("Not calculated");
else
node_upstream.innerText = network.format_bytes(bytes, {time: "s"});
node_upstream.innerText = network.format_bytes(bytes, { time: "s" });
});
node_upstream.innerText = tr("loading...");
}
@ -481,7 +456,7 @@ function apply_packets(client: ClientEntry, tag: JQuery, modal: Modal, callbacks
if (bytes == 0 && info.connection_bandwidth_received_last_minute_keepalive == -1)
node_downstream.innerText = tr("Not calculated");
else
node_downstream.innerText = network.format_bytes(bytes, {time: "s"});
node_downstream.innerText = network.format_bytes(bytes, { time: "s" });
});
node_downstream.innerText = tr("loading...");
}
@ -495,7 +470,7 @@ function apply_packets(client: ClientEntry, tag: JQuery, modal: Modal, callbacks
if (bytes == 0 && info.connection_bandwidth_sent_last_minute_keepalive == -1)
node_upstream.innerText = tr("Not calculated");
else
node_upstream.innerText = network.format_bytes(bytes, {time: "s"});
node_upstream.innerText = network.format_bytes(bytes, { time: "s" });
});
node_upstream.innerText = tr("loading...");
}
@ -510,7 +485,7 @@ function apply_packets(client: ClientEntry, tag: JQuery, modal: Modal, callbacks
if (node_downstream) {
client.updateClientVariables().then(info => {
//TODO: Test for own client info and if so then show the max quota (needed permission)
node_downstream.innerText = network.format_bytes(client.properties.client_month_bytes_downloaded, {exact: false});
node_downstream.innerText = network.format_bytes(client.properties.client_month_bytes_downloaded, { exact: false });
});
node_downstream.innerText = tr("loading...");
}
@ -518,7 +493,7 @@ function apply_packets(client: ClientEntry, tag: JQuery, modal: Modal, callbacks
if (node_upstream) {
client.updateClientVariables().then(info => {
//TODO: Test for own client info and if so then show the max quota (needed permission)
node_upstream.innerText = network.format_bytes(client.properties.client_month_bytes_uploaded, {exact: false});
node_upstream.innerText = network.format_bytes(client.properties.client_month_bytes_uploaded, { exact: false });
});
node_upstream.innerText = tr("loading...");
}

268
shared/js/ui/modal/ModalSettings.tsx
View File

@ -1,38 +1,36 @@
import {createErrorModal, createInfoModal, createInputModal, createModal, Modal} from "tc-shared/ui/elements/Modal";
import {sliderfy} from "tc-shared/ui/elements/Slider";
import {settings, Settings} from "tc-shared/settings";
import { createErrorModal, createInfoModal, createInputModal, createModal, Modal } from "tc-shared/ui/elements/Modal";
import { sliderfy } from "tc-shared/ui/elements/Slider";
import { settings, Settings } from "tc-shared/settings";
import * as sound from "tc-shared/audio/Sounds";
import {manager, setSoundMasterVolume, Sound} from "tc-shared/audio/Sounds";
import { manager, setSoundMasterVolume, Sound } from "tc-shared/audio/Sounds";
import * as profiles from "tc-shared/profiles/ConnectionProfile";
import {ConnectionProfile} from "tc-shared/profiles/ConnectionProfile";
import {IdentitifyType} from "tc-shared/profiles/Identity";
import {TeaForumIdentity} from "tc-shared/profiles/identities/TeaForumIdentity";
import {TeaSpeakIdentity} from "tc-shared/profiles/identities/TeamSpeakIdentity";
import {NameIdentity} from "tc-shared/profiles/identities/NameIdentity";
import {LogCategory, logDebug, logError, logTrace, logWarn} from "tc-shared/log";
import { ConnectionProfile } from "tc-shared/profiles/ConnectionProfile";
import { IdentitifyType } from "tc-shared/profiles/Identity";
import { TeaSpeakIdentity } from "tc-shared/profiles/identities/TeamSpeakIdentity";
import { NameIdentity } from "tc-shared/profiles/identities/NameIdentity";
import { LogCategory, logDebug, logError, logTrace, logWarn } from "tc-shared/log";
import * as i18n from "tc-shared/i18n/localize";
import {RepositoryTranslation, TranslationRepository} from "tc-shared/i18n/localize";
import {Registry} from "tc-shared/events";
import { RepositoryTranslation, TranslationRepository } from "tc-shared/i18n/localize";
import { Registry } from "tc-shared/events";
import * as i18nc from "../../i18n/CountryFlag";
import * as forum from "tc-shared/profiles/identities/teaspeak-forum";
import {formatMessage, set_icon_size} from "tc-shared/ui/frames/chat";
import {spawnTeamSpeakIdentityImport, spawnTeamSpeakIdentityImprove} from "tc-shared/ui/modal/ModalIdentity";
import {getAudioBackend, OutputDevice} from "tc-shared/audio/Player";
import {KeyMapSettings} from "tc-shared/ui/modal/settings/Keymap";
import { formatMessage, set_icon_size } from "tc-shared/ui/frames/chat";
import { spawnTeamSpeakIdentityImport, spawnTeamSpeakIdentityImprove } from "tc-shared/ui/modal/ModalIdentity";
import { getAudioBackend, OutputDevice } from "tc-shared/audio/Player";
import { KeyMapSettings } from "tc-shared/ui/modal/settings/Keymap";
import * as React from "react";
import * as ReactDOM from "react-dom";
import {NotificationSettings} from "tc-shared/ui/modal/settings/Notifications";
import {initialize_audio_microphone_controller} from "tc-shared/ui/modal/settings/Microphone";
import {MicrophoneSettings} from "tc-shared/ui/modal/settings/MicrophoneRenderer";
import {getBackend} from "tc-shared/backend";
import {MicrophoneSettingsEvents} from "tc-shared/ui/modal/settings/MicrophoneDefinitions";
import {promptYesNo} from "tc-shared/ui/modal/yes-no/Controller";
import { NotificationSettings } from "tc-shared/ui/modal/settings/Notifications";
import { initialize_audio_microphone_controller } from "tc-shared/ui/modal/settings/Microphone";
import { MicrophoneSettings } from "tc-shared/ui/modal/settings/MicrophoneRenderer";
import { getBackend } from "tc-shared/backend";
import { MicrophoneSettingsEvents } from "tc-shared/ui/modal/settings/MicrophoneDefinitions";
import { promptYesNo } from "tc-shared/ui/modal/yes-no/Controller";
type ProfileInfoEvent = {
id: string,
name: string,
nickname: string,
identity_type: "teaforo" | "teamspeak" | "nickname",
identity_type: "teamspeak" | "nickname",
identity_forum?: {
valid: boolean,
@ -52,7 +50,7 @@ export interface SettingProfileEvents {
"reload-profile": { profile_id?: string },
"select-profile": { profile_id: string },
"query-profile-list": { },
"query-profile-list": {},
"query-profile-list-result": {
status: "error" | "success" | "timeout",
@ -71,7 +69,7 @@ export interface SettingProfileEvents {
"select-identity-type": {
profile_id: string,
identity_type: "teamspeak" | "teaforo" | "nickname" | "unset"
identity_type: "teamspeak" | "nickname" | "unset"
},
"query-profile-validity": { profile_id: string },
@ -232,7 +230,6 @@ export function spawnSettingsModal(default_page?: string): Modal {
settings_audio_speaker(modal.htmlTag.find(".right .container.audio-speaker"), modal);
settings_audio_sounds(modal.htmlTag.find(".right .container.audio-sounds"), modal);
const update_profiles = settings_identity_profiles(modal.htmlTag.find(".right .container.identity-profiles"), modal);
settings_identity_forum(modal.htmlTag.find(".right .container.identity-forum"), modal, update_profiles as any);
modal.close_listener.push(() => {
if (profiles.requires_save())
@ -500,13 +497,13 @@ function settings_general_language(container: JQuery, modal: Modal) {
}
function settings_general_keymap(container: JQuery, modal: Modal) {
const entry = <KeyMapSettings/>;
const entry = <KeyMapSettings />;
ReactDOM.render(entry, container[0]);
modal.close_listener.push(() => ReactDOM.unmountComponentAtNode(container[0]));
}
function settings_general_notifications(container: JQuery, modal: Modal) {
const entry = <NotificationSettings/>;
const entry = <NotificationSettings />;
ReactDOM.render(entry, container[0]);
modal.close_listener.push(() => ReactDOM.unmountComponentAtNode(container[0]));
}
@ -599,7 +596,7 @@ function settings_audio_microphone(container: JQuery, modal: Modal) {
const registry = new Registry<MicrophoneSettingsEvents>();
initialize_audio_microphone_controller(registry);
const entry = <MicrophoneSettings events={registry}/>;
const entry = <MicrophoneSettings events={registry} />;
ReactDOM.render(entry, container[0]);
modal.close_listener.push(() => {
ReactDOM.unmountComponentAtNode(container[0]);
@ -876,11 +873,10 @@ export namespace modal_settings {
}
profiles.delete_profile(profile);
event_registry.fire_react("delete-profile-result", {status: "success", profile_id: event.profile_id});
event_registry.fire_react("delete-profile-result", { status: "success", profile_id: event.profile_id });
});
const build_profile_info = (profile: ConnectionProfile) => {
const forum_data = profile.selectedIdentity(IdentitifyType.TEAFORO) as TeaForumIdentity;
const teamspeak_data = profile.selectedIdentity(IdentitifyType.TEAMSPEAK) as TeaSpeakIdentity;
const nickname_data = profile.selectedIdentity(IdentitifyType.NICKNAME) as NameIdentity;
@ -889,10 +885,6 @@ export namespace modal_settings {
name: profile.profileName,
nickname: profile.defaultUsername,
identity_type: profile.selectedIdentityType as any,
identity_forum: !forum_data ? undefined : {
valid: forum_data.valid(),
fallback_name: forum_data.fallback_name()
},
identity_nickname: !nickname_data ? undefined : {
name: nickname_data.name(),
fallback_name: nickname_data.fallback_name()
@ -1041,7 +1033,7 @@ export namespace modal_settings {
});
event_registry.on("select-identity-type", event => {
if(!event.identity_type) {
if (!event.identity_type) {
/* dummy event for UI init */
return;
}
@ -1184,11 +1176,11 @@ export namespace modal_settings {
);
tag_avatar.hide(); /* no avatars yet */
tag.on('click', event => event_registry.fire("select-profile", {profile_id: profile.id}));
tag.on('click', event => event_registry.fire("select-profile", { profile_id: profile.id }));
tag.toggleClass("selected", selected);
tag_default.toggle(profile.id === "default");
event_registry.fire("query-profile-validity", {profile_id: profile.id});
event_registry.fire("query-profile-validity", { profile_id: profile.id });
return tag;
};
@ -1233,7 +1225,7 @@ export namespace modal_settings {
if (event.status !== "success") return;
event_registry.fire("query-profile-list");
event_registry.one("query-profile-list-result", e => event_registry.fire("select-profile", {profile_id: event.profile_id}));
event_registry.one("query-profile-list-result", e => event_registry.fire("select-profile", { profile_id: event.profile_id }));
});
event_registry.on("set-profile-name-result", event => {
@ -1274,7 +1266,7 @@ export namespace modal_settings {
/* we need a short delay so everything could apply*/
setTimeout(() => {
event_registry.fire("query-profile-validity", {profile_id: event.profile_id});
event_registry.fire("query-profile-validity", { profile_id: event.profile_id });
}, 100);
});
event_registry.on(["set-default-name-result", "set-profile-name-result", "set-identity-name-name-result", "generate-identity-teamspeak-result"], event => {
@ -1283,7 +1275,7 @@ export namespace modal_settings {
return;
}
if ((event as any).status !== "success") return;
event_registry.fire("query-profile-validity", {profile_id: (event as any).profile_id});
event_registry.fire("query-profile-validity", { profile_id: (event as any).profile_id });
})
}
@ -1304,7 +1296,7 @@ export namespace modal_settings {
const button = container.find(".button-set-default");
let current_profile;
button.on('click', event => event_registry.fire("set-default-profile", {profile_id: current_profile}));
button.on('click', event => event_registry.fire("set-default-profile", { profile_id: current_profile }));
event_registry.on("select-profile", event => {
current_profile = event.profile_id;
button.prop("disabled", !event.profile_id || event.profile_id === "default");
@ -1331,7 +1323,7 @@ export namespace modal_settings {
question: tr("Do you really want to delete this profile?"),
}).then(result => {
if (result)
event_registry.fire("delete-profile", {profile_id: current_profile});
event_registry.fire("delete-profile", { profile_id: current_profile });
});
});
@ -1354,7 +1346,7 @@ export namespace modal_settings {
button.on('click', event => {
createInputModal(tr("Please enter a name"), tr("Please enter a name for the new profile:"), text => text.length >= 3 && !profiles.find_profile_by_name(text), value => {
if (value)
event_registry.fire("create-profile", {name: value as string});
event_registry.fire("create-profile", { name: value as string });
}).open();
});
@ -1362,7 +1354,7 @@ export namespace modal_settings {
event_registry.on("create-profile-result", event => {
button.prop("disabled", false);
if (event.status === "success") {
event_registry.fire("select-profile", {profile_id: event.profile_id});
event_registry.fire("select-profile", { profile_id: event.profile_id });
return;
}
@ -1435,7 +1427,7 @@ export namespace modal_settings {
const profile = profiles.find_profile_by_name(text);
if (text.length < 3 || (profile && profile.id != current_profile)) return;
event_registry.fire("set-profile-name", {profile_id: current_profile, name: text});
event_registry.fire("set-profile-name", { profile_id: current_profile, name: text });
});
}
@ -1465,7 +1457,6 @@ export namespace modal_settings {
if (event.status === "success") {
current_identity_type = event.info.identity_type;
fallback_names["nickname"] = event.info.identity_nickname ? event.info.identity_nickname.fallback_name : undefined;
fallback_names["teaforo"] = event.info.identity_forum ? event.info.identity_forum.fallback_name : undefined;
fallback_names["teamspeak"] = event.info.identity_teamspeak ? event.info.identity_teamspeak.fallback_name : undefined;
last_name = event.info.nickname;
@ -1504,7 +1495,7 @@ export namespace modal_settings {
const text = input.val() as string;
if (text.length != 0 && text.length < 3) return;
event_registry.fire("set-default-name", {profile_id: current_profile, name: text});
event_registry.fire("set-default-name", { profile_id: current_profile, name: text });
});
}
@ -1608,7 +1599,7 @@ export namespace modal_settings {
input_unique_id.val(unique_id).attr("placeholder", null);
if (typeof level !== "number")
event_registry.fire("query-identity-teamspeak", {profile_id: current_profile});
event_registry.fire("query-identity-teamspeak", { profile_id: current_profile });
else
input_current_level.val(level).attr("placeholder", null);
@ -1656,10 +1647,10 @@ export namespace modal_settings {
title: tr("Are you sure"),
question: tr("Do you really want to generate a new identity and override the old identity?"),
}).then(result => {
if (result) event_registry.fire("generate-identity-teamspeak", {profile_id: current_profile});
if (result) event_registry.fire("generate-identity-teamspeak", { profile_id: current_profile });
});
} else {
event_registry.fire("generate-identity-teamspeak", {profile_id: current_profile});
event_registry.fire("generate-identity-teamspeak", { profile_id: current_profile });
}
});
@ -1684,10 +1675,10 @@ export namespace modal_settings {
title: tr("Are you sure"),
question: tr("Do you really want to import a new identity and override the old identity?"),
}).then(result => {
if (result) event_registry.fire("import-identity-teamspeak", {profile_id: current_profile});
if (result) event_registry.fire("import-identity-teamspeak", { profile_id: current_profile });
});
} else {
event_registry.fire("import-identity-teamspeak", {profile_id: current_profile});
event_registry.fire("import-identity-teamspeak", { profile_id: current_profile });
}
});
@ -1700,7 +1691,7 @@ export namespace modal_settings {
event_registry.on("import-identity-teamspeak-result", event => {
if (event.profile_id !== current_profile) return;
event_registry.fire_react("query-profile", {profile_id: event.profile_id}); /* we do it like this so the default nickname changes as well */
event_registry.fire_react("query-profile", { profile_id: event.profile_id }); /* we do it like this so the default nickname changes as well */
createInfoModal(tr("Identity imported"), tr("Your identity had been successfully imported generated")).open();
});
}
@ -1719,38 +1710,7 @@ export namespace modal_settings {
}
/* the improve button */
button_improve.on('click', event => event_registry.fire("improve-identity-teamspeak-level", {profile_id: current_profile}));
}
/* special info TeaSpeak - Forum */
{
const container_settings = container.find(".container-teaforo");
const container_valid = container_settings.find(".container-valid");
const container_invalid = container_settings.find(".container-invalid");
const button_setup = container_settings.find(".button-setup");
event_registry.on("select-identity-type", event => {
if (event.profile_id !== current_profile) return;
container_settings.toggle(event.identity_type === "teaforo");
});
event_registry.on("query-profile", event => {
container_valid.toggle(false);
container_invalid.toggle(false);
});
event_registry.on("query-profile-result", event => {
if (event.profile_id !== current_profile) return;
const valid = event.status === "success" && event.info.identity_forum && event.info.identity_forum.valid;
container_valid.toggle(!!valid);
container_invalid.toggle(!valid);
});
button_setup.on('click', event => event_registry.fire_react("setup-forum-connection"));
button_setup.toggle(settings.forum_setuppable);
button_improve.on('click', event => event_registry.fire("improve-identity-teamspeak-level", { profile_id: current_profile }));
}
/* special info nickname */
@ -1811,7 +1771,7 @@ export namespace modal_settings {
const profile = profiles.find_profile_by_name(text);
if (text.length < 3 || (profile && profile.id != current_profile)) return;
event_registry.fire("set-identity-name-name", {profile_id: current_profile, name: text});
event_registry.fire("set-identity-name-name", { profile_id: current_profile, name: text });
});
}
event_registry.on("select-profile", e => current_profile = e.profile_id);
@ -1822,7 +1782,7 @@ export namespace modal_settings {
/* profile list */
{
let timeout;
event_registry.on("query-profile-list", event => timeout = setTimeout(() => event_registry.fire("query-profile-list-result", {status: "timeout"}), 5000));
event_registry.on("query-profile-list", event => timeout = setTimeout(() => event_registry.fire("query-profile-list-result", { status: "timeout" }), 5000));
event_registry.on("query-profile-list-result", event => {
clearTimeout(timeout);
timeout = undefined;
@ -1835,7 +1795,7 @@ export namespace modal_settings {
event_registry.on("create-profile", event => {
clearTimeout(timeouts[event.name]);
timeouts[event.name] = setTimeout(() => {
event_registry.fire("create-profile-result", {name: event.name, status: "timeout"});
event_registry.fire("create-profile-result", { name: event.name, status: "timeout" });
}, 5000);
});
@ -1869,7 +1829,7 @@ export namespace modal_settings {
event_registry.on(event, event => {
clearTimeout(timeouts[event[key]]);
timeouts[event[key]] = setTimeout(() => {
const timeout_event = {status: "timeout"};
const timeout_event = { status: "timeout" };
timeout_event[key] = event[key];
event_registry.fire(response_event, timeout_event as any);
}, 5000);
@ -1899,21 +1859,21 @@ export namespace modal_settings {
if (event.profile_id !== selected_profile) return;
/* the selected profile has been deleted, so we need to select another one */
event_registry.fire("select-profile", {profile_id: "default"});
event_registry.fire("select-profile", { profile_id: "default" });
});
/* reselect the default profile or the new default profile */
event_registry.on("set-default-profile-result", event => {
if (event.status !== "success") return;
if (selected_profile === "default")
event_registry.fire("select-profile", {profile_id: event.new_profile_id});
event_registry.fire("select-profile", { profile_id: event.new_profile_id });
else if (selected_profile === event.old_profile_id)
event_registry.fire("select-profile", {profile_id: "default"});
event_registry.fire("select-profile", { profile_id: "default" });
});
event_registry.on("select-profile", event => {
selected_profile = event.profile_id;
event_registry.fire("query-profile", {profile_id: event.profile_id});
event_registry.fire("query-profile", { profile_id: event.profile_id });
});
event_registry.on("reload-profile", event => {
@ -1923,121 +1883,7 @@ export namespace modal_settings {
}
event_registry.fire("query-profile-list");
event_registry.fire("select-profile", {profile_id: "default"});
event_registry.fire("select-identity-type", {profile_id: "default", identity_type: undefined});
event_registry.fire("select-profile", { profile_id: "default" });
event_registry.fire("select-identity-type", { profile_id: "default", identity_type: undefined });
}
}
function settings_identity_forum(container: JQuery, modal: Modal, update_profiles: () => any) {
const containers_connected = container.find(".show-connected");
const containers_disconnected = container.find(".show-disconnected");
const update_state = () => {
const logged_in = forum.logged_in();
containers_connected.toggle(logged_in);
containers_disconnected.toggle(!logged_in);
if (logged_in) {
container.find(".forum-username").text(forum.data().name());
container.find(".forum-premium").text(forum.data().is_premium() ? tr("Yes") : tr("No"));
}
};
/* login */
{
const button_login = container.find(".button-login");
const input_username = container.find(".input-username");
const input_password = container.find(".input-password");
const container_error = container.find(".container-login .container-error");
const container_captcha_g = container.find(".g-recaptcha");
let captcha: boolean | string = false;
const update_button_state = () => {
let enabled = true;
enabled = enabled && !!input_password.val();
enabled = enabled && !!input_username.val();
enabled = enabled && (typeof (captcha) === "boolean" ? !captcha : !!captcha);
button_login.prop("disabled", !enabled);
};
/* username */
input_username.on('change keyup', update_button_state);
/* password */
input_password.on('change keyup', update_button_state);
button_login.on('click', event => {
input_username.prop("disabled", true);
input_password.prop("disabled", true);
button_login.prop("disabled", true);
container_error.removeClass("shown");
forum.login(input_username.val() as string, input_password.val() as string, typeof (captcha) === "string" ? captcha : undefined).then(state => {
captcha = false;
logTrace(LogCategory.GENERAL, tr("Forum login result: %o"), state);
if (state.status === "success") {
update_state();
update_profiles();
return;
}
setTimeout(() => {
if (!!state.error_message) /* clear password if we have an error */
input_password.val("");
input_password.focus();
update_button_state();
}, 0);
if (state.status === "captcha") {
//TODO Works currently only with localhost!
button_login.hide();
container_error.text(state.error_message || tr("Captcha required")).addClass("shown");
captcha = "";
logDebug(LogCategory.GENERAL, tr("Showing captcha for site-key: %o"), state.captcha.data);
forum.gcaptcha.spawn(container_captcha_g, state.captcha.data, token => {
captcha = token;
logTrace(LogCategory.GENERAL, tr("Got captcha token: %o"), token);
container_captcha_g.hide();
button_login.show();
update_button_state();
}).catch(error => {
logError(LogCategory.GENERAL, tr("Failed to initialize forum captcha: %o"), error);
container_error.text("Failed to initialize GReCaptcha! No authentication possible.").addClass("shown");
container_captcha_g.hide();
button_login.hide();
});
container_captcha_g.show();
} else {
container_error.text(state.error_message || tr("Unknown error")).addClass("shown");
}
}).catch(error => {
logError(LogCategory.GENERAL, tr("Failed to login within the forum. Error: %o"), error);
createErrorModal(tr("Forum login failed."), tr("Forum login failed. Lookup the console for more information")).open();
}).then(() => {
input_username.prop("disabled", false);
input_password.prop("disabled", false);
update_button_state();
});
});
update_button_state();
}
/* logout */
{
container.find(".button-logout").on('click', event => {
forum.logout().catch(error => {
logError(LogCategory.IDENTITIES, tr("Failed to logout from forum: %o"), error);
createErrorModal(tr("Forum logout failed"), formatMessage(tr("Failed to logout from forum account.{:br:}Error: {}"), error)).open();
}).then(() => {
if (modal.shown)
update_state();
update_profiles();
});
});
}
update_state();
}