booth 0.0.1

data/app/assets/javascripts/booth/all.js

@@ -0,0 +1,162 @@
+/// <reference path='webauthn-json.ts' />
+//= require rails-ujs
+//= require @github/webauthn-json/dist/browser-global/webauthn-json.browser-global
+var Booth;
+(function (Booth) {
+    function reloadSoon() {
+        const seconds = Math.floor(Math.random() * 3) + 5; // 4,5,6 or 7 to avoid request bursts
+        setTimeout(() => {
+            console.debug('Reloading page...');
+            window.location.reload();
+        }, 1000 * seconds);
+    }
+    Booth.reloadSoon = reloadSoon;
+    let Webauth;
+    (function (Webauth) {
+        class Registration {
+            constructor(form, challengeData) {
+                this.form = form;
+                this.challengeData = challengeData;
+                this.call();
+            }
+            call() {
+                console.debug('WebAuthn Registration Ceremony - Initiation Phase Part 2 - START');
+                webauthnJSON.create({ publicKey: this.challengeData }).then((responseData) => {
+                    console.debug(`WebAuthn Registration Ceremony - Initiation Phase Part 2 - SUCCESS - ${JSON.stringify(responseData)}`);
+                    new Verification(this.form, responseData);
+                }).catch((error) => {
+                    console.error(`WebAuthn Registration Ceremony - Verification Phase - ERROR - ${error.name} - ${error.message}`);
+                    if (error.name == 'NotAllowedError') {
+                        // Every webauth registration form needs this localized error message.
+                        alert(this.form.dataset.boothIncompatibleDeviceMessage);
+                    }
+                    else {
+                        alert(error.message);
+                    }
+                });
+            }
+        }
+        Webauth.Registration = Registration;
+        class Authentication {
+            constructor(form, challengeData) {
+                this.form = form;
+                this.challengeData = challengeData;
+                this.call();
+            }
+            call() {
+                console.debug('WebAuthn Authentication Ceremony - Initiation Phase Part 2 - START');
+                webauthnJSON.get({ publicKey: this.challengeData }).then((responseData) => {
+                    console.debug(`WebAuthn Authentication Ceremony - Initiation Phase Part 2 - SUCCESS - ${JSON.stringify(responseData)}`);
+                    new Verification(this.form, responseData);
+                }).catch((error) => {
+                    console.error(`WebAuthn Authentication Ceremony - Verification Phase - ERROR - ${error.name} - ${error.message}`);
+                    if (error.name == 'NotAllowedError') {
+                        // Every webauth authentication form needs this localized error message.
+                        alert(this.form.dataset.boothUnknownDeviceMessage);
+                    }
+                    else {
+                        alert(error.message);
+                    }
+                });
+            }
+        }
+        Webauth.Authentication = Authentication;
+        class Verification {
+            constructor(form, webauth) {
+                this.form = form;
+                this.webauth = webauth;
+                this.call();
+            }
+            call() {
+                console.debug(`WebAuthn Ceremony - Verification Phase - START - ${this.formMethod} ${this.formUrl}`);
+                const options = {
+                    body: JSON.stringify(this.webauth),
+                    method: this.formMethod,
+                    credentials: 'same-origin',
+                    // Rails should not redirect us anywhere when making API calls.
+                    // But in order to avoid mistakes let's be sure and never follow anywhere.
+                    redirect: 'manual',
+                    headers: {
+                        'Content-type': 'application/json',
+                        'Accept': 'application/json',
+                        'X-CSRF-Token': this.csrfToken
+                    }
+                };
+                fetch(this.formUrl, options)
+                    .then((response) => {
+                    // Conventionally the server returns 201 on successful WebAuth verification.
+                    // That makes it easier to detect a mistake (most other server responses will usually return 200).
+                    if (response.status == 201) {
+                        console.debug(`WebAuthn Ceremony - Verification Phase - SUCCESS - ${response.statusText}`);
+                        console.info(`Reloading page with a GET request: ${window.location.href}`);
+                        window.location.href = window.location.href;
+                    }
+                    else {
+                        // TODO: Extract error message from JSON that the server sent.
+                        const message = `WebAuthn Ceremony - Verification Phase - ERROR - ${response.statusText} ${response.body}`;
+                        console.debug(message);
+                        alert(message);
+                    }
+                }).catch((error) => {
+                    const message = 'Please check your Internet connection and try again later.';
+                    console.error(message);
+                    alert(message);
+                });
+            }
+            get formUrl() {
+                return this.form.action;
+            }
+            get formMethod() {
+                return this.form.querySelector('input[name="_method"]')?.value?.toUpperCase() || 'POST';
+            }
+            get csrfToken() {
+                return document.querySelector('meta[name="csrf-token"]')?.content;
+            }
+        }
+        Webauth.Verification = Verification;
+    })(Webauth = Booth.Webauth || (Booth.Webauth = {}));
+})(Booth || (Booth = {}));
+// --------------
+// Initialization
+// --------------
+document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.js-booth-webauth-registration').forEach((form) => {
+        form.addEventListener('ajax:before', () => {
+            console.debug('WebAuthn Registration Ceremony - Initiation Phase Part 1 - START');
+        });
+        form.addEventListener('ajax:success', (event) => {
+            const [data, status, xhr] = event.detail;
+            console.debug(`WebAuthn Registration Ceremony - Initiation Phase Part 1 - SUCCESS - ${JSON.stringify(data)}`);
+            new Booth.Webauth.Registration(form, data);
+        });
+        form.addEventListener('ajax:error', (event) => {
+            const [data, status, xhr] = event.detail;
+            // TODO: Extract error message from JSON that the server sent.
+            //       I don't think we need to reload the page on the registration page.
+            const message = `WebAuthn Registration Ceremony - Initiation Phase Part 1 - ERROR - ${xhr.responseText}`;
+            console.error(message);
+            alert(message);
+        });
+    });
+    document.querySelectorAll('.js-booth-webauth-authentication').forEach((form) => {
+        form.addEventListener('ajax:before', () => {
+            console.debug('WebAuthn Authentication Ceremony - Initiation Phase Part 1 - START');
+        });
+        form.addEventListener('ajax:success', (event) => {
+            const [data, status, xhr] = event.detail;
+            console.debug(`WebAuthn Authentication Ceremony - Initiation Phase Part 1 - SUCCESS - ${JSON.stringify(data)}`);
+            new Booth.Webauth.Authentication(form, data);
+        });
+        form.addEventListener('ajax:error', (event) => {
+            const [data, status, xhr] = event.detail;
+            // TODO: Extract error message from JSON that the server sent.
+            //       On the authentication page there are timeout restrictions, it would be a good idea to reload page.
+            const message = `WebAuthn Authentication Ceremony - Initiation Phase Part 1 - ERROR - ${xhr.responseText}`;
+            console.error(message);
+            alert(message);
+        });
+    });
+    if (document.querySelector('.js-booth-polling'))
+        Booth.reloadSoon();
+});
+//# sourceMappingURL=all.js.map

data/app/assets/javascripts/booth/all.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"all.js","sourceRoot":"","sources":["webauthn-json.ts","booth.ts"],"names":[],"mappings":"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"}

data/app/assets/javascripts/booth/booth.ts

@@ -0,0 +1,194 @@
+/// <reference path='webauthn-json.ts' />
+
+//= require rails-ujs
+//= require @github/webauthn-json/dist/browser-global/webauthn-json.browser-global
+
+namespace Booth {
+  export function reloadSoon() {
+    const seconds = Math.floor(Math.random() * 3) + 5 // 4,5,6 or 7 to avoid request bursts
+
+    setTimeout(() => {
+      console.debug('Reloading page...')
+      window.location.reload()
+    }, 1000 * seconds)
+  }
+
+  export namespace Webauth {
+    export class Registration {
+      private form: HTMLFormElement
+      private challengeData: any
+
+      constructor(form: HTMLFormElement, challengeData: any) {
+        this.form = form
+        this.challengeData = challengeData
+        this.call()
+      }
+
+      private call() {
+        console.debug('WebAuthn Registration Ceremony - Initiation Phase Part 2 - START')
+        webauthnJSON.create({ publicKey: this.challengeData }).then((responseData) => {
+          console.debug(`WebAuthn Registration Ceremony - Initiation Phase Part 2 - SUCCESS - ${JSON.stringify(responseData)}`)
+          new Verification(this.form, responseData)
+
+        }).catch((error: DOMException) => {
+          console.error(`WebAuthn Registration Ceremony - Verification Phase - ERROR - ${error.name} - ${error.message}`)
+
+          if (error.name == 'NotAllowedError') {
+            // Every webauth registration form needs this localized error message.
+            alert(this.form.dataset.boothIncompatibleDeviceMessage)
+          } else {
+            alert(error.message)
+          }
+        })
+      }
+    }
+
+    export class Authentication {
+      private form: HTMLFormElement
+      private challengeData: any
+
+      constructor(form: HTMLFormElement, challengeData: any) {
+        this.form = form
+        this.challengeData = challengeData
+        this.call()
+      }
+
+      private call() {
+        console.debug('WebAuthn Authentication Ceremony - Initiation Phase Part 2 - START')
+        webauthnJSON.get({ publicKey: this.challengeData }).then((responseData) => {
+          console.debug(`WebAuthn Authentication Ceremony - Initiation Phase Part 2 - SUCCESS - ${JSON.stringify(responseData)}`)
+          new Verification(this.form, responseData)
+
+        }).catch((error) => {
+          console.error(`WebAuthn Authentication Ceremony - Verification Phase - ERROR - ${error.name} - ${error.message}`)
+
+          if (error.name == 'NotAllowedError') {
+            // Every webauth authentication form needs this localized error message.
+            alert(this.form.dataset.boothUnknownDeviceMessage)
+          } else {
+            alert(error.message)
+          }
+        })
+      }
+    }
+
+    export class Verification {
+      private form: HTMLFormElement
+      private webauth: any
+
+      public constructor(form: HTMLFormElement, webauth: any) {
+        this.form = form
+        this.webauth = webauth
+        this.call()
+      }
+
+      private call() {
+        console.debug(`WebAuthn Ceremony - Verification Phase - START - ${this.formMethod} ${this.formUrl}`)
+
+        const options: RequestInit = {
+          body: JSON.stringify(this.webauth),
+          method: this.formMethod,
+          credentials: 'same-origin',
+          // Rails should not redirect us anywhere when making API calls.
+          // But in order to avoid mistakes let's be sure and never follow anywhere.
+          redirect: 'manual',
+          headers: {
+          'Content-type': 'application/json',
+          'Accept': 'application/json',
+          'X-CSRF-Token': this.csrfToken
+          }
+        }
+
+        fetch(this.formUrl, options)
+        .then((response) => {
+
+          // Conventionally the server returns 201 on successful WebAuth verification.
+          // That makes it easier to detect a mistake (most other server responses will usually return 200).
+          if (response.status == 201) {
+            console.debug(`WebAuthn Ceremony - Verification Phase - SUCCESS - ${response.statusText}`)
+            console.info(`Reloading page with a GET request: ${window.location.href}`)
+            window.location.href = window.location.href
+
+          } else {
+            // TODO: Extract error message from JSON that the server sent.
+            const message = `WebAuthn Ceremony - Verification Phase - ERROR - ${response.statusText} ${response.body}`
+            console.debug(message)
+            alert(message)
+          }
+
+        }).catch((error) => {
+          const message = 'Please check your Internet connection and try again later.'
+          console.error(message)
+          alert(message)
+        })
+      }
+
+      private get formUrl() {
+        return this.form.action
+      }
+
+      private get formMethod() {
+        return this.form.querySelector<HTMLInputElement>('input[name="_method"]')?.value?.toUpperCase() || 'POST'
+      }
+
+      private get csrfToken() {
+        return document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content
+      }
+    }
+  }
+}
+
+
+
+
+// --------------
+// Initialization
+// --------------
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  document.querySelectorAll('.js-booth-webauth-registration').forEach((form: HTMLFormElement) => {
+    form.addEventListener('ajax:before', () => {
+      console.debug('WebAuthn Registration Ceremony - Initiation Phase Part 1 - START')
+    })
+
+    form.addEventListener('ajax:success', (event: CustomEvent) => {
+      const [data, status, xhr] = event.detail
+      console.debug(`WebAuthn Registration Ceremony - Initiation Phase Part 1 - SUCCESS - ${JSON.stringify(data)}`)
+      new Booth.Webauth.Registration(form, data)
+    })
+
+    form.addEventListener('ajax:error', (event: CustomEvent) => {
+      const [data, status, xhr] = event.detail
+      // TODO: Extract error message from JSON that the server sent.
+      //       I don't think we need to reload the page on the registration page.
+      const message = `WebAuthn Registration Ceremony - Initiation Phase Part 1 - ERROR - ${xhr.responseText}`
+      console.error(message)
+      alert(message)
+    })
+  })
+
+  document.querySelectorAll('.js-booth-webauth-authentication').forEach((form: HTMLFormElement) => {
+    form.addEventListener('ajax:before', () => {
+      console.debug('WebAuthn Authentication Ceremony - Initiation Phase Part 1 - START')
+    })
+
+    form.addEventListener('ajax:success', (event: CustomEvent) => {
+      const [data, status, xhr] = event.detail
+      console.debug(`WebAuthn Authentication Ceremony - Initiation Phase Part 1 - SUCCESS - ${JSON.stringify(data)}`)
+      new Booth.Webauth.Authentication(form, data)
+    })
+
+    form.addEventListener('ajax:error', (event: CustomEvent) => {
+      const [data, status, xhr] = event.detail
+      // TODO: Extract error message from JSON that the server sent.
+      //       On the authentication page there are timeout restrictions, it would be a good idea to reload page.
+      const message = `WebAuthn Authentication Ceremony - Initiation Phase Part 1 - ERROR - ${xhr.responseText}`
+      console.error(message)
+      alert(message)
+    })
+  })
+
+  if (document.querySelector('.js-booth-polling')) Booth.reloadSoon()
+
+})

data/app/assets/javascripts/booth/webauthn-json.ts

@@ -0,0 +1,99 @@
+type Base64urlString = string;
+type SchemaLeaf = "copy" | "convert";
+interface SchemaObject {
+    [property: string]: {
+        required: boolean;
+        schema: Schema;
+    };
+}
+type SchemaArray = [SchemaObject] | [SchemaLeaf];
+type Schema = SchemaLeaf | SchemaArray | SchemaObject;
+interface CredPropsAuthenticationExtensionsClientOutputsJSON {
+    rk: boolean;
+}
+interface PublicKeyCredentialDescriptorJSON {
+    type: PublicKeyCredentialType;
+    id: Base64urlString;
+    transports?: AuthenticatorTransport[];
+}
+interface SimpleWebAuthnExtensionsJSON {
+    appid?: string;
+    appidExclude?: string;
+    credProps?: boolean;
+}
+interface SimpleClientExtensionResultsJSON {
+    appid?: boolean;
+    appidExclude?: boolean;
+    credProps?: CredPropsAuthenticationExtensionsClientOutputsJSON;
+}
+interface PublicKeyCredentialUserEntityJSON extends PublicKeyCredentialEntity {
+    displayName: string;
+    id: Base64urlString;
+}
+declare interface AuthenticatorSelectionCriteriaJSON extends AuthenticatorSelectionCriteria {
+    residentKey?: ResidentKeyRequirement;
+}
+interface PublicKeyCredentialCreationOptionsJSON {
+    rp: PublicKeyCredentialRpEntity;
+    user: PublicKeyCredentialUserEntityJSON;
+    challenge: Base64urlString;
+    pubKeyCredParams: PublicKeyCredentialParameters[];
+    timeout?: number;
+    excludeCredentials?: PublicKeyCredentialDescriptorJSON[];
+    authenticatorSelection?: AuthenticatorSelectionCriteriaJSON;
+    attestation?: AttestationConveyancePreference;
+    extensions?: SimpleWebAuthnExtensionsJSON;
+}
+declare interface CredentialCreationOptionsJSON {
+    publicKey: PublicKeyCredentialCreationOptionsJSON;
+    signal?: AbortSignal;
+}
+interface AuthenticatorAttestationResponseJSON {
+    clientDataJSON: Base64urlString;
+    attestationObject: Base64urlString;
+}
+declare interface PublicKeyCredentialWithAttestationJSON {
+    id: string;
+    type: PublicKeyCredentialType;
+    rawId: Base64urlString;
+    response: AuthenticatorAttestationResponseJSON;
+    clientExtensionResults: SimpleClientExtensionResultsJSON;
+}
+interface PublicKeyCredentialRequestOptionsJSON {
+    challenge: Base64urlString;
+    timeout?: number;
+    rpId?: string;
+    allowCredentials?: PublicKeyCredentialDescriptorJSON[];
+    userVerification?: UserVerificationRequirement;
+    extensions?: SimpleWebAuthnExtensionsJSON;
+}
+declare interface CredentialRequestOptionsJSON {
+    mediation?: CredentialMediationRequirement;
+    publicKey?: PublicKeyCredentialRequestOptionsJSON;
+    signal?: AbortSignal;
+}
+interface AuthenticatorAssertionResponseJSON {
+    clientDataJSON: Base64urlString;
+    authenticatorData: Base64urlString;
+    signature: Base64urlString;
+    userHandle: Base64urlString | null;
+}
+declare interface PublicKeyCredentialWithAssertionJSON {
+    type: PublicKeyCredentialType;
+    id: string;
+    rawId: Base64urlString;
+    response: AuthenticatorAssertionResponseJSON;
+    clientExtensionResults: SimpleClientExtensionResultsJSON;
+}
+declare const schema: {
+    [s: string]: Schema;
+};
+// export function create(requestJSON: CredentialCreationOptionsJSON): Promise<PublicKeyCredentialWithAttestationJSON>;
+// export function get(requestJSON: CredentialRequestOptionsJSON): Promise<PublicKeyCredentialWithAssertionJSON>;
+// export function supported(): boolean;
+
+declare class webauthnJSON {
+  static create(requestJSON: CredentialCreationOptionsJSON): Promise<PublicKeyCredentialWithAttestationJSON>;
+  static get(requestJSON: CredentialRequestOptionsJSON): Promise<PublicKeyCredentialWithAssertionJSON>;
+  static supported(): boolean;
+}

data/config/locales/de.yml

@@ -0,0 +1,84 @@
+de:
+
+  activerecord:
+    attributes:
+      booth/models/onboarding:
+        password: Passwort
+        password_confirmation: Passwort
+        authenticator_nickname: Gerätename
+    errors:
+      messages:
+        not_pwned: ist unsicher, weil es in %{count} Datenlecks veröffentlicht wurde.
+
+  booth:
+    all_other_sessions_revoked: All other devices except this one have been logged out.
+    already_responded_to_contest: You have already responded to this contest.
+    attempt_was_ignored: Dieser Versuch wurde ignoriert.
+    attempts_left: You may try %{attempts_left} more times.
+    authenticator_not_found: Could not find that hardware key.
+    authenticator_removal_failed: Could not delete that hardware key.
+    blank_contest_code: You did not enter a code.
+    blank_email: Please provide an email address.
+    blank_nickname: Please provide a name for your device.
+    blank_otp: Bitte gib den Einmalcode ein, den dir deine Authenticator App anzeigt.
+    blank_password: Bitte gib dein Passwort ein.
+    blank_secret_key: The provided secret key is empty. Is the URL correct?
+    blank_username: Trage bitte deinen Benutzernamen ein.
+    contest_response_accepted: You entered the correct code. You have now been logged in on the other device.
+    contest_timed_out: You had %{lifespan_minutes} minutes to enter the response code, but it took too long. Please start again.
+    email_too_long: The provided email is too long. It must be less at most %{maximum} characters long.
+    email_too_short: The provided email is too short. It should be at least %{minimum} characters long.
+    incompatible_webauth_device: Sorry, this device cannot be used. Please try another webauth device.
+    invalid_contest_code_format: Der Code darf nur aus Zahlen bestehen.
+    invalid_email_characters: The provided email address contains invalid characters.
+    invalid_email_format: The provided email address does not look valid.
+    invalid_otp_format: Der Einmalcode darf nur aus Zahlen bestehen.
+    invalid_secret_key_format: The provided secret key contains invalid characters. It should be from the Base58 alphabet.
+    invalid_username_format: Der eingegebene Benutzername enthält ungültige Zeichen.
+    last_attempt: This is your last attempt and you will have to contact customer service if you fail.
+    logged_in_user_cannot_reset_password: You are currently logged in. If you forgot your password, try another browser or logout first.
+    login_timeout: Du hattest %{lifespan_minutes} Minuten um den Login abzuschließen, es hat aber länger gedauert. Bitte beginne erneut.
+    missing_secret_key: Missing the secret key parameter. Is the URL correct?
+    mode_username_and_password_description: Benutzername und Passwort. Kann leicht gestohlen werden.
+    mode_username_and_password_title: Passwort (unsicher)
+    mode_username_and_webauth_description: Auch bekannt als WebAuthentication (WebAuthn), FIDO2, CTAP2, Apple Passkey (Touch ID, Face ID).
+    mode_username_and_webauth_title: Hardwareschlüssel (empfohlen)
+    mode_username_password_and_otp_description: Wenn kein kompatibler Hardwareschlüssel zur Hand ist.
+    mode_username_password_and_otp_title: Passwort und Einmalpasswort
+    mode_username_password_and_webauth_description: Zusätzlich zum Hardwareschlüssel muss jedesmal auch das Passwort eingegeben werden.
+    mode_username_password_and_webauth_title: Passwort und Hardwareschlüssel (am sichersten)
+    otp_removed: You successfully removed your OTP configuration.
+    otp_sudo_timeout: You had %{lifespan_minutes} minutes to perform this action, but it took too long. Please start again by providing your current OTP again.
+    otp_unavailable: You can't use OTP at this time.
+    password_changed: You successfully changed your password.
+    password_removed: You successfully removed your password.
+    password_reset_needs_username: To reset your password, please provide a username first.
+    password_reset_not_available: This username cannot reset the password. Please contact support.
+    password_successfully_reset: Your new password has been saved.
+    password_sudo_timeout: You had %{lifespan_minutes} minutes to perform this action, but it took too long. Please start again by providing your current password again.
+    password_unavailable: You can't use a password at this time.
+    passwordless_cannot_change_password: You cannot change your password because you don't have one.
+    permanently_blocked: You failed too many times for this account. Please contact customer service.
+    session_revoked: Das Gerät mit der IP %{ip} wurde erfolgreich ausgeloggt.
+    short_password: Das kann nicht dein Passwort sein, weil es zu kurz ist. Es muss aus mindestens %{minlength} Zeichen bestehen.
+    some_authenticator_removed: Hardware key successfully deleted.
+    successfully_logged_out: Du hast dich erfolgreich ausgeloggt.
+    try_again_cooldown: Du kannst es in %{distance_of_time_until_cooldown} erneut probieren.
+    uninitialized_credential: This account has not been initialized yet. Please contact support.
+    unknown_email: We don't know that email.
+    unknown_secret_key: The provided secret key is unknown.
+    unknown_username: Dieser Benutzername existiert nicht.
+    unknown_webauth_device: Sorry, We don't recognize that device. Have you registered it before?
+    username_already_exists: This username already exists. Try to login instead?
+    username_too_long: The provided username is too long. It must be less at most %{maximum} characters long.
+    username_too_short: The provided username is too short. It should be at least %{minimum} characters long.
+    webauth_irremovable: You cannot remove any of your hardware keys.
+    webauth_missing_authenticators: You cannot login using webauth, because we don't know any of your hardware keys.
+    webauth_removed: Hardware keys successfully deleted. Now you log in only with your password.
+    webauth_unavailable: You can't use WebAuthn at this time.
+    wrong_contest_code_length: The code you entered was not %{digits} digits long.
+    wrong_otp_length: Der Einmalcode muss aus %{digits} Zahlen bestehen.
+    wrong_otp: Dieser Einmalcode ist falsch, vielleicht ist er schon abgelaufen.
+    wrong_password: Das war nicht das richtige Passwort.
+    wrong_response_code: This was not the code that is currently shown on the login page on the other device.
+    wrong_secret_key_length: The provided secret key does not have the correct length. It should be 30 characters long.

data/config/locales/en.yml

@@ -0,0 +1,79 @@
+en:
+
+  activerecord:
+    errors:
+      messages:
+        not_pwned: is isecure, because it has been published in %{count} data leaks.
+
+  booth:
+    all_other_sessions_revoked: All other devices except this one have been logged out.
+    already_responded_to_contest: You have already responded to this contest.
+    attempt_was_ignored: This attempt has been ignored.
+    attempts_left: You may try %{attempts_left} more times.
+    authenticator_not_found: Could not find that hardware key.
+    authenticator_removal_failed: Could not delete that hardware key.
+    blank_contest_code: You did not enter a code.
+    blank_email: Please provide an email address.
+    blank_nickname: Please provide a name for your device.
+    blank_otp: Please provide the one-time code your authenticator app is showing you.
+    blank_password: Please provide a password.
+    blank_secret_key: The provided secret key is empty. Is the URL correct?
+    blank_username: Please provide a username.
+    contest_response_accepted: You entered the correct code. You have now been logged in on the other device.
+    contest_timed_out: You had %{lifespan_minutes} minutes to enter the response code, but it took too long. Please start again.
+    email_too_long: The provided email is too long. It must be less at most %{maximum} characters long.
+    email_too_short: The provided email is too short. It should be at least %{minimum} characters long.
+    incompatible_webauth_device: Sorry, this device cannot be used. Please try another webauth device.
+    invalid_contest_code_format: The code may only consist of digits.
+    invalid_email_characters: The provided email address contains invalid characters.
+    invalid_email_format: The provided email address does not look valid.
+    invalid_otp_format: The one-time may only consist of digits.
+    invalid_secret_key_format: The provided secret key contains invalid characters. It should be from the Base58 alphabet.
+    invalid_username_format: The provided username contains invalid characters.
+    last_attempt: This is your last attempt and you will have to contact customer service if you fail.
+    logged_in_user_cannot_reset_password: You are currently logged in. If you forgot your password, try another browser or logout first.
+    login_timeout: You had %{lifespan_minutes} minutes to complete the login, but it took too long. Please start again.
+    missing_secret_key: Missing the secret key parameter. Is the URL correct?
+    mode_username_and_password_description: Username and password. Can easily be stolen.
+    mode_username_and_password_title: Password (insecure)
+    mode_username_and_webauth_description: Also known as WebAuthentication (WebAuthn), FIDO2, CTAP2, Apple Passkey (Touch ID, Face ID).
+    mode_username_and_webauth_title: Hardware key (recommended)
+    mode_username_password_and_otp_description: Use this if you don't have a hardware key.
+    mode_username_password_and_otp_title: Password and one-time-password.
+    mode_username_password_and_webauth_description: Additionally to your hardware key, you will have to enter your password. So nobody with your hardware key can just log in.
+    mode_username_password_and_webauth_title: Password and hardware key (most secure)
+    otp_removed: You successfully removed your OTP configuration.
+    otp_sudo_timeout: You had %{lifespan_minutes} minutes to perform this action, but it took too long. Please start again by providing your current OTP again.
+    otp_unavailable: You can't use OTP at this time.
+    password_changed: You successfully changed your password.
+    password_removed: You successfully removed your password.
+    password_reset_needs_username: To reset your password, please provide a username first.
+    password_reset_not_available: This username cannot reset the password. Please contact support.
+    password_successfully_reset: Your new password has been saved.
+    password_sudo_timeout: You had %{lifespan_minutes} minutes to perform this action, but it took too long. Please start again by providing your current password again.
+    password_unavailable: You can't use a password at this time.
+    passwordless_cannot_change_password: You cannot change your password because you don't have one.
+    permanently_blocked: You failed too many times for this account. Please contact customer service.
+    session_revoked: The logged in device with the IP %{ip} has successfully been logged out.
+    short_password: That cannot be the password, because it was too short. It must be at least %{minlength} characters long.
+    some_authenticator_removed: Hardware key successfully deleted.
+    successfully_logged_out: Logout successful.
+    try_again_cooldown: You may try again in %{distance_of_time_until_cooldown}.
+    uninitialized_credential: This account has not been initialized yet. Please contact support.
+    unknown_email: We don't know that email.
+    unknown_secret_key: The provided secret key is unknown.
+    unknown_username: We don't know that username.
+    unknown_webauth_device: Sorry, We don't recognize that device. Have you registered it before?
+    username_already_exists: This username already exists. Try to login instead?
+    username_too_long: The provided username is too long. It must be less at most %{maximum} characters long.
+    username_too_short: The provided username is too short. It should be at least %{minimum} characters long.
+    webauth_irremovable: You cannot remove any of your hardware keys.
+    webauth_missing_authenticators: You cannot login using webauth, because we don't know any of your hardware keys.
+    webauth_removed: Hardware keys successfully deleted. Now you log in only with your password.
+    webauth_unavailable: You can't use WebAuthn at this time.
+    wrong_contest_code_length: The code you entered was not %{digits} digits long.
+    wrong_otp_length: The one-time code must be %{digits} digits long.
+    wrong_otp: The one-time code is wrong, maybe it already expired.
+    wrong_password: Wrong password.
+    wrong_response_code: This was not the code that is currently shown on the login page on the other device.
+    wrong_secret_key_length: The provided secret key does not have the correct length. It should be 30 characters long.

data/lib/booth/adminland/credentials/create.rb

@@ -0,0 +1,30 @@
+module Booth
+  module Adminland
+    module Credentials
+      class Create
+        include ::Booth::MethodObject
+        include ::Booth::Logging
+
+        option :username
+        option :allowed_modes
+        option :scope, default: -> { :default }
+
+        def call
+          creation = ::Booth::Credentials::Create.call(
+            username:,
+            allowed_modes:,
+            scope:
+          )
+
+          return creation if creation.failure?
+
+          # Not exposing the ActiveRecord model outside of Booth.
+          Tron.success :credential_created,
+                       id: creation.credential.id,
+                       scope: creation.credential.scope,
+                       allowed_modes: creation.credential.allowed_modes.map(&:to_sym)
+        end
+      end
+    end
+  end
+end