Use better patterns for login view #671
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,37 @@ | ||
| {% extends "profiles/base_edit.html" %} | ||
|
|
||
| {% load trans blocktrans from i18n %} | ||
|
|
||
| {% block title %} | ||
| {% trans "Connected services" %} | ||
| {% endblock title %} | ||
| {% block edit_content_header %} | ||
| {% trans "Connected services" %} | ||
| {% endblock edit_content_header %} | ||
| {% block profile_admin_social_accounts %} | ||
| active | ||
| {% endblock profile_admin_social_accounts %} | ||
|
|
||
| {% block edit_content %} | ||
| {% include "socialaccount/partials/social_account_list.html" with objects=form.accounts %} | ||
|
|
||
| <div class="ui tiny modal" data-modal-id="socialaccount-connections"> | ||
| <i class="fa-solid fa-close close icon"></i> | ||
| <div class="header">{% trans "Add a connection" %}</div> | ||
| <div class="content center aligned"> | ||
| <div class="ui basic center aligned segment"> | ||
| <p> | ||
| {% blocktrans trimmed %} | ||
| You can connect your account with any of the following providers: | ||
| {% endblocktrans %} | ||
| </p> | ||
| <div class="ui relaxed list" data-bind="using: SocialAccountView()"> | ||
| {% include "socialaccount/snippets/provider_list.html" with process="connect" next="" %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="actions"> | ||
| <div class="ui cancel button">{% trans "Cancel" %}</div> | ||
| </div> | ||
| </div> | ||
| {% endblock edit_content %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,142 @@ | ||
| import ko from "knockout"; | ||
| import { msg } from "@lit/localize"; | ||
|
|
||
| import { Registry } from "../application/registry"; | ||
|
|
||
| /** | ||
| * Listing view for social account connections. | ||
| * | ||
| * This view is subclassed by the :js:cls:`LoginView`, as the templates that | ||
| * use this code are shared between the social account connection listing view | ||
| * and the login view. On the social account listing we don't want the same | ||
| * features for last login method etc so this view overloads the functions | ||
| * used. | ||
| */ | ||
| export class SocialAccountView { | ||
| static view_name = "SocialAccountView"; | ||
|
|
||
| constructor(options) { | ||
| this.github_modal_config = ko.observable(); | ||
| } | ||
|
|
||
| show_github_modal() { | ||
| this.github_modal_config((modal) => modal("show")); | ||
| } | ||
|
|
||
| // No-op to skip popup setup | ||
| popup_login_method() {} | ||
|
|
||
| save_login_method() { | ||
| return true; | ||
| } | ||
humitos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| /** | ||
| * LoginView saves a cookie for the last login method. | ||
| * | ||
| * Usage: | ||
| * | ||
| * .. code:: html | ||
| * | ||
| * <div data-bind="using: LoginView()"> | ||
| * <form method="post" action="..."> | ||
| * <button data-bind="click: save_login_method.bind('email'), semanticui: { popup: popup_login_method('email') }"> | ||
humitos marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| * Log in using GitHub | ||
| * </button> | ||
| * </form> | ||
| * </div> | ||
| */ | ||
| export class LoginView extends SocialAccountView { | ||
| static view_name = "LoginView"; | ||
|
|
||
| constructor(options) { | ||
| super(options); | ||
|
|
||
| /** @observable {string} Last tab to be selected. Comes from view */ | ||
| this.last_tab = ko.observable(options?.last_tab || "vcs"); | ||
| /** @observable {string} Last method to be used. Comes from view */ | ||
| // XXX fix default, this is just for testing | ||
| this.last_method = ko.observable(options?.last_method || "githubapp"); | ||
|
|
||
| // This is an named lookup for observables, one for each method. It is | ||
| // populated by the template code as each popup is configured. | ||
| this.popups = {}; | ||
| } | ||
|
|
||
| /** | ||
| * Add popup for login method | ||
| * | ||
| * This adds an observable using by the semanticui binding to add and | ||
| * manipulate a popup module on the element. | ||
| * | ||
| * Accepts multiple method ids just because we have a GitHub sub-modal right | ||
| * now. This can be removed eventually. | ||
| * | ||
| * @param {string|Array.<string>} method - Method id or list of method ids | ||
| * @param {string} position - Position to pass to SUI popup position attribute | ||
| * @param {string} method - Method id | ||
| */ | ||
| popup_login_method(method, position = "top center", fuzzy = true) { | ||
agjohnson marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| this.popups[method] = ko.observable((popup) => { | ||
humitos marked this conversation as resolved.
Show resolved
Hide resolved
humitos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| // This is using the KO data binding method for utilizing SUI module | ||
| // behaviors. Passing this an anonymous function provides access to | ||
| // `$(element).popup()` essentially. | ||
| // First set up the element as a manual popup, then manually show it. | ||
| popup({ | ||
| content: msg(`Last used`), | ||
| position: position, | ||
| variation: "mini teal", | ||
| closable: true, | ||
| preserve: true, | ||
| on: "manual", | ||
| }); | ||
| if (!Array.isArray(method) && this.last_method() == method) { | ||
| popup("show"); | ||
| } else if (Array.isArray(method) && method.includes(this.last_method())) { | ||
| popup("show"); | ||
| } | ||
| }); | ||
| return this.popups[method](); | ||
| } | ||
|
|
||
| /** | ||
| * Save a cookie to track last login method. | ||
| * | ||
| * This could be used like: | ||
| * | ||
| * .. code:: html | ||
| * | ||
| * <form method="post" action="..."> | ||
| * <button data-bind="click: save_login_method.bind('email')"> | ||
| * Log in using GitHub | ||
| * </button> | ||
| * </form> | ||
| * | ||
| * @param {string} method - Method id | ||
| * @returns {knockout_click} | ||
| */ | ||
| save_login_method(method) { | ||
| if (window.isSecureContext) { | ||
| console.debug("Setting last login method:", method); | ||
| cookieStore.set("last-login-method", method); | ||
| } else { | ||
| console.debug("Insecure, not setting last login method:", method); | ||
| } | ||
| return true; | ||
| } | ||
|
|
||
| // On top of showing the GitHub modal, show any popups for GitHub providers as | ||
| // well. This avoids requiring the popups to always be visible and avoids | ||
| // manual removal of the popups. | ||
| show_github_modal() { | ||
| super.show_github_modal(); | ||
| const last_method = this.last_method(); | ||
| if (["github", "githubapp"].includes(last_method)) { | ||
| console.debug(last_method, this.popups, this.popups[last_method]); | ||
| this.popups[last_method]((popup) => popup("show")); | ||
humitos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
| } | ||
| } | ||
|
|
||
| Registry.add_view(SocialAccountView); | ||
| Registry.add_view(LoginView); | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.