@shopify/cli-hydrogen 4.0.0-alpha.9 → 4.0.0

package/dist/templates/demo-store/app/routes/($lang)/account/__public/activate.$id.$activationToken.tsx

@@ -1,218 +0,0 @@
-import {
-  type MetaFunction,
-  redirect,
-  json,
-  type ActionFunction,
-} from '@shopify/remix-oxygen';
-import {Form, useActionData} from '@remix-run/react';
-import {useRef, useState} from 'react';
-import {activateAccount} from '~/data';
-import {getInputStyleClasses} from '~/lib/utils';
-
-type ActionData = {
-  formError?: string;
-};
-
-const badRequest = (data: ActionData) => json(data, {status: 400});
-
-export const handle = {
-  isPublic: true,
-};
-
-export const action: ActionFunction = async ({
-  request,
-  context,
-  params: {lang, id, activationToken},
-}) => {
-  if (
-    !id ||
-    !activationToken ||
-    typeof id !== 'string' ||
-    typeof activationToken !== 'string'
-  ) {
-    return badRequest({
-      formError: 'Wrong token. The link you followed might be wrong.',
-    });
-  }
-
-  const formData = await request.formData();
-
-  const password = formData.get('password');
-  const passwordConfirm = formData.get('passwordConfirm');
-
-  if (
-    !password ||
-    !passwordConfirm ||
-    typeof password !== 'string' ||
-    typeof passwordConfirm !== 'string' ||
-    password !== passwordConfirm
-  ) {
-    return badRequest({
-      formError: 'Please provide matching passwords',
-    });
-  }
-
-  const {session, storefront} = context;
-
-  try {
-    const {accessToken} = await activateAccount(context, {
-      id,
-      activationToken,
-      password,
-    });
-
-    session.set('customerAccessToken', accessToken);
-
-    return redirect(lang ? `${lang}/account` : '/account', {
-      headers: {
-        'Set-Cookie': await session.commit(),
-      },
-    });
-  } catch (error: any) {
-    if (storefront.isApiError(error)) {
-      return badRequest({
-        formError: 'Something went wrong. Please try again later.',
-      });
-    }
-
-    /**
-     * The user did something wrong, but the raw error from the API is not super friendly.
-     * Let's make one up.
-     */
-    return badRequest({
-      formError: 'Sorry. We could not activate your account.',
-    });
-  }
-};
-
-export const meta: MetaFunction = () => {
-  return {
-    title: 'Activate Account',
-  };
-};
-
-export default function Activate() {
-  const actionData = useActionData<ActionData>();
-  const [nativePasswordError, setNativePasswordError] = useState<null | string>(
-    null,
-  );
-  const [nativePasswordConfirmError, setNativePasswordConfirmError] = useState<
-    null | string
-  >(null);
-
-  const passwordInput = useRef<HTMLInputElement>(null);
-  const passwordConfirmInput = useRef<HTMLInputElement>(null);
-
-  const validatePasswordConfirm = () => {
-    if (!passwordConfirmInput.current) return;
-
-    if (
-      passwordConfirmInput.current.value.length &&
-      passwordConfirmInput.current.value !== passwordInput.current?.value
-    ) {
-      setNativePasswordConfirmError('The two passwords entered did not match.');
-    } else if (
-      passwordConfirmInput.current.validity.valid ||
-      !passwordConfirmInput.current.value.length
-    ) {
-      setNativePasswordConfirmError(null);
-    } else {
-      setNativePasswordConfirmError(
-        passwordConfirmInput.current.validity.valueMissing
-          ? 'Please re-enter the password'
-          : 'Passwords must be at least 8 characters',
-      );
-    }
-  };
-
-  return (
-    <div className="flex justify-center my-24 px-4">
-      <div className="max-w-md w-full">
-        <h1 className="text-4xl">Activate Account.</h1>
-        <p className="mt-4">Create your password to activate your account.</p>
-        {/* TODO: Add onSubmit to validate _before_ submission with native? */}
-        <Form
-          method="post"
-          noValidate
-          className="pt-6 pb-8 mt-4 mb-4 space-y-3"
-        >
-          {actionData?.formError && (
-            <div className="flex items-center justify-center mb-6 bg-zinc-500">
-              <p className="m-4 text-s text-contrast">{actionData.formError}</p>
-            </div>
-          )}
-          <div className="mb-3">
-            <input
-              ref={passwordInput}
-              className={`mb-1 ${getInputStyleClasses(nativePasswordError)}`}
-              id="password"
-              name="password"
-              type="password"
-              autoComplete="current-password"
-              placeholder="Password"
-              aria-label="Password"
-              minLength={8}
-              required
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
-              onBlur={(event) => {
-                if (
-                  event.currentTarget.validity.valid ||
-                  !event.currentTarget.value.length
-                ) {
-                  setNativePasswordError(null);
-                  validatePasswordConfirm();
-                } else {
-                  setNativePasswordError(
-                    event.currentTarget.validity.valueMissing
-                      ? 'Please enter a password'
-                      : 'Passwords must be at least 8 characters',
-                  );
-                }
-              }}
-            />
-            {nativePasswordError && (
-              <p className="text-red-500 text-xs">
-                {' '}
-                {nativePasswordError} &nbsp;
-              </p>
-            )}
-          </div>
-          <div className="mb-3">
-            <input
-              ref={passwordConfirmInput}
-              className={`mb-1 ${getInputStyleClasses(
-                nativePasswordConfirmError,
-              )}`}
-              id="passwordConfirm"
-              name="passwordConfirm"
-              type="password"
-              autoComplete="current-password"
-              placeholder="Re-enter password"
-              aria-label="Re-enter password"
-              minLength={8}
-              required
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
-              onBlur={validatePasswordConfirm}
-            />
-            {nativePasswordConfirmError && (
-              <p className="text-red-500 text-xs">
-                {' '}
-                {nativePasswordConfirmError} &nbsp;
-              </p>
-            )}
-          </div>
-          <div className="flex items-center justify-between">
-            <button
-              className="bg-primary text-contrast rounded py-2 px-4 focus:shadow-outline block w-full"
-              type="submit"
-            >
-              Save
-            </button>
-          </div>
-        </Form>
-      </div>
-    </div>
-  );
-}

package/dist/templates/demo-store/app/routes/($lang)/account/__public/login.tsx

@@ -1,197 +0,0 @@
-import {
-  type MetaFunction,
-  type ActionFunction,
-  type LoaderArgs,
-  redirect,
-  json,
-} from '@shopify/remix-oxygen';
-import {Form, useActionData, useLoaderData} from '@remix-run/react';
-import {useState} from 'react';
-import {login} from '~/data';
-import {getInputStyleClasses} from '~/lib/utils';
-import {Link} from '~/components';
-
-export const handle = {
-  isPublic: true,
-};
-
-export async function loader({context, params}: LoaderArgs) {
-  const customerAccessToken = await context.session.get('customerAccessToken');
-
-  if (customerAccessToken) {
-    return redirect(params.lang ? `${params.lang}/account` : '/account');
-  }
-
-  // TODO: Query for this?
-  return json({shopName: 'Hydrogen'});
-}
-
-type ActionData = {
-  formError?: string;
-};
-
-const badRequest = (data: ActionData) => json(data, {status: 400});
-
-export const action: ActionFunction = async ({request, context, params}) => {
-  const formData = await request.formData();
-
-  const email = formData.get('email');
-  const password = formData.get('password');
-
-  if (
-    !email ||
-    !password ||
-    typeof email !== 'string' ||
-    typeof password !== 'string'
-  ) {
-    return badRequest({
-      formError: 'Please provide both an email and a password.',
-    });
-  }
-
-  const {session, storefront} = context;
-
-  try {
-    const customerAccessToken = await login(context, {email, password});
-    session.set('customerAccessToken', customerAccessToken);
-
-    return redirect(params.lang ? `${params.lang}/account` : '/account', {
-      headers: {
-        'Set-Cookie': await session.commit(),
-      },
-    });
-  } catch (error: any) {
-    if (storefront.isApiError(error)) {
-      return badRequest({
-        formError: 'Something went wrong. Please try again later.',
-      });
-    }
-
-    /**
-     * The user did something wrong, but the raw error from the API is not super friendly.
-     * Let's make one up.
-     */
-    return badRequest({
-      formError:
-        'Sorry. We did not recognize either your email or password. Please try to sign in again or create a new account.',
-    });
-  }
-};
-
-export const meta: MetaFunction = () => {
-  return {
-    title: 'Login',
-  };
-};
-
-export default function Login() {
-  const {shopName} = useLoaderData<typeof loader>();
-  const actionData = useActionData<ActionData>();
-  const [nativeEmailError, setNativeEmailError] = useState<null | string>(null);
-  const [nativePasswordError, setNativePasswordError] = useState<null | string>(
-    null,
-  );
-
-  return (
-    <div className="flex justify-center my-24 px-4">
-      <div className="max-w-md w-full">
-        <h1 className="text-4xl">Sign in.</h1>
-        {/* TODO: Add onSubmit to validate _before_ submission with native? */}
-        <Form
-          method="post"
-          noValidate
-          className="pt-6 pb-8 mt-4 mb-4 space-y-3"
-        >
-          {actionData?.formError && (
-            <div className="flex items-center justify-center mb-6 bg-zinc-500">
-              <p className="m-4 text-s text-contrast">{actionData.formError}</p>
-            </div>
-          )}
-          <div>
-            <input
-              className={`mb-1 ${getInputStyleClasses(nativeEmailError)}`}
-              id="email"
-              name="email"
-              type="email"
-              autoComplete="email"
-              required
-              placeholder="Email address"
-              aria-label="Email address"
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
-              onBlur={(event) => {
-                setNativeEmailError(
-                  event.currentTarget.value.length &&
-                    !event.currentTarget.validity.valid
-                    ? 'Invalid email address'
-                    : null,
-                );
-              }}
-            />
-            {nativeEmailError && (
-              <p className="text-red-500 text-xs">{nativeEmailError} &nbsp;</p>
-            )}
-          </div>
-
-          <div>
-            <input
-              className={`mb-1 ${getInputStyleClasses(nativePasswordError)}`}
-              id="password"
-              name="password"
-              type="password"
-              autoComplete="current-password"
-              placeholder="Password"
-              aria-label="Password"
-              minLength={8}
-              required
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
-              onBlur={(event) => {
-                if (
-                  event.currentTarget.validity.valid ||
-                  !event.currentTarget.value.length
-                ) {
-                  setNativePasswordError(null);
-                } else {
-                  setNativePasswordError(
-                    event.currentTarget.validity.valueMissing
-                      ? 'Please enter a password'
-                      : 'Passwords must be at least 8 characters',
-                  );
-                }
-              }}
-            />
-            {nativePasswordError && (
-              <p className="text-red-500 text-xs">
-                {' '}
-                {nativePasswordError} &nbsp;
-              </p>
-            )}
-          </div>
-          <div className="flex items-center justify-between">
-            <button
-              className="bg-primary text-contrast rounded py-2 px-4 focus:shadow-outline block w-full"
-              type="submit"
-            >
-              Sign in
-            </button>
-          </div>
-          <div className="flex justify-between items-center mt-8 border-t border-gray-300">
-            <p className="align-baseline text-sm mt-6">
-              New to {shopName}? &nbsp;
-              <Link className="inline underline" to="/account/register">
-                Create an account
-              </Link>
-            </p>
-            <Link
-              className="mt-6 inline-block align-baseline text-sm text-primary/50"
-              to="/account/recover"
-            >
-              Forgot password
-            </Link>
-          </div>
-        </Form>
-      </div>
-    </div>
-  );
-}

package/dist/templates/demo-store/app/routes/($lang)/account/__public/recover.tsx

@@ -1,144 +0,0 @@
-import {
-  type MetaFunction,
-  type ActionFunction,
-  type LoaderArgs,
-  redirect,
-  json,
-} from '@shopify/remix-oxygen';
-import {Form, useActionData} from '@remix-run/react';
-import {useState} from 'react';
-import {sendPasswordResetEmail} from '~/data';
-import {Link} from '~/components';
-import {getInputStyleClasses} from '~/lib/utils';
-
-export async function loader({context, params}: LoaderArgs) {
-  const customerAccessToken = await context.session.get('customerAccessToken');
-
-  if (customerAccessToken) {
-    return redirect(params.lang ? `${params.lang}/account` : '/account');
-  }
-
-  return new Response(null);
-}
-
-type ActionData = {
-  formError?: string;
-  resetRequested?: boolean;
-};
-
-const badRequest = (data: ActionData) => json(data, {status: 400});
-
-export const action: ActionFunction = async ({request, context}) => {
-  const formData = await request.formData();
-  const email = formData.get('email');
-
-  if (!email || typeof email !== 'string') {
-    return badRequest({
-      formError: 'Please provide an email.',
-    });
-  }
-
-  try {
-    await sendPasswordResetEmail(context, {email});
-
-    return json({resetRequested: true});
-  } catch (error: any) {
-    return badRequest({
-      formError: 'Something went wrong. Please try again later.',
-    });
-  }
-};
-
-export const meta: MetaFunction = () => {
-  return {
-    title: 'Recover Password',
-  };
-};
-
-export default function Recover() {
-  const actionData = useActionData<ActionData>();
-  const [nativeEmailError, setNativeEmailError] = useState<null | string>(null);
-  const isSubmitted = actionData?.resetRequested;
-
-  return (
-    <div className="flex justify-center my-24 px-4">
-      <div className="max-w-md w-full">
-        {isSubmitted ? (
-          <>
-            <h1 className="text-4xl">Request Sent.</h1>
-            <p className="mt-4">
-              If that email address is in our system, you will receive an email
-              with instructions about how to reset your password in a few
-              minutes.
-            </p>
-          </>
-        ) : (
-          <>
-            <h1 className="text-4xl">Forgot Password.</h1>
-            <p className="mt-4">
-              Enter the email address associated with your account to receive a
-              link to reset your password.
-            </p>
-            {/* TODO: Add onSubmit to validate _before_ submission with native? */}
-            <Form
-              method="post"
-              noValidate
-              className="pt-6 pb-8 mt-4 mb-4 space-y-3"
-            >
-              {actionData?.formError && (
-                <div className="flex items-center justify-center mb-6 bg-zinc-500">
-                  <p className="m-4 text-s text-contrast">
-                    {actionData.formError}
-                  </p>
-                </div>
-              )}
-              <div>
-                <input
-                  className={`mb-1 ${getInputStyleClasses(nativeEmailError)}`}
-                  id="email"
-                  name="email"
-                  type="email"
-                  autoComplete="email"
-                  required
-                  placeholder="Email address"
-                  aria-label="Email address"
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus
-                  onBlur={(event) => {
-                    setNativeEmailError(
-                      event.currentTarget.value.length &&
-                        !event.currentTarget.validity.valid
-                        ? 'Invalid email address'
-                        : null,
-                    );
-                  }}
-                />
-                {nativeEmailError && (
-                  <p className="text-red-500 text-xs">
-                    {nativeEmailError} &nbsp;
-                  </p>
-                )}
-              </div>
-              <div className="flex items-center justify-between">
-                <button
-                  className="bg-primary text-contrast rounded py-2 px-4 focus:shadow-outline block w-full"
-                  type="submit"
-                >
-                  Request Reset Link
-                </button>
-              </div>
-              <div className="flex items-center mt-8 border-t border-gray-300">
-                <p className="align-baseline text-sm mt-6">
-                  Return to &nbsp;
-                  <Link className="inline underline" to="/account/login">
-                    Login
-                  </Link>
-                </p>
-              </div>
-            </Form>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}