habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: migrate checkbox to switch (#4409)

Browse Source 
* start migrating to switch

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* general cleanup

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* remove broken Create provider

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* migrate all

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* migrate table selectors, fix dark theme

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-01-11 13:37:49 +01:00
committed by GitHub
parent f7037b9f33
commit ddbd8153e2
47 changed files with 702 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/admin/users/RelatedUserList.ts
View File

@ -393,12 +393,10 @@ export class RelatedUserList extends Table<User> {
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-check__input"
class="pf-c-switch__input"
type="checkbox"
id="hide-service-accounts"
name="hide-service-accounts"
?checked=${this.hideServiceAccounts}
@change=${() => {
this.hideServiceAccounts = !this.hideServiceAccounts;
@ -409,10 +407,13 @@ export class RelatedUserList extends Table<User> {
});
}}
/>
<label class="pf-c-check__label" for="hide-service-accounts">
${t`Hide service-accounts`}
</label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Hide service-accounts`}</span>
</label>
</div>
</div>
</div>`;

13
web/src/admin/users/ServiceAccountForm.ts
View File

@ -43,10 +43,15 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="createGroup">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${true} />
<label class="pf-c-check__label"> ${t`Create group`} </label>
</div>
<label class="pf-c-switch">
<input class="pf-c-switch__input" type="checkbox" ?checked=${true} />
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Create group`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Enabling this toggle will create a group named after the user, with the user as member.`}
</p>

13
web/src/admin/users/UserForm.ts
View File

@ -93,14 +93,19 @@ export class UserForm extends ModelForm<User, number> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="isActive">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.isActive, true)}
/>
<label class="pf-c-check__label"> ${t`Is active`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Is active`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Designates whether this user should be treated as active. Unselect this instead of deleting accounts.`}
</p>