@cardstack/boxel-cli 0.9.0 → 0.10.0-unstable.0

package/bundled-types/host-app/components/matrix/register-user.gts

@@ -1,6 +1,4 @@
 import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
-
 import { action } from '@ember/object';
 
 import { service } from '@ember/service';
@@ -8,17 +6,17 @@ import Component from '@glimmer/component';
 
 import { tracked } from '@glimmer/tracking';
 
+import {
+  AwaitingEmail,
+  CreatingAccount,
+  InviteCodeForm,
+  RegisterForm,
+} from '@cardstack/secure-origin/screens/register.gts';
 import { restartableTask, timeout } from 'ember-concurrency';
 
 import { v4 as uuidv4 } from 'uuid';
 
-import {
-  BoxelInput,
-  BoxelInputGroup,
-  LoadingIndicator,
-} from '@cardstack/boxel-ui/components';
 import { eq, not } from '@cardstack/boxel-ui/helpers';
-import { CheckMark } from '@cardstack/boxel-ui/icons';
 
 import ENV from '@cardstack/host/config/environment';
 import {
@@ -33,8 +31,6 @@ import {
 } from '@cardstack/host/lib/matrix-utils';
 import type MatrixService from '@cardstack/host/services/matrix-service';
 
-import AuthButton from './auth-button';
-import AuthFormField from './auth-form-field';
 import CredentialFieldsFrame from './credential-fields';
 
 import type { AuthMode } from './auth';
@@ -69,216 +65,50 @@ interface Signature {
 export default class RegisterUser extends Component<Signature> {
   <template>
     {{#if (eq this.currentPage 'awaiting-validation')}}
-      <span class='title' data-test-email-validation>Please check your email to
-        complete registration</span>
-      <ul class='email-validation-instruction'>
-        <li>Leave this window open while we verify your email</li>
-        <li>This screen will update once your email is verified</li>
-      </ul>
-      <AuthButton
-        data-test-resend-validation
-        {{on 'click' this.resendValidation}}
-        class='resend-email'
-        @variant='primary'
-        @disabled={{this.validateEmail.isRunning}}
-        @loading={{this.validateEmail.isRunning}}
-      >Resend Email</AuthButton>
+      <AwaitingEmail
+        @resending={{this.validateEmail.isRunning}}
+        @onResend={{this.resendValidation}}
+      />
     {{else if (eq this.currentPage 'account-creation')}}
-      <div class='centered-loading'>
-        <span class='loading-title' data-test-email-validation-complete>Email
-          validation complete</span>
-        <p class='loading-message'>Please wait as we set up your account.</p>
-        <LoadingIndicator class='loading-spinner' />
-      </div>
+      <CreatingAccount />
     {{else if (eq this.currentPage 'token-form')}}
-      <span class='title'>Boxel is currently invite-only.<br />Enter your invite
-        code here.</span>
-      <AuthFormField @label='Your invite code'>
-        <BoxelInput
-          data-test-token-field
-          @state={{this.tokenInputState}}
-          @value={{this.token}}
-          @placeholder='Enter invite code'
-          @errorMessage={{this.tokenError}}
-          @onInput={{this.setToken}}
-        />
-      </AuthFormField>
-      <div class='button-wrapper'>
-        <AuthButton
-          data-test-next-btn
-          @variant='primary'
-          @disabled={{this.isNextButtonDisabled}}
-          @loading={{this.doRegistrationFlow.isRunning}}
-          {{on 'click' this.sendToken}}
-        >Next</AuthButton>
-      </div>
+      <InviteCodeForm
+        @token={{this.token}}
+        @tokenError={{this.tokenError}}
+        @submitDisabled={{this.isNextButtonDisabled}}
+        @submitting={{this.doRegistrationFlow.isRunning}}
+        @onTokenInput={{this.setToken}}
+        @onSubmit={{this.sendToken}}
+      />
     {{/if}}
     {{! The passwords are in a frame that sends them again at each step of
         the registration, so the form stays mounted, hidden, while the steps
         after it show. }}
-    <div
-      class='registration-page'
-      hidden={{not (eq this.currentPage 'registration-form')}}
+    <RegisterForm
+      @name={{this.name}}
+      @email={{this.email}}
+      @username={{this.username}}
+      @serverName={{matrixServerName}}
+      @nameError={{this.nameError}}
+      @emailError={{this.emailError}}
+      @usernameError={{this.usernameError}}
+      @usernameState={{this.usernameInputState}}
+      @usernameAvailable={{this.isUsernameValidAndAvailable}}
+      @formError={{this.formError}}
+      @submitDisabled={{this.isRegisterButtonDisabled}}
+      @submitting={{this.doRegistrationFlow.isRunning}}
+      @hidden={{not (eq this.currentPage 'registration-form')}}
+      @onNameInput={{this.setName}}
+      @onNameBlur={{this.checkName}}
+      @onEmailInput={{this.setEmail}}
+      @onEmailBlur={{this.checkEmail}}
+      @onUsernameInput={{this.setUsername}}
+      @onUsernameBlur={{this.checkUsername}}
+      @onSubmit={{this.register}}
+      @onSignIn={{fn @setMode 'login'}}
     >
-      <span class='title'>Create a Boxel Account</span>
-      <form data-test-register-form {{on 'submit' this.register}}>
-        <AuthFormField @label='Your Name'>
-          <BoxelInput
-            data-test-name-field
-            @state={{this.nameInputState}}
-            @value={{this.name}}
-            @placeholder='Enter your name'
-            @errorMessage={{this.nameError}}
-            @onInput={{this.setName}}
-            @onBlur={{this.checkName}}
-          />
-        </AuthFormField>
-        <AuthFormField @label='Email'>
-          <BoxelInput
-            data-test-email-field
-            name='email'
-            autocomplete='email'
-            @state={{this.emailInputState}}
-            @value={{this.email}}
-            @placeholder='Enter your email'
-            @errorMessage={{this.emailError}}
-            @onInput={{this.setEmail}}
-            @onBlur={{this.checkEmail}}
-          />
-        </AuthFormField>
-        <AuthFormField @label='Username'>
-          <BoxelInputGroup
-            data-test-username-field
-            id='boxel-register-username'
-            @name='username'
-            @autocomplete='username'
-            @state={{this.usernameInputState}}
-            @value={{this.username}}
-            @placeholder='Your username'
-            @errorMessage={{this.usernameError}}
-            @onInput={{this.setUsername}}
-            @onBlur={{this.checkUsername}}
-            @validIcon={{CheckMark}}
-          >
-            <:before as |Accessories|>
-              <Accessories.Text class='username-prefix'>@</Accessories.Text>
-            </:before>
-            <:after as |Accessories|>
-              <Accessories.Text>{{matrixServerName}}</Accessories.Text>
-            </:after>
-          </BoxelInputGroup>
-          {{#if this.isUsernameValidAndAvailable}}
-            <p class='validation-hint' data-test-username-available><CheckMark
-                class='validation-hint-icon'
-              />name available</p>
-          {{/if}}
-        </AuthFormField>
-        <CredentialFieldsFrame @form='register' @fields={{this.credentials}} />
-        {{#if this.formError}}
-          <div
-            class='error-message'
-            data-test-register-user-error
-          >{{this.formError}}</div>
-        {{/if}}
-        <div class='button-wrapper'>
-          <AuthButton
-            data-test-register-btn
-            @variant='primary'
-            @disabled={{this.isRegisterButtonDisabled}}
-            @loading={{this.doRegistrationFlow.isRunning}}
-            {{on 'click' this.register}}
-          >Create Account</AuthButton>
-          <div>or</div>
-          <AuthButton
-            data-test-cancel-btn
-            @variant='secondary'
-            {{on 'click' (fn @setMode 'login')}}
-          >Login with an existing account</AuthButton>
-        </div>
-      </form>
-    </div>
-    <style scoped>
-      .registration-page {
-        display: contents;
-      }
-      .registration-page[hidden] {
-        display: none;
-      }
-      .title {
-        font: 600 var(--boxel-font-md);
-        color: var(--foreground);
-        margin-bottom: var(--boxel-sp-sm);
-      }
-      p {
-        color: var(--foreground);
-      }
-      .centered-loading {
-        align-self: center;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: var(--boxel-sp-sm);
-        text-align: center;
-      }
-      .loading-title {
-        font: 600 var(--boxel-font-md);
-        color: var(--foreground);
-      }
-      .loading-message {
-        margin: 0;
-        color: var(--foreground);
-        font: 500 var(--boxel-font-sm);
-      }
-      .loading-spinner {
-        --boxel-loading-indicator-size: var(--boxel-icon-md);
-        --loading-indicator-color: var(--boxel-highlight);
-        margin-top: var(--boxel-sp-xs);
-      }
-      .validation-hint {
-        display: flex;
-        align-items: center;
-        gap: var(--boxel-sp-3xs);
-        margin: var(--boxel-sp-2xs) 0 0;
-        color: var(--muted-foreground);
-        font: 500 var(--boxel-font-xs);
-      }
-      .validation-hint-icon {
-        --icon-color: var(--boxel-highlight);
-        width: 0.875rem;
-        height: 0.875rem;
-        flex-shrink: 0;
-      }
-      .button-wrapper {
-        width: 100%;
-        margin-top: var(--boxel-sp-xl);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: var(--boxel-sp-sm);
-        color: var(--muted-foreground);
-      }
-      .username-prefix {
-        padding-right: 0;
-      }
-      .email-validation-instruction {
-        padding: 0;
-        list-style-position: inside;
-        margin-top: 0;
-        margin-bottom: var(--boxel-sp);
-        color: var(--foreground);
-      }
-      .email-validation-instruction li {
-        margin-bottom: var(--boxel-sp-sm);
-      }
-      .resend-email {
-        margin-top: var(--boxel-sp);
-      }
-      .error-message {
-        color: var(--boxel-error-100);
-        margin-top: var(--boxel-sp-lg);
-      }
-    </style>
+      <CredentialFieldsFrame @form='register' @fields={{this.credentials}} />
+    </RegisterForm>
   </template>
   @tracked private email = '';
   @tracked private name = '';
@@ -399,10 +229,6 @@ export default class RegisterUser extends Component<Signature> {
     );
   }
 
-  private get nameInputState() {
-    return this.nameError ? 'invalid' : 'initial';
-  }
-
   private get usernameInputState() {
     if (this.usernameError) {
       return 'invalid';
@@ -415,14 +241,6 @@ export default class RegisterUser extends Component<Signature> {
     }
   }
 
-  private get tokenInputState() {
-    return this.tokenError ? 'invalid' : 'initial';
-  }
-
-  private get emailInputState() {
-    return this.emailError ? 'invalid' : 'initial';
-  }
-
   @action
   private setToken(token: string) {
     this.token = token;
@@ -523,7 +341,8 @@ export default class RegisterUser extends Component<Signature> {
   }
 
   @action
-  private sendToken() {
+  private sendToken(ev: Event) {
+    ev.preventDefault();
     if (this.state.type !== 'askForToken') {
       throw new Error(
         `invalid state: cannot sendToken() in state ${this.state.type}`,

package/bundled-types/host-app/components/matrix/secure-sign-in.gts

@@ -0,0 +1,235 @@
+import type Owner from '@ember/owner';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { Button } from '@cardstack/pretui/components/button';
+import { Spinner } from '@cardstack/pretui/components/spinner';
+import AuthContainer from '@cardstack/secure-origin/components/auth-container.gts';
+import { restartableTask } from 'ember-concurrency';
+import window from 'ember-window-mock';
+
+import { isMatrixError } from '@cardstack/host/lib/matrix-utils';
+import { resetPasswordParamsFrom } from '@cardstack/host/lib/reset-password-link';
+import {
+  clearRedirectGuard,
+  framing,
+  noteRedirect,
+  redirectedRecently,
+  secureResetPasswordURL,
+  secureSignInURL,
+} from '@cardstack/host/lib/secure-sign-in';
+import type MatrixService from '@cardstack/host/services/matrix-service';
+import {
+  consumeLoginTokenFromUrl,
+  peekLoginToken,
+} from '@cardstack/host/utils/login-token';
+
+import { extractMatrixErrorMessage } from './login';
+
+type State =
+  // Sent, or about to be sent, to the secure origin to sign in.
+  | 'redirecting'
+  // Back from the secure origin signed out again, too soon after being sent
+  // there: the sign-in didn't complete, so the app doesn't send the user
+  // round again.
+  | 'incomplete'
+  // In a frame, which is never navigated: the user signs in in a page of
+  // their own.
+  | 'framed'
+  // Redeeming the login token the secure origin handed back, or finishing a
+  // sign-in already under way.
+  | 'signing-in'
+  // The login token wouldn't redeem.
+  | 'failed'
+  // Ending the session on the secure origin as well, after signing out here.
+  | 'signing-out'
+  // A password reset link that landed on the app, on its way to the secure
+  // origin's reset page.
+  | 'forwarding';
+
+// What a signed-out app shows when users sign in on the secure origin. The
+// app draws no sign-in form: from the first paint it says it is taking the
+// user to sign in, with a plain link that goes there, so the page works even
+// when the scripted redirect never runs or the secure origin can't be
+// reached. Coming back from the secure origin with a login token, it redeems
+// the token, before any card is loaded, and boots the session.
+export default class SecureSignIn extends Component {
+  <template>
+    <AuthContainer>
+      <div class='centered' data-test-secure-sign-in-landing={{this.state}}>
+        {{#if this.isBusy}}
+          <span class='title' data-test-secure-sign-in-status>
+            {{this.busyTitle}}
+          </span>
+          <Spinner @size={{24}} class='spinner' aria-label='Signing in' />
+        {{else}}
+          <span class='title' data-test-secure-sign-in-status>
+            {{this.title}}
+          </span>
+          {{#if this.message}}
+            <p class='message' data-test-secure-sign-in-message>
+              {{this.message}}
+            </p>
+          {{/if}}
+          <Button
+            @href={{this.signInURL}}
+            @variant='primary'
+            @size='l'
+            class='sign-in-button'
+            target={{if this.framed '_blank'}}
+            rel={{if this.framed 'noopener noreferrer'}}
+            data-test-secure-sign-in-button
+          >Sign in to Boxel</Button>
+        {{/if}}
+      </div>
+    </AuthContainer>
+
+    <style scoped>
+      .centered {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--boxel-sp);
+        text-align: center;
+      }
+      .title {
+        font: 600 var(--boxel-font-md);
+        color: var(--foreground);
+      }
+      .message {
+        margin: 0;
+        color: var(--foreground);
+        font: 500 var(--boxel-font-sm);
+        line-height: 1.4;
+      }
+      .sign-in-button {
+        width: 100%;
+      }
+      .spinner {
+        color: var(--boxel-highlight);
+      }
+    </style>
+  </template>
+
+  @service declare private matrixService: MatrixService;
+
+  @tracked private state: State = 'redirecting';
+  @tracked private error: string | undefined;
+  private framed = framing.isFramed();
+  private signInURL = secureSignInURL();
+
+  constructor(owner: Owner, args: object) {
+    super(owner, args);
+    if (this.matrixService.isSigningOutToSecureOrigin) {
+      this.state = 'signing-out';
+      return;
+    }
+    if (this.matrixService.isLoggedIn) {
+      // Signed in, and setting up a new account before the app shows.
+      this.state = 'signing-in';
+      return;
+    }
+    if (peekLoginToken()) {
+      this.state = 'signing-in';
+      this.redeem.perform();
+      return;
+    }
+    let { params } = resetPasswordParamsFrom(
+      Object.fromEntries(new URLSearchParams(window.location.search)),
+      window.location.hash,
+    );
+    if (params) {
+      this.state = 'forwarding';
+      window.location.replace(secureResetPasswordURL(params));
+      return;
+    }
+    this.redirect();
+  }
+
+  private redirect() {
+    if (this.framed) {
+      this.state = 'framed';
+      return;
+    }
+    if (redirectedRecently()) {
+      this.state = 'incomplete';
+      return;
+    }
+    this.state = 'redirecting';
+    noteRedirect();
+    window.location.replace(this.signInURL);
+  }
+
+  private get isBusy() {
+    return (
+      this.state === 'signing-in' ||
+      this.state === 'signing-out' ||
+      this.state === 'forwarding'
+    );
+  }
+
+  private get busyTitle() {
+    return this.state === 'signing-out'
+      ? 'Signing you out…'
+      : 'Signing you in…';
+  }
+
+  private get title() {
+    switch (this.state) {
+      case 'incomplete':
+        return 'Sign-in didn’t complete';
+      case 'failed':
+        return 'Sign-in didn’t complete';
+      case 'framed':
+        return 'Sign in to Boxel';
+      default:
+        return 'Taking you to sign in…';
+    }
+  }
+
+  private get message() {
+    if (this.state === 'failed') {
+      return this.error;
+    }
+    if (this.state === 'framed') {
+      return 'Sign in in a new tab, then come back here.';
+    }
+    return undefined;
+  }
+
+  private redeem = restartableTask(async () => {
+    // Single-use: taken out of the address before it is redeemed, so a reload
+    // can't try it again.
+    let token = consumeLoginTokenFromUrl();
+    if (!token) {
+      this.redirect();
+      return;
+    }
+    try {
+      let auth = await this.matrixService.loginWithSsoToken(token);
+      await this.matrixService.start({ auth, refreshRoutes: true });
+      // `start()` handles a failure after the Matrix login by signing out
+      // again rather than throwing, so only a session that is up counts.
+      if (!this.matrixService.isLoggedIn) {
+        throw new Error('the session could not be started');
+      }
+      // Only now is the next signed-out arrival a new one, which redirects.
+      clearRedirectGuard();
+    } catch (e: any) {
+      if (
+        isMatrixError(e) &&
+        e.httpStatus === 403 &&
+        e.errcode === 'M_FORBIDDEN'
+      ) {
+        this.error =
+          'This sign-in link has expired or was already used. Sign in again.';
+      } else if (isMatrixError(e)) {
+        this.error = `Sign-in failed. ${extractMatrixErrorMessage(e)}`;
+      } else {
+        this.error = `Sign-in failed: ${e.message}`;
+      }
+      this.state = 'failed';
+    }
+  });
+}

package/bundled-types/host-app/components/operator-mode/container.gts

@@ -33,10 +33,12 @@ import {
 
 import AccountSwitchFailed from '@cardstack/host/components/matrix/account-switch-failed';
 import Auth from '@cardstack/host/components/matrix/auth';
+import SecureSignIn from '@cardstack/host/components/matrix/secure-sign-in';
 
 import CodeSubmode from '@cardstack/host/components/operator-mode/code-submode';
 import HostSubmode from '@cardstack/host/components/operator-mode/host-submode';
 import InteractSubmode from '@cardstack/host/components/operator-mode/interact-submode';
+import { signInOnSecureOrigin } from '@cardstack/host/lib/secure-sign-in';
 import { getCardCollection } from '@cardstack/host/resources/card-collection';
 import { getCard } from '@cardstack/host/resources/card-resource';
 
@@ -207,6 +209,12 @@ export default class OperatorModeContainer extends Component<Signature> {
     }
   }
 
+  // Read when the page renders, so a deployment's setting applies without a
+  // rebuild (see `lib/secure-sign-in`).
+  private get signInOnSecureOrigin() {
+    return signInOnSecureOrigin();
+  }
+
   private get isCodeMode() {
     return this.operatorModeStateService.state?.submode === Submodes.Code;
   }
@@ -233,7 +241,11 @@ export default class OperatorModeContainer extends Component<Signature> {
           this.matrixService.isInitializingNewUser
         )
       }}
-        <Auth />
+        {{#if this.signInOnSecureOrigin}}
+          <SecureSignIn />
+        {{else}}
+          <Auth />
+        {{/if}}
       {{else if this.isCodeMode}}
         <CodeSubmode @saveSourceOnClose={{perform this.saveSource}} />
       {{else if this.isHostMode}}

package/bundled-types/host-app/components/operator-mode/profile-info-popover.gts

@@ -202,7 +202,7 @@ export default class ProfileInfoPopover extends Component<ProfileInfoPopoverSign
   @service declare billingService: BillingService;
 
   @action private logout() {
-    this.matrixService.logout();
+    this.matrixService.signOut();
   }
 }
 

package/bundled-types/host-app/config/environment.ts

@@ -46,12 +46,12 @@ export default config as {
   logLevels: string;
   iconsURL: string;
   secureOriginURL: string;
+  signInOnSecureOrigin: boolean;
   autoSaveDelayMs: number;
   autoSaveQuietPeriodMs: number;
   autoSaveMaxWaitMs: number;
   monacoDebounceMs: number;
   monacoCursorDebounceMs: number;
-  serverEchoDebounceMs: number;
   loginMessageTimeoutMs: number;
   minSaveTaskDurationMs: number;
   cardRenderTimeout: number;