matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Authentication token generation WIP (#98)

Browse Source 
You can now generate links to join chatrooms with your current user. This can be used to create Docks in OBS for example. This could also be used to generate authentication token to join the chat from 3rd party tools.
This commit is contained in:
John Livingston
2024-06-16 19:48:02 +02:00
parent e83150cf87
commit 90afdafbd9
24 changed files with 988 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
assets/styles/elements/_dynamic-table-form.scss
View File

@ -10,42 +10,15 @@
@use "sass:color";
@use "../variables";
@use "../mixins/buttons";
@use "../mixins/tables";
livechat-dynamic-table-form {
// We need this variable to be known at that time
$bs-green: #39cc0b;
display: block;
margin-bottom: 3rem;
table {
table-layout: fixed;
text-align: center;
tr {
border: 1px var(--greyBackgroundColor) solid;
}
td,
th {
word-wrap: break-word;
vertical-align: top;
padding: 5px 7px;
}
td:last-child {
vertical-align: middle;
min-width: 28px;
> input:not([type="checkbox"]),
textarea {
min-width: 150px;
}
}
tbody tr:nth-child(odd) {
background-color: var(--greySecondaryBackgroundColor);
}
@include tables.data-table;
.livechat-dynamic-table-form-description-header {
font-size: small;
@ -57,74 +30,11 @@ livechat-dynamic-table-form {
text-align: left;
}
.dynamic-table-add-row,
.dynamic-table-remove-row {
// Peertube rounded-line-height-1-5 mixins
line-height: variables.$button-calc-line-height;
// Peertube peertube-button mixin (but with less horizontal padding)
padding: 4px;
border: 0;
font-weight: variables.$font-semibold;
border-radius: 3px !important;
text-align: center;
cursor: pointer;
font-size: variables.$button-font-size;
}
.dynamic-table-add-row {
background-color: var(--bs-green);
&,
&:active,
&:focus {
color: #fff;
background-color: color.adjust($bs-green, $lightness: 5%);
}
&:focus,
&.focus-visible {
box-shadow: 0 0 0 0.2rem color.adjust($bs-green, $lightness: 20%);
}
&:hover {
color: #fff;
background-color: color.adjust($bs-green, $lightness: 10%);
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
}
@include buttons.button-row-add;
}
.dynamic-table-remove-row {
background-color: var(--bs-orange);
&,
&:active,
&:focus {
color: #fff;
background-color: var(--mainColor);
}
&:focus,
&.focus-visible {
box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
}
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
}
@include buttons.button-row-remove;
}
}

1
assets/styles/elements/_index.scss
View File

@ -11,3 +11,4 @@
@use "share-chat";
@use "spinner";
@use "tags-input";
@use "token-list";

22
assets/styles/elements/_token-list.scss Normal file
View File

@ -0,0 +1,22 @@
/*
* SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@use "../mixins/buttons";
@use "../mixins/tables";
livechat-token-list {
table {
@include tables.data-table;
}
.livechat-create-token {
@include buttons.button-row-add;
}
.livechat-revoke-token {
@include buttons.button-row-remove;
}
}

89
assets/styles/mixins/_buttons.scss Normal file
View File

@ -0,0 +1,89 @@
/*
* SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
* SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@use "sass:color";
@use "../variables";
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
// We need this variable to be known at that time
$bs-green: #39cc0b;
@mixin button-row {
// Peertube rounded-line-height-1-5 mixins
line-height: variables.$button-calc-line-height;
// Peertube peertube-button mixin (but with less horizontal padding)
padding: 4px;
border: 0;
font-weight: variables.$font-semibold;
border-radius: 3px !important;
text-align: center;
cursor: pointer;
font-size: variables.$button-font-size;
}
@mixin button-row-add {
@include button-row;
background-color: var(--bs-green);
&,
&:active,
&:focus {
color: #fff;
background-color: color.adjust($bs-green, $lightness: 5%);
}
&:focus,
&.focus-visible {
box-shadow: 0 0 0 0.2rem color.adjust($bs-green, $lightness: 20%);
}
&:hover {
color: #fff;
background-color: color.adjust($bs-green, $lightness: 10%);
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
}
}
@mixin button-row-remove {
@include button-row;
background-color: var(--bs-orange);
&,
&:active,
&:focus {
color: #fff;
background-color: var(--mainColor);
}
&:focus,
&.focus-visible {
box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
}
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
}
}

39
assets/styles/mixins/tables.scss Normal file
View File

@ -0,0 +1,39 @@
/*
* SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
* SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
@mixin data-table {
table-layout: fixed;
text-align: center;
tr {
border: 1px var(--greyBackgroundColor) solid;
}
td,
th {
word-wrap: break-word;
vertical-align: top;
padding: 5px 7px;
}
td:last-child {
vertical-align: middle;
min-width: 28px;
> input:not([type="checkbox"]),
textarea {
min-width: 150px;
}
}
tbody tr:nth-child(odd) {
background-color: var(--greySecondaryBackgroundColor);
}
}