2018-09-18 16:45:58 +02:00
|
|
|
$no-columns-breakpoint: 600px;
|
|
|
|
|
|
2016-10-23 12:05:55 +02:00
|
|
|
code {
|
2018-09-23 20:41:24 +02:00
|
|
|
font-family: $font-monospace, monospace;
|
2016-10-23 12:05:55 +02:00
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-18 16:37:15 +02:00
|
|
|
.form-container {
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-21 17:07:30 +02:00
|
|
|
.indicator-icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
color: $primary-text-color;
|
|
|
|
|
|
|
|
|
|
&.success {
|
|
|
|
|
background: $success-green;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.failure {
|
|
|
|
|
background: $error-red;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-18 16:37:15 +02:00
|
|
|
.simple_form {
|
Add WebAuthn as an alternative 2FA method (#14466)
* feat: add possibility of adding WebAuthn security keys to use as 2FA
This adds a basic UI for enabling WebAuthn 2FA. We did a little refactor
to the Settings page for editing the 2FA methods – now it will list the
methods that are available to the user (TOTP and WebAuthn) and from
there they'll be able to add or remove any of them.
Also, it's worth mentioning that for enabling WebAuthn it's required to
have TOTP enabled, so the first time that you go to the 2FA Settings
page, you'll be asked to set it up.
This work was inspired by the one donde by Github in their platform, and
despite it could be approached in different ways, we decided to go with
this one given that we feel that this gives a great UX.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add request for WebAuthn as second factor at login if enabled
This commits adds the feature for using WebAuthn as a second factor for
login when enabled.
If users have WebAuthn enabled, now a page requesting for the use of a
WebAuthn credential for log in will appear, although a link redirecting
to the old page for logging in using a two-factor code will also be
present.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add possibility of deleting WebAuthn Credentials
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: disable WebAuthn when an Admin disables 2FA for a user
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: remove ability to disable TOTP leaving only WebAuthn as 2FA
Following examples form other platforms like Github, we decided to make
Webauthn 2FA secondary to 2FA with TOTP, so that we removed the
possibility of removing TOTP authentication only, leaving users with
just WEbAuthn as 2FA. Instead, users will have to click on 'Disable 2FA'
in order to remove second factor auth.
The reason for WebAuthn being secondary to TOPT is that in that way,
users will still be able to log in using their code from their phone's
application if they don't have their security keys with them – or maybe
even lost them.
* We had to change a little the flow for setting up TOTP, given that now
it's possible to setting up again if you already had TOTP, in order to
let users modify their authenticator app – given that now it's not
possible for them to disable TOTP and set it up again with another
authenticator app.
So, basically, now instead of storing the new `otp_secret` in the
user, we store it in the session until the process of set up is
finished.
This was because, as it was before, when users clicked on 'Edit' in
the new two-factor methods lists page, but then went back without
finishing the flow, their `otp_secret` had been changed therefore
invalidating their previous authenticator app, making them unable to
log in again using TOTP.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* refactor: fix eslint errors
The PR build was failing given that linting returning some errors.
This commit attempts to fix them.
* refactor: normalize i18n translations
The build was failing given that i18n translations files were not
normalized.
This commits fixes that.
* refactor: avoid having the webauthn gem locked to a specific version
* refactor: use symbols for routes without '/'
* refactor: avoid sending webauthn disabled email when 2FA is disabled
When an admins disable 2FA for users, we were sending two mails
to them, one notifying that 2FA was disabled and the other to notify
that WebAuthn was disabled.
As the second one is redundant since the first email includes it, we can
remove it and send just one email to users.
* refactor: avoid creating new env variable for webauthn_origin config
* refactor: improve flash error messages for webauthn pages
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
2020-08-24 16:46:27 +02:00
|
|
|
&.hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-18 16:37:15 +02:00
|
|
|
.input {
|
|
|
|
|
margin-bottom: 15px;
|
2017-05-20 19:42:44 +02:00
|
|
|
overflow: hidden;
|
2018-09-18 16:45:58 +02:00
|
|
|
|
|
|
|
|
&.hidden {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.radio_buttons {
|
|
|
|
|
.radio {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.radio > label {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-left: 28px;
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -2px;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.boolean {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
|
|
|
|
.label_input > label {
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding-top: 5px;
|
|
|
|
|
color: $primary-text-color;
|
|
|
|
|
display: block;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label_input,
|
|
|
|
|
.hint {
|
|
|
|
|
padding-left: 28px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label_input__wrapper {
|
|
|
|
|
position: static;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label.checkbox {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 2px;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
2019-03-12 17:34:00 +01:00
|
|
|
|
|
|
|
|
label a {
|
|
|
|
|
color: $highlight-text-color;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:active,
|
|
|
|
|
&:focus {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-06-07 03:39:24 +02:00
|
|
|
|
|
|
|
|
.recommended {
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin: 0 4px;
|
|
|
|
|
margin-top: -2px;
|
|
|
|
|
}
|
2018-09-18 16:45:58 +02:00
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
|
2018-04-14 12:41:08 +02:00
|
|
|
.row {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 0 -5px;
|
|
|
|
|
|
|
|
|
|
.input {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
width: 50%;
|
|
|
|
|
padding: 0 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
Add WebAuthn as an alternative 2FA method (#14466)
* feat: add possibility of adding WebAuthn security keys to use as 2FA
This adds a basic UI for enabling WebAuthn 2FA. We did a little refactor
to the Settings page for editing the 2FA methods – now it will list the
methods that are available to the user (TOTP and WebAuthn) and from
there they'll be able to add or remove any of them.
Also, it's worth mentioning that for enabling WebAuthn it's required to
have TOTP enabled, so the first time that you go to the 2FA Settings
page, you'll be asked to set it up.
This work was inspired by the one donde by Github in their platform, and
despite it could be approached in different ways, we decided to go with
this one given that we feel that this gives a great UX.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add request for WebAuthn as second factor at login if enabled
This commits adds the feature for using WebAuthn as a second factor for
login when enabled.
If users have WebAuthn enabled, now a page requesting for the use of a
WebAuthn credential for log in will appear, although a link redirecting
to the old page for logging in using a two-factor code will also be
present.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add possibility of deleting WebAuthn Credentials
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: disable WebAuthn when an Admin disables 2FA for a user
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: remove ability to disable TOTP leaving only WebAuthn as 2FA
Following examples form other platforms like Github, we decided to make
Webauthn 2FA secondary to 2FA with TOTP, so that we removed the
possibility of removing TOTP authentication only, leaving users with
just WEbAuthn as 2FA. Instead, users will have to click on 'Disable 2FA'
in order to remove second factor auth.
The reason for WebAuthn being secondary to TOPT is that in that way,
users will still be able to log in using their code from their phone's
application if they don't have their security keys with them – or maybe
even lost them.
* We had to change a little the flow for setting up TOTP, given that now
it's possible to setting up again if you already had TOTP, in order to
let users modify their authenticator app – given that now it's not
possible for them to disable TOTP and set it up again with another
authenticator app.
So, basically, now instead of storing the new `otp_secret` in the
user, we store it in the session until the process of set up is
finished.
This was because, as it was before, when users clicked on 'Edit' in
the new two-factor methods lists page, but then went back without
finishing the flow, their `otp_secret` had been changed therefore
invalidating their previous authenticator app, making them unable to
log in again using TOTP.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* refactor: fix eslint errors
The PR build was failing given that linting returning some errors.
This commit attempts to fix them.
* refactor: normalize i18n translations
The build was failing given that i18n translations files were not
normalized.
This commits fixes that.
* refactor: avoid having the webauthn gem locked to a specific version
* refactor: use symbols for routes without '/'
* refactor: avoid sending webauthn disabled email when 2FA is disabled
When an admins disable 2FA for users, we were sending two mails
to them, one notifying that 2FA was disabled and the other to notify
that WebAuthn was disabled.
As the second one is redundant since the first email includes it, we can
remove it and send just one email to users.
* refactor: avoid creating new env variable for webauthn_origin config
* refactor: improve flash error messages for webauthn pages
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
2020-08-24 16:46:27 +02:00
|
|
|
.title {
|
|
|
|
|
color: #d9e1e8;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.hint {
|
|
|
|
|
color: $darker-text-color;
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: $highlight-text-color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
code {
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
padding: 0.2em 0.4em;
|
|
|
|
|
background: darken($ui-base-color, 12%);
|
|
|
|
|
}
|
2019-09-04 04:13:54 +02:00
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
list-style: disc;
|
|
|
|
|
margin-left: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul.hint {
|
|
|
|
|
margin-bottom: 15px;
|
2018-09-18 16:45:58 +02:00
|
|
|
}
|
|
|
|
|
|
2017-03-26 13:22:38 +02:00
|
|
|
span.hint {
|
2016-12-22 23:03:57 +01:00
|
|
|
display: block;
|
|
|
|
|
font-size: 12px;
|
2017-01-28 03:56:10 +01:00
|
|
|
margin-top: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2017-03-26 13:22:38 +02:00
|
|
|
p.hint {
|
|
|
|
|
margin-bottom: 15px;
|
2018-04-18 16:52:15 +02:00
|
|
|
color: $darker-text-color;
|
2017-07-11 15:27:59 +02:00
|
|
|
|
|
|
|
|
&.subtle-hint {
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
margin-bottom: 0;
|
2018-08-22 11:53:41 +02:00
|
|
|
}
|
2017-03-26 13:22:38 +02:00
|
|
|
}
|
|
|
|
|
|
Add WebAuthn as an alternative 2FA method (#14466)
* feat: add possibility of adding WebAuthn security keys to use as 2FA
This adds a basic UI for enabling WebAuthn 2FA. We did a little refactor
to the Settings page for editing the 2FA methods – now it will list the
methods that are available to the user (TOTP and WebAuthn) and from
there they'll be able to add or remove any of them.
Also, it's worth mentioning that for enabling WebAuthn it's required to
have TOTP enabled, so the first time that you go to the 2FA Settings
page, you'll be asked to set it up.
This work was inspired by the one donde by Github in their platform, and
despite it could be approached in different ways, we decided to go with
this one given that we feel that this gives a great UX.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add request for WebAuthn as second factor at login if enabled
This commits adds the feature for using WebAuthn as a second factor for
login when enabled.
If users have WebAuthn enabled, now a page requesting for the use of a
WebAuthn credential for log in will appear, although a link redirecting
to the old page for logging in using a two-factor code will also be
present.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add possibility of deleting WebAuthn Credentials
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: disable WebAuthn when an Admin disables 2FA for a user
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: remove ability to disable TOTP leaving only WebAuthn as 2FA
Following examples form other platforms like Github, we decided to make
Webauthn 2FA secondary to 2FA with TOTP, so that we removed the
possibility of removing TOTP authentication only, leaving users with
just WEbAuthn as 2FA. Instead, users will have to click on 'Disable 2FA'
in order to remove second factor auth.
The reason for WebAuthn being secondary to TOPT is that in that way,
users will still be able to log in using their code from their phone's
application if they don't have their security keys with them – or maybe
even lost them.
* We had to change a little the flow for setting up TOTP, given that now
it's possible to setting up again if you already had TOTP, in order to
let users modify their authenticator app – given that now it's not
possible for them to disable TOTP and set it up again with another
authenticator app.
So, basically, now instead of storing the new `otp_secret` in the
user, we store it in the session until the process of set up is
finished.
This was because, as it was before, when users clicked on 'Edit' in
the new two-factor methods lists page, but then went back without
finishing the flow, their `otp_secret` had been changed therefore
invalidating their previous authenticator app, making them unable to
log in again using TOTP.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* refactor: fix eslint errors
The PR build was failing given that linting returning some errors.
This commit attempts to fix them.
* refactor: normalize i18n translations
The build was failing given that i18n translations files were not
normalized.
This commits fixes that.
* refactor: avoid having the webauthn gem locked to a specific version
* refactor: use symbols for routes without '/'
* refactor: avoid sending webauthn disabled email when 2FA is disabled
When an admins disable 2FA for users, we were sending two mails
to them, one notifying that 2FA was disabled and the other to notify
that WebAuthn was disabled.
As the second one is redundant since the first email includes it, we can
remove it and send just one email to users.
* refactor: avoid creating new env variable for webauthn_origin config
* refactor: improve flash error messages for webauthn pages
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
2020-08-24 16:46:27 +02:00
|
|
|
.authentication-hint {
|
2020-04-28 10:16:55 +02:00
|
|
|
margin-bottom: 25px;
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-21 05:28:51 +02:00
|
|
|
.card {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
2017-04-08 22:20:08 +02:00
|
|
|
strong {
|
|
|
|
|
font-weight: 500;
|
2017-12-07 16:01:52 +01:00
|
|
|
|
|
|
|
|
@each $lang in $cjk-langs {
|
|
|
|
|
&:lang(#{$lang}) {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-04-08 22:20:08 +02:00
|
|
|
}
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.input.with_floating_label {
|
|
|
|
|
.label_input {
|
|
|
|
|
display: flex;
|
2017-01-28 03:56:10 +01:00
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
& > label {
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: $primary-text-color;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
min-width: 150px;
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input,
|
|
|
|
|
select {
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
2017-01-28 03:56:10 +01:00
|
|
|
}
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
&.select .hint {
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
margin-left: 150px;
|
2017-01-28 03:56:10 +01:00
|
|
|
}
|
2016-12-22 23:03:57 +01:00
|
|
|
}
|
|
|
|
|
|
2017-07-12 03:24:04 +02:00
|
|
|
.input.with_label {
|
2017-05-20 19:42:44 +02:00
|
|
|
.label_input > label {
|
2017-01-05 05:24:27 +01:00
|
|
|
font-family: inherit;
|
2018-09-18 16:45:58 +02:00
|
|
|
font-size: 14px;
|
2017-05-08 15:57:49 +02:00
|
|
|
color: $primary-text-color;
|
2016-11-16 17:51:02 +01:00
|
|
|
display: block;
|
2018-09-18 16:45:58 +02:00
|
|
|
margin-bottom: 8px;
|
2017-09-02 15:49:28 +02:00
|
|
|
word-wrap: break-word;
|
2018-09-18 16:45:58 +02:00
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
2017-09-02 15:49:28 +02:00
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.hint {
|
|
|
|
|
margin-top: 6px;
|
2017-09-02 15:49:28 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
flex: 390px;
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
2017-07-12 03:24:04 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input.with_block_label {
|
2018-09-18 16:45:58 +02:00
|
|
|
max-width: none;
|
2018-06-17 18:57:31 +02:00
|
|
|
|
2017-07-12 03:24:04 +02:00
|
|
|
& > label {
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: $primary-text-color;
|
|
|
|
|
display: block;
|
2018-09-18 16:45:58 +02:00
|
|
|
font-weight: 500;
|
2017-07-12 03:24:04 +02:00
|
|
|
padding-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hint {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-20 23:58:57 +02:00
|
|
|
ul {
|
|
|
|
|
columns: 2;
|
2017-07-12 03:24:04 +02:00
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
|
2020-01-23 22:00:13 +01:00
|
|
|
.input.datetime .label_input select {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: auto;
|
|
|
|
|
flex: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.required abbr {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: lighten($error-value-color, 12%);
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-18 16:37:15 +02:00
|
|
|
.fields-group {
|
|
|
|
|
margin-bottom: 25px;
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.input:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
2017-04-17 10:37:00 +02:00
|
|
|
}
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.fields-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 0 -10px;
|
|
|
|
|
padding-top: 5px;
|
|
|
|
|
margin-bottom: 25px;
|
2016-10-18 16:37:15 +02:00
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.input {
|
|
|
|
|
max-width: none;
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
2016-11-25 14:01:14 +01:00
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
&__column {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 10px;
|
2017-04-17 10:37:00 +02:00
|
|
|
flex: 1 1 auto;
|
2018-09-18 16:45:58 +02:00
|
|
|
min-height: 1px;
|
|
|
|
|
|
|
|
|
|
&-6 {
|
|
|
|
|
max-width: 50%;
|
|
|
|
|
}
|
2019-09-18 16:37:27 +02:00
|
|
|
|
|
|
|
|
.actions {
|
|
|
|
|
margin-top: 27px;
|
|
|
|
|
}
|
2016-11-23 16:26:53 +01:00
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.fields-group:last-child,
|
|
|
|
|
.fields-row__column.fields-group {
|
|
|
|
|
margin-bottom: 0;
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
2016-12-22 23:03:57 +01:00
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
|
|
|
|
&__column {
|
|
|
|
|
max-width: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fields-group:last-child,
|
|
|
|
|
.fields-row__column.fields-group,
|
|
|
|
|
.fields-row__column {
|
|
|
|
|
margin-bottom: 25px;
|
|
|
|
|
}
|
2016-12-22 23:03:57 +01:00
|
|
|
}
|
2020-04-28 10:16:55 +02:00
|
|
|
|
|
|
|
|
.fields-group.invited-by {
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
|
|
|
|
.hint {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.input.radio_buttons .radio label {
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: $primary-text-color;
|
|
|
|
|
display: block;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-12 03:24:04 +02:00
|
|
|
.check_boxes {
|
|
|
|
|
.checkbox {
|
|
|
|
|
label {
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: $primary-text-color;
|
2018-11-25 16:26:15 +01:00
|
|
|
display: inline-block;
|
2017-07-12 03:24:04 +02:00
|
|
|
width: auto;
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-top: 5px;
|
|
|
|
|
padding-left: 25px;
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-01 19:22:35 +02:00
|
|
|
input[type="checkbox"] {
|
2017-07-12 03:24:04 +02:00
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 5px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
Change unconfirmed user login behaviour (#11375)
Allow access to account settings, 2FA, authorized applications, and
account deletions to unconfirmed and pending users, as well as
users who had their accounts disabled. Suspended users cannot update
their e-mail or password or delete their account.
Display account status on account settings page, for example, when
an account is frozen, limited, unconfirmed or pending review.
After sign up, login users straight away and show a simple page that
tells them the status of their account with links to account settings
and logout, to reduce onboarding friction and allow users to correct
wrongly typed e-mail addresses.
Move the final sign-up step of SSO integrations to be the same
as above to reduce code duplication.
2019-07-22 10:48:50 +02:00
|
|
|
.input.static .label_input__wrapper {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border: 1px solid $dark-text-color;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-01 19:22:35 +02:00
|
|
|
input[type="text"],
|
|
|
|
|
input[type="number"],
|
|
|
|
|
input[type="email"],
|
|
|
|
|
input[type="password"],
|
|
|
|
|
input[type="url"],
|
2017-05-07 20:47:31 +02:00
|
|
|
textarea {
|
2016-11-07 18:45:44 +01:00
|
|
|
box-sizing: border-box;
|
2016-10-18 16:37:15 +02:00
|
|
|
font-size: 16px;
|
2017-05-08 15:57:49 +02:00
|
|
|
color: $primary-text-color;
|
2016-10-18 16:37:15 +02:00
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
outline: 0;
|
2017-01-05 05:24:27 +01:00
|
|
|
font-family: inherit;
|
2017-02-14 20:59:26 +01:00
|
|
|
resize: vertical;
|
2018-09-18 16:45:58 +02:00
|
|
|
background: darken($ui-base-color, 10%);
|
|
|
|
|
border: 1px solid darken($ui-base-color, 14%);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
padding: 10px;
|
2016-10-18 16:37:15 +02:00
|
|
|
|
2019-09-19 19:58:40 +02:00
|
|
|
&::placeholder {
|
|
|
|
|
color: lighten($darker-text-color, 4%);
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-18 16:37:15 +02:00
|
|
|
&:invalid {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:required:valid {
|
2018-09-18 16:45:58 +02:00
|
|
|
border-color: $valid-value-color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: darken($ui-base-color, 20%);
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
|
2017-05-07 20:47:31 +02:00
|
|
|
&:active,
|
|
|
|
|
&:focus {
|
2018-09-18 16:45:58 +02:00
|
|
|
border-color: $highlight-text-color;
|
|
|
|
|
background: darken($ui-base-color, 8%);
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-01 19:22:35 +02:00
|
|
|
input[type="text"],
|
|
|
|
|
input[type="number"],
|
|
|
|
|
input[type="email"],
|
|
|
|
|
input[type="password"] {
|
2020-12-14 10:03:09 +01:00
|
|
|
&:focus:invalid:not(:placeholder-shown),
|
|
|
|
|
&:required:invalid:not(:placeholder-shown) {
|
|
|
|
|
border-color: lighten($error-red, 12%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-18 16:37:15 +02:00
|
|
|
.input.field_with_errors {
|
2017-01-28 03:56:10 +01:00
|
|
|
label {
|
2018-04-18 16:52:15 +02:00
|
|
|
color: lighten($error-red, 12%);
|
2017-01-28 03:56:10 +01:00
|
|
|
}
|
|
|
|
|
|
2022-06-01 19:22:35 +02:00
|
|
|
input[type="text"],
|
|
|
|
|
input[type="number"],
|
|
|
|
|
input[type="email"],
|
|
|
|
|
input[type="password"],
|
2018-11-08 21:06:14 +01:00
|
|
|
textarea,
|
|
|
|
|
select {
|
|
|
|
|
border-color: lighten($error-red, 12%);
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error {
|
2017-01-28 03:56:10 +01:00
|
|
|
display: block;
|
2016-10-18 16:37:15 +02:00
|
|
|
font-weight: 500;
|
2018-04-18 16:52:15 +02:00
|
|
|
color: lighten($error-red, 12%);
|
2017-01-28 03:56:10 +01:00
|
|
|
margin-top: 4px;
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-12 17:34:00 +01:00
|
|
|
.input.disabled {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-18 16:37:15 +02:00
|
|
|
.actions {
|
|
|
|
|
margin-top: 30px;
|
2017-05-18 00:38:01 +02:00
|
|
|
display: flex;
|
2018-03-01 02:48:08 +01:00
|
|
|
|
|
|
|
|
&.actions--top {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
2016-10-22 19:38:47 +02:00
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
|
2017-05-07 20:47:31 +02:00
|
|
|
button,
|
2017-05-18 00:38:01 +02:00
|
|
|
.button,
|
2017-05-07 20:47:31 +02:00
|
|
|
.block-button {
|
2016-10-22 19:38:47 +02:00
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: 4px;
|
2022-06-19 08:18:08 +02:00
|
|
|
background: darken($ui-highlight-color, 2%);
|
2017-05-08 15:57:49 +02:00
|
|
|
color: $primary-text-color;
|
2016-10-22 19:38:47 +02:00
|
|
|
font-size: 18px;
|
2017-05-18 00:38:01 +02:00
|
|
|
line-height: inherit;
|
|
|
|
|
height: auto;
|
2016-10-22 19:38:47 +02:00
|
|
|
padding: 10px;
|
2017-01-27 20:28:46 +01:00
|
|
|
text-decoration: none;
|
2022-06-19 08:18:08 +02:00
|
|
|
text-transform: uppercase;
|
2017-01-27 20:28:46 +01:00
|
|
|
text-align: center;
|
|
|
|
|
box-sizing: border-box;
|
2016-10-22 19:38:47 +02:00
|
|
|
cursor: pointer;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
outline: 0;
|
|
|
|
|
margin-bottom: 10px;
|
2017-05-18 00:38:01 +02:00
|
|
|
margin-right: 10px;
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
|
2017-05-07 20:47:31 +02:00
|
|
|
&:active,
|
2022-06-19 08:18:08 +02:00
|
|
|
&:focus,
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: $ui-highlight-color;
|
2016-10-22 19:38:47 +02:00
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
|
2019-03-12 17:34:00 +01:00
|
|
|
&:disabled:hover {
|
|
|
|
|
background-color: $ui-primary-color;
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-22 19:38:47 +02:00
|
|
|
&.negative {
|
2017-05-08 15:57:49 +02:00
|
|
|
background: $error-value-color;
|
2016-10-18 16:37:15 +02:00
|
|
|
|
2016-10-22 19:38:47 +02:00
|
|
|
&:hover {
|
2017-05-08 15:57:49 +02:00
|
|
|
background-color: lighten($error-value-color, 5%);
|
2016-10-22 19:38:47 +02:00
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
|
2017-05-07 20:47:31 +02:00
|
|
|
&:active,
|
|
|
|
|
&:focus {
|
2017-05-08 15:57:49 +02:00
|
|
|
background-color: darken($error-value-color, 5%);
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-04-17 10:37:00 +02:00
|
|
|
|
|
|
|
|
select {
|
2018-09-18 16:45:58 +02:00
|
|
|
appearance: none;
|
|
|
|
|
box-sizing: border-box;
|
2017-04-17 10:37:00 +02:00
|
|
|
font-size: 16px;
|
2018-09-18 16:45:58 +02:00
|
|
|
color: $primary-text-color;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
outline: 0;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
resize: vertical;
|
|
|
|
|
background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px;
|
|
|
|
|
border: 1px solid darken($ui-base-color, 14%);
|
|
|
|
|
border-radius: 4px;
|
2019-01-17 23:28:30 +01:00
|
|
|
padding-left: 10px;
|
2018-12-14 01:44:39 +01:00
|
|
|
padding-right: 30px;
|
2018-09-18 16:45:58 +02:00
|
|
|
height: 41px;
|
2017-04-17 10:37:00 +02:00
|
|
|
}
|
2017-07-11 15:27:59 +02:00
|
|
|
|
2019-06-07 03:39:24 +02:00
|
|
|
h4 {
|
|
|
|
|
margin-bottom: 15px !important;
|
|
|
|
|
}
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.label_input {
|
|
|
|
|
&__wrapper {
|
|
|
|
|
position: relative;
|
2017-07-11 15:27:59 +02:00
|
|
|
}
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
&__append {
|
2017-07-11 15:27:59 +02:00
|
|
|
position: absolute;
|
2018-10-21 07:35:25 +02:00
|
|
|
right: 3px;
|
2018-09-18 16:45:58 +02:00
|
|
|
top: 1px;
|
|
|
|
|
padding: 10px;
|
2017-07-11 15:27:59 +02:00
|
|
|
padding-bottom: 9px;
|
|
|
|
|
font-size: 16px;
|
2018-04-21 21:35:55 +02:00
|
|
|
color: $dark-text-color;
|
2017-07-11 15:27:59 +02:00
|
|
|
font-family: inherit;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
cursor: default;
|
2018-07-04 17:36:33 +02:00
|
|
|
max-width: 140px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 1px;
|
|
|
|
|
width: 5px;
|
2018-09-18 16:45:58 +02:00
|
|
|
background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
|
2018-07-04 17:36:33 +02:00
|
|
|
}
|
2017-07-11 15:27:59 +02:00
|
|
|
}
|
|
|
|
|
}
|
2019-03-23 02:24:01 +01:00
|
|
|
|
|
|
|
|
&__overlay-area {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
2019-11-22 15:56:59 +01:00
|
|
|
&__blurred form {
|
|
|
|
|
filter: blur(2px);
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-23 02:24:01 +01:00
|
|
|
&__overlay {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: rgba($ui-base-color, 0.65);
|
|
|
|
|
border-radius: 4px;
|
2019-11-22 15:56:59 +01:00
|
|
|
margin-left: -4px;
|
|
|
|
|
margin-top: -4px;
|
|
|
|
|
padding: 4px;
|
2019-03-23 02:24:01 +01:00
|
|
|
|
|
|
|
|
&__content {
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
&.rich-formatting {
|
|
|
|
|
&,
|
|
|
|
|
p {
|
|
|
|
|
color: $primary-text-color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.block-icon {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
font-size: 24px;
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.flash-message {
|
2017-08-05 04:24:58 +02:00
|
|
|
background: lighten($ui-base-color, 8%);
|
2018-04-18 16:52:15 +02:00
|
|
|
color: $darker-text-color;
|
2016-10-18 16:37:15 +02:00
|
|
|
border-radius: 4px;
|
|
|
|
|
padding: 15px 10px;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
2018-10-13 01:51:30 +02:00
|
|
|
&.notice {
|
|
|
|
|
border: 1px solid rgba($valid-value-color, 0.5);
|
|
|
|
|
background: rgba($valid-value-color, 0.25);
|
|
|
|
|
color: $valid-value-color;
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-03 14:12:30 +02:00
|
|
|
&.warning {
|
|
|
|
|
border: 1px solid rgba($gold-star, 0.5);
|
|
|
|
|
background: rgba($gold-star, 0.25);
|
|
|
|
|
color: $gold-star;
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-13 01:51:30 +02:00
|
|
|
&.alert {
|
|
|
|
|
border: 1px solid rgba($error-value-color, 0.5);
|
2020-05-31 20:35:18 +02:00
|
|
|
background: rgba($error-value-color, 0.1);
|
2018-10-13 01:51:30 +02:00
|
|
|
color: $error-value-color;
|
|
|
|
|
}
|
|
|
|
|
|
Add WebAuthn as an alternative 2FA method (#14466)
* feat: add possibility of adding WebAuthn security keys to use as 2FA
This adds a basic UI for enabling WebAuthn 2FA. We did a little refactor
to the Settings page for editing the 2FA methods – now it will list the
methods that are available to the user (TOTP and WebAuthn) and from
there they'll be able to add or remove any of them.
Also, it's worth mentioning that for enabling WebAuthn it's required to
have TOTP enabled, so the first time that you go to the 2FA Settings
page, you'll be asked to set it up.
This work was inspired by the one donde by Github in their platform, and
despite it could be approached in different ways, we decided to go with
this one given that we feel that this gives a great UX.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add request for WebAuthn as second factor at login if enabled
This commits adds the feature for using WebAuthn as a second factor for
login when enabled.
If users have WebAuthn enabled, now a page requesting for the use of a
WebAuthn credential for log in will appear, although a link redirecting
to the old page for logging in using a two-factor code will also be
present.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add possibility of deleting WebAuthn Credentials
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: disable WebAuthn when an Admin disables 2FA for a user
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: remove ability to disable TOTP leaving only WebAuthn as 2FA
Following examples form other platforms like Github, we decided to make
Webauthn 2FA secondary to 2FA with TOTP, so that we removed the
possibility of removing TOTP authentication only, leaving users with
just WEbAuthn as 2FA. Instead, users will have to click on 'Disable 2FA'
in order to remove second factor auth.
The reason for WebAuthn being secondary to TOPT is that in that way,
users will still be able to log in using their code from their phone's
application if they don't have their security keys with them – or maybe
even lost them.
* We had to change a little the flow for setting up TOTP, given that now
it's possible to setting up again if you already had TOTP, in order to
let users modify their authenticator app – given that now it's not
possible for them to disable TOTP and set it up again with another
authenticator app.
So, basically, now instead of storing the new `otp_secret` in the
user, we store it in the session until the process of set up is
finished.
This was because, as it was before, when users clicked on 'Edit' in
the new two-factor methods lists page, but then went back without
finishing the flow, their `otp_secret` had been changed therefore
invalidating their previous authenticator app, making them unable to
log in again using TOTP.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* refactor: fix eslint errors
The PR build was failing given that linting returning some errors.
This commit attempts to fix them.
* refactor: normalize i18n translations
The build was failing given that i18n translations files were not
normalized.
This commits fixes that.
* refactor: avoid having the webauthn gem locked to a specific version
* refactor: use symbols for routes without '/'
* refactor: avoid sending webauthn disabled email when 2FA is disabled
When an admins disable 2FA for users, we were sending two mails
to them, one notifying that 2FA was disabled and the other to notify
that WebAuthn was disabled.
As the second one is redundant since the first email includes it, we can
remove it and send just one email to users.
* refactor: avoid creating new env variable for webauthn_origin config
* refactor: improve flash error messages for webauthn pages
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
2020-08-24 16:46:27 +02:00
|
|
|
&.hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-03 20:36:36 +02:00
|
|
|
a {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
color: $darker-text-color;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: $primary-text-color;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-03 14:12:30 +02:00
|
|
|
&.warning a {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: inherit;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus,
|
|
|
|
|
&:active {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-09-17 15:23:44 +02:00
|
|
|
p {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.oauth-code {
|
|
|
|
|
outline: 0;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
2019-06-06 18:51:46 +02:00
|
|
|
border: 0;
|
2017-09-17 15:23:44 +02:00
|
|
|
padding: 10px;
|
2018-09-23 20:41:24 +02:00
|
|
|
font-family: $font-monospace, monospace;
|
2017-09-17 15:23:44 +02:00
|
|
|
background: $ui-base-color;
|
2018-04-18 16:52:15 +02:00
|
|
|
color: $primary-text-color;
|
2017-09-17 15:23:44 +02:00
|
|
|
font-size: 14px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
|
|
&::-moz-focus-inner {
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::-moz-focus-inner,
|
|
|
|
|
&:focus,
|
|
|
|
|
&:active {
|
|
|
|
|
outline: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
|
background: lighten($ui-base-color, 4%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-18 16:37:15 +02:00
|
|
|
strong {
|
|
|
|
|
font-weight: 500;
|
2017-12-07 16:01:52 +01:00
|
|
|
|
|
|
|
|
@each $lang in $cjk-langs {
|
|
|
|
|
&:lang(#{$lang}) {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
2017-09-17 15:23:44 +02:00
|
|
|
|
|
|
|
|
@media screen and (max-width: 740px) and (min-width: 441px) {
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
}
|
2020-04-28 10:16:55 +02:00
|
|
|
|
|
|
|
|
&.translation-prompt {
|
|
|
|
|
text-align: unset;
|
|
|
|
|
color: unset;
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-10-18 16:37:15 +02:00
|
|
|
}
|
|
|
|
|
|
2021-04-03 14:12:30 +02:00
|
|
|
.flash-message-stack {
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
|
|
|
|
.flash-message {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
border-top-width: 0;
|
|
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
|
border-radius: 4px 4px 0 0;
|
|
|
|
|
border-top-width: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
border-radius: 0 0 4px 4px;
|
|
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-18 16:37:15 +02:00
|
|
|
.form-footer {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
a {
|
2018-04-18 16:52:15 +02:00
|
|
|
color: $darker-text-color;
|
2016-10-18 16:37:15 +02:00
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-09-18 16:45:58 +02:00
|
|
|
.quick-nav {
|
|
|
|
|
list-style: none;
|
|
|
|
|
margin-bottom: 25px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: $highlight-text-color;
|
2020-01-27 13:44:29 +01:00
|
|
|
text-transform: uppercase;
|
2018-09-18 16:45:58 +02:00
|
|
|
text-decoration: none;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus,
|
|
|
|
|
&:active {
|
|
|
|
|
color: lighten($highlight-text-color, 8%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-07 20:47:31 +02:00
|
|
|
.oauth-prompt,
|
|
|
|
|
.follow-prompt {
|
2016-10-22 19:38:47 +02:00
|
|
|
margin-bottom: 30px;
|
2018-04-18 16:52:15 +02:00
|
|
|
color: $darker-text-color;
|
2016-10-22 19:38:47 +02:00
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-bottom: 30px;
|
2018-10-15 16:09:08 +02:00
|
|
|
text-align: center;
|
2016-10-22 19:38:47 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
strong {
|
2018-04-21 21:35:55 +02:00
|
|
|
color: $secondary-text-color;
|
2016-10-22 19:38:47 +02:00
|
|
|
font-weight: 500;
|
2017-12-07 16:01:52 +01:00
|
|
|
|
|
|
|
|
@each $lang in $cjk-langs {
|
|
|
|
|
&:lang(#{$lang}) {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-10-22 19:38:47 +02:00
|
|
|
}
|
2022-03-01 16:48:58 +01:00
|
|
|
}
|
2017-08-28 00:01:07 +02:00
|
|
|
|
2022-03-01 16:48:58 +01:00
|
|
|
.oauth-prompt {
|
|
|
|
|
h3 {
|
|
|
|
|
color: $ui-secondary-color;
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.permissions-list {
|
|
|
|
|
border: 1px solid $ui-base-color;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: darken($ui-base-color, 4%);
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.actions {
|
|
|
|
|
margin: 0 -10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
form {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
min-height: 1px;
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
2017-08-28 00:01:07 +02:00
|
|
|
}
|
2016-10-22 19:38:47 +02:00
|
|
|
}
|
2017-01-27 20:28:46 +01:00
|
|
|
|
2017-04-08 22:20:08 +02:00
|
|
|
.qr-wrapper {
|
|
|
|
|
display: flex;
|
2017-09-02 15:49:28 +02:00
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: flex-start;
|
2017-04-08 22:20:08 +02:00
|
|
|
}
|
|
|
|
|
|
2017-01-27 20:28:46 +01:00
|
|
|
.qr-code {
|
2017-04-08 22:20:08 +02:00
|
|
|
flex: 0 0 auto;
|
2017-05-08 15:57:49 +02:00
|
|
|
background: $simple-background-color;
|
2017-01-27 20:28:46 +01:00
|
|
|
padding: 4px;
|
2017-09-02 15:49:28 +02:00
|
|
|
margin: 0 10px 20px 0;
|
2017-05-08 15:57:49 +02:00
|
|
|
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
2017-01-27 20:28:46 +01:00
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-04-08 22:20:08 +02:00
|
|
|
|
|
|
|
|
.qr-alternative {
|
2017-09-02 15:49:28 +02:00
|
|
|
margin-bottom: 20px;
|
2018-04-21 21:35:55 +02:00
|
|
|
color: $secondary-text-color;
|
2017-09-02 15:49:28 +02:00
|
|
|
flex: 150px;
|
2017-04-08 22:20:08 +02:00
|
|
|
|
|
|
|
|
samp {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-04-24 00:38:37 +02:00
|
|
|
|
|
|
|
|
.table-form {
|
|
|
|
|
p {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
|
|
|
|
strong {
|
|
|
|
|
font-weight: 500;
|
2017-12-07 16:01:52 +01:00
|
|
|
|
|
|
|
|
@each $lang in $cjk-langs {
|
|
|
|
|
&:lang(#{$lang}) {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-04-24 00:38:37 +02:00
|
|
|
}
|
|
|
|
|
}
|
2017-06-14 18:01:27 +02:00
|
|
|
}
|
2017-04-24 00:38:37 +02:00
|
|
|
|
2017-06-14 18:01:27 +02:00
|
|
|
.simple_form,
|
|
|
|
|
.table-form {
|
2017-04-24 00:38:37 +02:00
|
|
|
.warning {
|
|
|
|
|
box-sizing: border-box;
|
2017-05-08 15:57:49 +02:00
|
|
|
background: rgba($error-value-color, 0.5);
|
|
|
|
|
color: $primary-text-color;
|
|
|
|
|
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
|
|
|
|
|
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
|
2017-04-24 00:38:37 +02:00
|
|
|
border-radius: 4px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
|
|
|
|
a {
|
2017-05-08 15:57:49 +02:00
|
|
|
color: $primary-text-color;
|
2017-04-24 00:38:37 +02:00
|
|
|
text-decoration: underline;
|
|
|
|
|
|
2017-05-07 20:47:31 +02:00
|
|
|
&:hover,
|
|
|
|
|
&:focus,
|
|
|
|
|
&:active {
|
2017-04-24 00:38:37 +02:00
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
strong {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
2017-12-07 16:01:52 +01:00
|
|
|
@each $lang in $cjk-langs {
|
|
|
|
|
&:lang(#{$lang}) {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-09-28 02:11:14 +02:00
|
|
|
.fa {
|
2017-04-24 00:38:37 +02:00
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-pagination {
|
|
|
|
|
display: flex;
|
2017-10-04 22:49:36 +02:00
|
|
|
flex-wrap: wrap;
|
2017-04-24 00:38:37 +02:00
|
|
|
align-items: center;
|
|
|
|
|
|
2017-05-07 20:47:31 +02:00
|
|
|
.actions,
|
|
|
|
|
.pagination {
|
2017-04-24 00:38:37 +02:00
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.actions {
|
|
|
|
|
padding: 30px 0;
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-05-01 17:42:13 +02:00
|
|
|
|
2017-07-10 18:05:06 +02:00
|
|
|
.post-follow-actions {
|
|
|
|
|
text-align: center;
|
2018-04-18 16:52:15 +02:00
|
|
|
color: $darker-text-color;
|
2017-07-10 18:05:06 +02:00
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-02-04 05:42:13 +01:00
|
|
|
|
|
|
|
|
.alternative-login {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
|
|
h4 {
|
|
|
|
|
font-size: 16px;
|
2018-04-18 16:52:15 +02:00
|
|
|
color: $primary-text-color;
|
2018-02-04 05:42:13 +01:00
|
|
|
text-align: center;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
border: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-07-05 18:31:35 +02:00
|
|
|
|
|
|
|
|
.scope-danger {
|
|
|
|
|
color: $warning-red;
|
|
|
|
|
}
|
2018-08-24 04:33:27 +02:00
|
|
|
|
|
|
|
|
.form_admin_settings_site_short_description,
|
|
|
|
|
.form_admin_settings_site_description,
|
|
|
|
|
.form_admin_settings_site_extended_description,
|
|
|
|
|
.form_admin_settings_site_terms,
|
|
|
|
|
.form_admin_settings_custom_css,
|
|
|
|
|
.form_admin_settings_closed_registrations_message {
|
|
|
|
|
textarea {
|
2018-09-23 20:41:24 +02:00
|
|
|
font-family: $font-monospace, monospace;
|
2018-08-24 04:33:27 +02:00
|
|
|
}
|
|
|
|
|
}
|
2018-09-18 16:45:58 +02:00
|
|
|
|
|
|
|
|
.input-copy {
|
|
|
|
|
background: darken($ui-base-color, 10%);
|
|
|
|
|
border: 1px solid darken($ui-base-color, 14%);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding-right: 4px;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 1px;
|
|
|
|
|
transition: border-color 300ms linear;
|
|
|
|
|
|
|
|
|
|
&__wrapper {
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-01 19:22:35 +02:00
|
|
|
input[type="text"] {
|
2018-09-18 16:45:58 +02:00
|
|
|
background: transparent;
|
|
|
|
|
border: 0;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
font-size: 14px;
|
2018-09-23 20:41:24 +02:00
|
|
|
font-family: $font-monospace, monospace;
|
2018-09-18 16:45:58 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
margin: 4px;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 7px 18px;
|
|
|
|
|
padding-bottom: 6px;
|
|
|
|
|
width: auto;
|
|
|
|
|
transition: background 300ms linear;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.copied {
|
|
|
|
|
border-color: $valid-value-color;
|
|
|
|
|
transition: none;
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
background: $valid-value-color;
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-03-18 21:00:55 +01:00
|
|
|
|
2020-12-10 06:27:26 +01:00
|
|
|
.input.user_confirm_password,
|
|
|
|
|
.input.user_website {
|
|
|
|
|
&:not(.field_with_errors) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-03-01 16:48:58 +01:00
|
|
|
|
|
|
|
|
.permissions-list {
|
|
|
|
|
&__item {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
color: $ui-secondary-color;
|
|
|
|
|
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
&__text {
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
|
|
|
|
|
&__title {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__type {
|
|
|
|
|
color: $darker-text-color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__icon {
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
width: 30px;
|
|
|
|
|
color: $valid-value-color;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
border-bottom: 0;
|
2022-03-02 20:28:25 +01:00
|
|
|
padding-bottom: 0;
|
2022-03-01 16:48:58 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
Revamp post filtering system (#18058)
* Add model for custom filter keywords
* Use CustomFilterKeyword internally
Does not change the API
* Fix /filters/edit and /filters/new
* Add migration tests
* Remove whole_word column from custom_filters (covered by custom_filter_keywords)
* Redesign /filters
Instead of a list, present a card that displays more information and handles
multiple keywords per filter.
* Redesign /filters/new and /filters/edit to add and remove keywords
This adds a new gem dependency: cocoon, as well as a npm dependency:
cocoon-js-vanilla. Those are used to easily populate and remove form fields
from the user interface when manipulating multiple keyword filters at once.
* Add /api/v2/filters to edit filter with multiple keywords
Entities:
- `Filter`: `id`, `title`, `filter_action` (either `hide` or `warn`), `context`
`keywords`
- `FilterKeyword`: `id`, `keyword`, `whole_word`
API endpoits:
- `GET /api/v2/filters` to list filters (including keywords)
- `POST /api/v2/filters` to create a new filter
`keywords_attributes` can also be passed to create keywords in one request
- `GET /api/v2/filters/:id` to read a particular filter
- `PUT /api/v2/filters/:id` to update a new filter
`keywords_attributes` can also be passed to edit, delete or add keywords in
one request
- `DELETE /api/v2/filters/:id` to delete a particular filter
- `GET /api/v2/filters/:id/keywords` to list keywords for a filter
- `POST /api/v2/filters/:filter_id/keywords/:id` to add a new keyword to a
filter
- `GET /api/v2/filter_keywords/:id` to read a particular keyword
- `PUT /api/v2/filter_keywords/:id` to edit a particular keyword
- `DELETE /api/v2/filter_keywords/:id` to delete a particular keyword
* Change from `irreversible` boolean to `action` enum
* Remove irrelevent `irreversible_must_be_within_context` check
* Fix /filters/new and /filters/edit with update for filter_action
* Fix Rubocop/Codeclimate complaining about task names
* Refactor FeedManager#phrase_filtered?
This moves regexp building and filter caching to the `CustomFilter` class.
This does not change the functional behavior yet, but this changes how the
cache is built, doing per-custom_filter regexps so that filters can be matched
independently, while still offering caching.
* Perform server-side filtering and output result in REST API
* Fix numerous filters_changed events being sent when editing multiple keywords at once
* Add some tests
* Use the new API in the WebUI
- use client-side logic for filters we have fetched rules for.
This is so that filter changes can be retroactively applied without
reloading the UI.
- use server-side logic for filters we haven't fetched rules for yet
(e.g. network error, or initial timeline loading)
* Minor optimizations and refactoring
* Perform server-side filtering on the streaming server
* Change the wording of filter action labels
* Fix issues pointed out by linter
* Change design of “Show anyway” link in accordence to review comments
* Drop “irreversible” filtering behavior
* Move /api/v2/filter_keywords to /api/v1/filters/keywords
* Rename `filter_results` attribute to `filtered`
* Rename REST::LegacyFilterSerializer to REST::V1::FilterSerializer
* Fix systemChannelId value in streaming server
* Simplify code by removing client-side filtering code
The simplifcation comes at a cost though: filters aren't retroactively
applied anymore.
2022-06-28 09:42:13 +02:00
|
|
|
|
|
|
|
|
.keywords-table {
|
|
|
|
|
thead {
|
|
|
|
|
th {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th:first-child {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tfoot {
|
|
|
|
|
td {
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input.string {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label_input__wrapper {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-action-link {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
}
|
