@lowdefy/shell 0.0.0-experimental-20261019052246

package/src/auth/SignInScreen.js

@@ -0,0 +1,256 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, ScrollView, Text, TextInput, View } from 'react-native';
+
+import AuthButton from './AuthButton.js';
+import AuthLink from './AuthLink.js';
+import styles from './styles.js';
+import useSurfaceTokens from '../components/useSurfaceTokens.js';
+
+const CODE_LENGTH = 6;
+const RESEND_SECONDS = 30;
+
+const MESSAGES = {
+  sent: 'If this email can sign in, a code is on its way.',
+  invalid: 'That code is not right, or it has expired.',
+  rateLimited: 'Too many tries. Wait a minute, then try again.',
+  sheetFailed: 'Sign-in did not finish. Try again.',
+  unreachable: "Could not reach the app's server. Check your connection and try again.",
+};
+
+/**
+ * Sign-in for an app with auth, before any page config can be fetched. By default the person
+ * types their email, then the 6-digit code from the email (the phone offers it from Mail or
+ * Messages). "Other ways to sign in", an app without email codes (mobile.auth.emailCode: false)
+ * and a person who must pass a second factor go to the app's own sign-in page in a system sheet.
+ *
+ * The screen never says whether an address can sign in: after Continue it always says a code is
+ * on its way, if the address can sign in.
+ *
+ * @param {Object} props
+ * @param {string} props.appName The app's name.
+ * @param {Object} props.auth The app's auth (createAppAuth).
+ * @param {{ emailCode: boolean }} props.settings The app's mobile.auth.
+ */
+function SignInScreen({ appName, auth, settings }) {
+  const tokens = useSurfaceTokens();
+  const labelStyle = [styles.label, { color: tokens.colorLabel }];
+  const inputStyle = [
+    styles.input,
+    { backgroundColor: tokens.colorCell, color: tokens.colorLabel },
+  ];
+  const [step, setStep] = useState('email');
+  const [email, setEmail] = useState('');
+  const [code, setCode] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [error, setError] = useState(null);
+  const [resendIn, setResendIn] = useState(0);
+  const sheetOpened = useRef(false);
+
+  useEffect(() => {
+    if (resendIn <= 0) return undefined;
+    const timer = setTimeout(() => setResendIn((seconds) => seconds - 1), 1000);
+    return () => clearTimeout(timer);
+  }, [resendIn]);
+
+  const run = useCallback(async (task) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await task();
+    } catch (taskError) {
+      setError(MESSAGES.unreachable);
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  const openSheet = useCallback(async () => {
+    const result = await auth.signInWithSheet();
+    if (result.status === 'failed') {
+      setError(MESSAGES.sheetFailed);
+    }
+  }, [auth]);
+
+  useEffect(() => {
+    if (settings.emailCode || sheetOpened.current) return;
+    sheetOpened.current = true;
+    run(openSheet);
+  }, [openSheet, run, settings.emailCode]);
+
+  function sendCode() {
+    run(async () => {
+      const result = await auth.sendCode({ email: email.trim() });
+      if (result.status === 'unavailable') {
+        await openSheet();
+        return;
+      }
+      if (result.status === 'rateLimited') {
+        setError(MESSAGES.rateLimited);
+        return;
+      }
+      setStep('code');
+      setCode('');
+      setMessage(MESSAGES.sent);
+      setResendIn(RESEND_SECONDS);
+    });
+  }
+
+  function submitCode(otp) {
+    run(async () => {
+      const result = await auth.signInWithCode({ email: email.trim(), otp });
+      if (result.status === 'twoFactor') {
+        await openSheet();
+        return;
+      }
+      if (result.status === 'invalid' || result.status === 'rateLimited') {
+        setCode('');
+        setError(MESSAGES[result.status]);
+      }
+    });
+  }
+
+  function changeCode(text) {
+    const digits = text.replace(/\D/g, '').slice(0, CODE_LENGTH);
+    setCode(digits);
+    if (digits.length === CODE_LENGTH && !busy) {
+      submitCode(digits);
+    }
+  }
+
+  function changeEmail() {
+    setStep('email');
+    setCode('');
+    setMessage(null);
+    setError(null);
+  }
+
+  let form;
+  if (!settings.emailCode) {
+    form = (
+      <AuthButton
+        disabled={busy}
+        onPress={() => run(openSheet)}
+        testID="sign-in-sheet"
+        title="Sign in"
+      />
+    );
+  } else if (step === 'email') {
+    form = (
+      <>
+        <Text style={labelStyle}>Email</Text>
+        <TextInput
+          autoCapitalize="none"
+          autoComplete="email"
+          autoCorrect={false}
+          editable={!busy}
+          inputMode="email"
+          keyboardType="email-address"
+          onChangeText={setEmail}
+          onSubmitEditing={sendCode}
+          placeholderTextColor={tokens.colorTertiaryLabel}
+          returnKeyType="next"
+          style={inputStyle}
+          testID="sign-in-email"
+          textContentType="emailAddress"
+          value={email}
+        />
+        <AuthButton
+          disabled={busy || email.trim().length === 0}
+          onPress={sendCode}
+          testID="sign-in-continue"
+          title="Continue"
+        />
+      </>
+    );
+  } else {
+    form = (
+      <>
+        <Text
+          style={[styles.message, { color: tokens.colorSecondaryLabel }]}
+          testID="sign-in-message"
+        >
+          {message}
+        </Text>
+        <Text style={labelStyle}>Code sent to {email.trim()}</Text>
+        <TextInput
+          autoComplete="one-time-code"
+          autoFocus
+          editable={!busy}
+          inputMode="numeric"
+          keyboardType="number-pad"
+          maxLength={CODE_LENGTH}
+          onChangeText={changeCode}
+          style={[inputStyle, styles.codeInput]}
+          testID="sign-in-code"
+          textContentType="oneTimeCode"
+          value={code}
+        />
+        <View style={styles.links}>
+          <AuthLink
+            disabled={busy || resendIn > 0}
+            onPress={sendCode}
+            testID="sign-in-resend"
+            title={resendIn > 0 ? `Resend in ${resendIn}s` : 'Resend code'}
+          />
+          <AuthLink
+            disabled={busy}
+            onPress={changeEmail}
+            testID="sign-in-change-email"
+            title="Change email"
+          />
+        </View>
+      </>
+    );
+  }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      style={{ backgroundColor: tokens.colorGroupedBackground, flex: 1 }}
+    >
+      <ScrollView contentContainerStyle={styles.screen} keyboardShouldPersistTaps="handled">
+        <Text accessibilityRole="header" style={[styles.appName, { color: tokens.colorLabel }]}>
+          {appName}
+        </Text>
+        {form}
+        {error ? (
+          <Text
+            accessibilityRole="alert"
+            style={[styles.error, { color: tokens.colorError }]}
+            testID="sign-in-error"
+          >
+            {error}
+          </Text>
+        ) : null}
+        {settings.emailCode ? (
+          <AuthLink
+            disabled={busy}
+            onPress={() => run(openSheet)}
+            style={styles.centered}
+            testID="sign-in-other"
+            title="Other ways to sign in"
+          />
+        ) : null}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+export default SignInScreen;

package/src/auth/SignInScreen.test.js

@@ -0,0 +1,182 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { jest } from '@jest/globals';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import SignInScreen from './SignInScreen.js';
+
+const NEUTRAL = 'If this email can sign in, a code is on its way.';
+
+function createAuth(overrides = {}) {
+  return {
+    sendCode: jest.fn(async () => ({ status: 'sent' })),
+    signInWithCode: jest.fn(async () => ({ status: 'signedIn' })),
+    signInWithSheet: jest.fn(async () => ({ status: 'cancelled' })),
+    ...overrides,
+  };
+}
+
+async function renderScreen({ auth = createAuth(), emailCode = true } = {}) {
+  await render(
+    <SignInScreen appName="Field" auth={auth} settings={{ emailCode, unlock: 'none' }} />
+  );
+  return auth;
+}
+
+async function enterEmail(email = ' ana@example.com ') {
+  await fireEvent.changeText(screen.getByTestId('sign-in-email'), email);
+  await fireEvent.press(screen.getByTestId('sign-in-continue'));
+}
+
+function isDisabled(testID) {
+  return screen.getByTestId(testID).props.accessibilityState?.disabled === true;
+}
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+test('the screen shows the app name and an email field, with the sheet as the other way in', async () => {
+  await renderScreen();
+  expect(screen.getByText('Field')).toBeTruthy();
+  const email = screen.getByTestId('sign-in-email');
+  expect(email.props.textContentType).toBe('emailAddress');
+  expect(email.props.autoComplete).toBe('email');
+  expect(isDisabled('sign-in-continue')).toBe(true);
+  expect(screen.getByText('Other ways to sign in')).toBeTruthy();
+});
+
+test('Continue sends a code to the email and asks for it, saying only that it may be on its way', async () => {
+  const auth = await renderScreen();
+  await enterEmail();
+  expect(auth.sendCode).toHaveBeenCalledWith({ email: 'ana@example.com' });
+  expect(screen.getByTestId('sign-in-message')).toHaveTextContent(NEUTRAL);
+  const code = screen.getByTestId('sign-in-code');
+  expect(code.props.textContentType).toBe('oneTimeCode');
+  expect(code.props.autoComplete).toBe('one-time-code');
+  expect(code.props.maxLength).toBe(6);
+});
+
+test('an address that can not sign in gets the same message, and no hint it is unknown', async () => {
+  // The server answers every address alike; the screen has nothing else to say.
+  const auth = await renderScreen();
+  await enterEmail('stranger@example.com');
+  expect(auth.sendCode).toHaveBeenCalledWith({ email: 'stranger@example.com' });
+  expect(screen.getByTestId('sign-in-message')).toHaveTextContent(NEUTRAL);
+  expect(screen.queryByTestId('sign-in-error')).toBeNull();
+});
+
+test('the sixth digit of the code signs in', async () => {
+  const auth = await renderScreen();
+  await enterEmail();
+  await fireEvent.changeText(screen.getByTestId('sign-in-code'), '12345');
+  expect(auth.signInWithCode).not.toHaveBeenCalled();
+  await fireEvent.changeText(screen.getByTestId('sign-in-code'), '123 456');
+  expect(auth.signInWithCode).toHaveBeenCalledWith({ email: 'ana@example.com', otp: '123456' });
+});
+
+test('a wrong code says so and clears the field', async () => {
+  const auth = await renderScreen({
+    auth: createAuth({ signInWithCode: jest.fn(async () => ({ status: 'invalid' })) }),
+  });
+  await enterEmail();
+  await fireEvent.changeText(screen.getByTestId('sign-in-code'), '000000');
+  expect(auth.signInWithCode).toHaveBeenCalledTimes(1);
+  expect(screen.getByTestId('sign-in-error')).toHaveTextContent(
+    'That code is not right, or it has expired.'
+  );
+  expect(screen.getByTestId('sign-in-code').props.value).toBe('');
+});
+
+test('Resend waits 30 seconds, then sends another code', async () => {
+  jest.useFakeTimers();
+  const auth = await renderScreen();
+  await enterEmail();
+  expect(isDisabled('sign-in-resend')).toBe(true);
+  expect(screen.getByText('Resend in 30s')).toBeTruthy();
+  for (let second = 0; second < 29; second += 1) {
+    await act(async () => jest.advanceTimersByTime(1000));
+  }
+  expect(isDisabled('sign-in-resend')).toBe(true);
+  expect(screen.getByText('Resend in 1s')).toBeTruthy();
+  await act(async () => jest.advanceTimersByTime(1000));
+  expect(isDisabled('sign-in-resend')).toBe(false);
+  await fireEvent.press(screen.getByTestId('sign-in-resend'));
+  expect(auth.sendCode).toHaveBeenCalledTimes(2);
+  expect(isDisabled('sign-in-resend')).toBe(true);
+});
+
+test('Change email goes back to the email field', async () => {
+  await renderScreen();
+  await enterEmail();
+  await fireEvent.press(screen.getByTestId('sign-in-change-email'));
+  expect(screen.getByTestId('sign-in-email').props.value).toBe(' ana@example.com ');
+  expect(screen.queryByTestId('sign-in-code')).toBeNull();
+});
+
+test('a person with a second factor finishes in the sheet', async () => {
+  const auth = await renderScreen({
+    auth: createAuth({ signInWithCode: jest.fn(async () => ({ status: 'twoFactor' })) }),
+  });
+  await enterEmail();
+  await fireEvent.changeText(screen.getByTestId('sign-in-code'), '123456');
+  expect(auth.signInWithSheet).toHaveBeenCalledTimes(1);
+});
+
+test('Other ways to sign in opens the sheet, and says so when it did not finish', async () => {
+  const auth = await renderScreen({
+    auth: createAuth({ signInWithSheet: jest.fn(async () => ({ status: 'failed' })) }),
+  });
+  await fireEvent.press(screen.getByTestId('sign-in-other'));
+  expect(auth.signInWithSheet).toHaveBeenCalledTimes(1);
+  expect(screen.getByTestId('sign-in-error')).toHaveTextContent(
+    'Sign-in did not finish. Try again.'
+  );
+});
+
+test('an app without email codes opens the sheet at once, with a button to open it again', async () => {
+  const auth = await renderScreen({ emailCode: false });
+  expect(auth.signInWithSheet).toHaveBeenCalledTimes(1);
+  expect(screen.queryByTestId('sign-in-email')).toBeNull();
+  await fireEvent.press(screen.getByTestId('sign-in-sheet'));
+  expect(auth.signInWithSheet).toHaveBeenCalledTimes(2);
+});
+
+test('a server without the email code route sends the person to the sheet', async () => {
+  const auth = await renderScreen({
+    auth: createAuth({ sendCode: jest.fn(async () => ({ status: 'unavailable' })) }),
+  });
+  await enterEmail();
+  expect(auth.signInWithSheet).toHaveBeenCalledTimes(1);
+});
+
+test('too many codes, or no connection, say so', async () => {
+  const sendCode = jest
+    .fn()
+    .mockResolvedValueOnce({ status: 'rateLimited' })
+    .mockRejectedValueOnce(new TypeError('Network request failed'));
+  await renderScreen({ auth: createAuth({ sendCode }) });
+  await enterEmail();
+  expect(screen.getByTestId('sign-in-error')).toHaveTextContent(
+    'Too many tries. Wait a minute, then try again.'
+  );
+  await fireEvent.press(screen.getByTestId('sign-in-continue'));
+  expect(screen.getByTestId('sign-in-error')).toHaveTextContent(
+    "Could not reach the app's server. Check your connection and try again."
+  );
+});