@wasp.sh/wasp-cli-darwin-x64-unknown 0.20.0

package/data/Generator/templates/sdk/wasp/auth/forms/internal/auth-styles.css

@@ -0,0 +1,30 @@
+:root {
+  /* ATTENTION: Keep this list in sync with the one at ../types.ts */
+  /*
+    This is the list of CSS variables that are used in the auth forms, and that
+    the user can override.
+  */
+
+  /* Colors */
+  --color-waspYellow: #ffcc00;
+  --color-gray700: #a1a5ab;
+  --color-gray600: #d1d5db;
+  --color-gray500: gainsboro;
+  --color-gray400: #f0f0f0;
+  --color-red: #FED7D7;
+  --color-darkRed: #fa3838;
+  --color-green: #C6F6D5;
+
+  /* Semantic colors */
+  --color-brand: var(--color-waspYellow);
+  --color-brandAccent: #ffdb46;
+  --color-errorBackground: var(--color-red);
+  --color-errorText: #2D3748;
+  --color-successBackground: var(--color-green);
+  --color-successText: #2D3748;
+  --color-submitButtonText: black;
+  --color-formErrorText: var(--color-darkRed);
+
+  /* Font sizes */
+  --font-size-sm: 1rem;
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/common/LoginSignupForm.module.css

@@ -0,0 +1,55 @@
+.orContinueWith {
+  position: relative;
+  margin-top: 1.5rem;
+}
+
+.orContinueWithLineContainer {
+  position: absolute;
+  inset: 0px;
+  display: flex;
+  align-items: center;
+}
+
+.orContinueWithLine {
+  width: 100%;
+  border-top-width: 1px;
+  border-color: var(--color-gray500);
+}
+
+.orContinueWithTextContainer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+}
+
+.orContinueWithText {
+  background-color: white;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.socialAuth {
+  margin-top: 1.5rem;
+}
+
+.socialAuthLabel {
+  font-weight: 500;
+  font-size: var(--font-size-sm);
+}
+
+.socialAuthButtons {
+  gap: 16px;
+  margin-top: 0.5rem;
+  display: flex;
+}
+
+.socialAuthButtons.horizontal {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
+}
+
+.socialAuthButtons.vertical {
+  flex-direction: column;
+  margin: 8px 0;
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/common/LoginSignupForm.tsx

@@ -0,0 +1,291 @@
+{{={= =}=}}
+import { useContext } from 'react'
+import { useForm, UseFormReturn } from 'react-hook-form'
+import styles from './LoginSignupForm.module.css'
+import '../auth-styles.css'
+import { config } from 'wasp/client'
+import { clsx } from '../util'
+
+import { AuthContext } from '../../Auth'
+import {
+  Form,
+  FormInput,
+  FormItemGroup,
+  FormLabel,
+  FormError,
+  FormTextarea,
+  SubmitButton,
+} from '../Form'
+import type {
+  AdditionalSignupFields,
+  AdditionalSignupField,
+  AdditionalSignupFieldRenderFn,
+  FormState,
+} from '../../types'
+{=# isSocialAuthEnabled =}
+import * as SocialIcons from '../social/SocialIcons'
+import { SocialButton } from '../social/SocialButton'
+{=/ isSocialAuthEnabled =}
+{=# isAnyPasswordBasedAuthEnabled =}
+import { useNavigate } from 'react-router-dom'
+{=/ isAnyPasswordBasedAuthEnabled =}
+{=# enabledProviders.isUsernameAndPasswordAuthEnabled =}
+import { useUsernameAndPassword } from '../usernameAndPassword/useUsernameAndPassword'
+{=/ enabledProviders.isUsernameAndPasswordAuthEnabled =}
+{=# enabledProviders.isEmailAuthEnabled =}
+import { useEmail } from '../email/useEmail'
+{=/ enabledProviders.isEmailAuthEnabled =}
+
+{=# areBothSocialAndPasswordBasedAuthEnabled =}
+{=/ areBothSocialAndPasswordBasedAuthEnabled =}
+{=# isSocialAuthEnabled =}
+{=/ isSocialAuthEnabled =}
+{=# enabledProviders.isSlackAuthEnabled =}
+const slackSignInUrl = `${config.apiUrl}{= slackSignInPath =}`
+{=/ enabledProviders.isSlackAuthEnabled =}
+{=# enabledProviders.isDiscordAuthEnabled =}
+const discordSignInUrl = `${config.apiUrl}{= discordSignInPath =}`
+{=/ enabledProviders.isDiscordAuthEnabled =}
+{=# enabledProviders.isGoogleAuthEnabled =}
+const googleSignInUrl = `${config.apiUrl}{= googleSignInPath =}`
+{=/ enabledProviders.isGoogleAuthEnabled =}
+{=# enabledProviders.isKeycloakAuthEnabled =}
+const keycloakSignInUrl = `${config.apiUrl}{= keycloakSignInPath =}`
+{=/ enabledProviders.isKeycloakAuthEnabled =}
+{=# enabledProviders.isGitHubAuthEnabled =}
+const gitHubSignInUrl = `${config.apiUrl}{= gitHubSignInPath =}`
+{=/ enabledProviders.isGitHubAuthEnabled =}
+
+{=!
+// Since we allow users to add additional fields to the signup form, we don't
+// know the exact shape of the form values. We are assuming that the form values
+// will be a flat object with string values.
+=}
+// PRIVATE API
+export type LoginSignupFormFields = {
+  [key: string]: string;
+}
+
+// PRIVATE API
+export const LoginSignupForm = ({
+    state,
+    socialButtonsDirection = 'horizontal',
+    additionalSignupFields,
+}: {
+    state: 'login' | 'signup'
+    socialButtonsDirection?: 'horizontal' | 'vertical'
+    additionalSignupFields?: AdditionalSignupFields
+}) => {
+  const {
+    isLoading,
+    setErrorMessage,
+    setSuccessMessage,
+    setIsLoading,
+  } = useContext(AuthContext)
+  const isLogin = state === 'login'
+  const cta = isLogin ? 'Log in' : 'Sign up';
+  {=# isAnyPasswordBasedAuthEnabled =}
+  const navigate = useNavigate();
+  const onErrorHandler = (error) => {
+    setErrorMessage({ title: error.message, description: error.data?.data?.message })
+  };
+  {=/ isAnyPasswordBasedAuthEnabled =}
+  const hookForm = useForm<LoginSignupFormFields>()
+  const { register, formState: { errors }, handleSubmit: hookFormHandleSubmit } = hookForm
+  {=# enabledProviders.isUsernameAndPasswordAuthEnabled =}
+  const { handleSubmit } = useUsernameAndPassword({
+    isLogin,
+    onError: onErrorHandler,
+    onSuccess() {
+      navigate('{= onAuthSucceededRedirectTo =}')
+    },
+  });
+  {=/ enabledProviders.isUsernameAndPasswordAuthEnabled =}
+  {=# enabledProviders.isEmailAuthEnabled =}
+  const { handleSubmit } = useEmail({
+    isLogin,
+    onError: onErrorHandler,
+    showEmailVerificationPending() {
+      hookForm.reset()
+      setSuccessMessage(`You've signed up successfully! Check your email for the confirmation link.`)
+    },
+    onLoginSuccess() {
+      navigate('{= onAuthSucceededRedirectTo =}')
+    },
+  });
+  {=/ enabledProviders.isEmailAuthEnabled =}
+  {=# isAnyPasswordBasedAuthEnabled =}
+  async function onSubmit (data) {
+    setIsLoading(true);
+    setErrorMessage(null);
+    setSuccessMessage(null);
+    try {
+      await handleSubmit(data);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  {=/ isAnyPasswordBasedAuthEnabled =}
+
+  return (<>
+      {=# isSocialAuthEnabled =}
+        <div className={styles.socialAuth}>
+          <div className={styles.socialAuthLabel}>{cta} with</div>
+            <div className={clsx(styles.socialAuthButtons, styles[socialButtonsDirection])}>
+            {=# enabledProviders.isSlackAuthEnabled =}
+              <SocialButton href={slackSignInUrl}><SocialIcons.Slack/></SocialButton>
+            {=/ enabledProviders.isSlackAuthEnabled =}
+
+            {=# enabledProviders.isDiscordAuthEnabled =}
+              <SocialButton href={discordSignInUrl}><SocialIcons.Discord/></SocialButton>
+            {=/ enabledProviders.isDiscordAuthEnabled =}
+
+            {=# enabledProviders.isGoogleAuthEnabled =}
+              <SocialButton href={googleSignInUrl}><SocialIcons.Google/></SocialButton>
+            {=/ enabledProviders.isGoogleAuthEnabled =}
+
+            {=# enabledProviders.isKeycloakAuthEnabled =}
+              <SocialButton href={keycloakSignInUrl}><SocialIcons.Keycloak/></SocialButton>
+            {=/ enabledProviders.isKeycloakAuthEnabled =}
+
+            {=# enabledProviders.isGitHubAuthEnabled =}
+              <SocialButton href={gitHubSignInUrl}><SocialIcons.GitHub/></SocialButton>
+            {=/ enabledProviders.isGitHubAuthEnabled =}
+          </div>
+        </div>
+      {=/ isSocialAuthEnabled =}
+      {=# areBothSocialAndPasswordBasedAuthEnabled =}
+        <div className={styles.orContinueWith}>
+          <div className={styles.orContinueWithLineContainer}>
+            <div className={styles.orContinueWithLine}/>
+          </div>
+          <div className={styles.orContinueWithTextContainer}>
+            <span className={styles.orContinueWithText}>Or continue with</span>
+          </div>
+        </div>
+      {=/ areBothSocialAndPasswordBasedAuthEnabled =}
+      {=# isAnyPasswordBasedAuthEnabled =}
+        <Form onSubmit={hookFormHandleSubmit(onSubmit)}>
+          {=# enabledProviders.isUsernameAndPasswordAuthEnabled =}
+          <FormItemGroup>
+            <FormLabel>Username</FormLabel>
+            <FormInput
+              {...register('username', {
+                required: 'Username is required',
+              })}
+              type="text"
+              disabled={isLoading}
+            />
+            {errors.username && <FormError>{errors.username.message}</FormError>}
+          </FormItemGroup>
+          {=/ enabledProviders.isUsernameAndPasswordAuthEnabled =}
+          {=# enabledProviders.isEmailAuthEnabled =}
+          <FormItemGroup>
+            <FormLabel>E-mail</FormLabel>
+            <FormInput
+              {...register('email', {
+                required: 'Email is required',
+              })}
+              type="email"
+              disabled={isLoading}
+            />
+            {errors.email && <FormError>{errors.email.message}</FormError>}
+          </FormItemGroup>
+          {=/ enabledProviders.isEmailAuthEnabled =}
+          <FormItemGroup>
+            <FormLabel>Password</FormLabel>
+            <FormInput
+              {...register('password', {
+                required: 'Password is required',
+              })}
+              type="password"
+              disabled={isLoading}
+            />
+            {errors.password && <FormError>{errors.password.message}</FormError>}
+          </FormItemGroup>
+          <AdditionalFormFields
+            hookForm={hookForm}
+            formState={{ isLoading }}
+            additionalSignupFields={additionalSignupFields}
+          />
+          <FormItemGroup>
+            <SubmitButton type="submit" disabled={isLoading}>{cta}</SubmitButton>
+          </FormItemGroup>
+        </Form>
+      {=/ isAnyPasswordBasedAuthEnabled =}
+  </>)
+}
+
+function AdditionalFormFields({
+  hookForm,
+  formState: { isLoading },
+  additionalSignupFields,
+}: {
+  hookForm: UseFormReturn<LoginSignupFormFields>;
+  formState: FormState;
+  additionalSignupFields?: AdditionalSignupFields;
+}) {
+  const {
+    register,
+    formState: { errors },
+  } = hookForm;
+
+  function renderField<ComponentType extends React.JSXElementConstructor<any>>(
+    field: AdditionalSignupField,
+    // Ideally we would use ComponentType here, but it doesn't work with react-hook-form
+    Component: any,
+    props?: React.ComponentProps<ComponentType>
+  ) {
+    const errorMessage = errors[field.name]?.message;
+    return (
+      <FormItemGroup key={field.name}>
+        <FormLabel>{field.label}</FormLabel>
+        <Component
+          {...register(field.name, field.validations)}
+          {...props}
+          disabled={isLoading}
+        />
+        {errorMessage && (
+          <FormError>{errorMessage}</FormError>
+        )}
+      </FormItemGroup>
+    );
+  }
+
+  if (areAdditionalFieldsRenderFn(additionalSignupFields)) {
+    return additionalSignupFields(hookForm, { isLoading })
+  }
+
+  return (
+    additionalSignupFields &&
+    additionalSignupFields.map((field) => {
+      if (isFieldRenderFn(field)) {
+        return field(hookForm, { isLoading })
+      }
+      switch (field.type) {
+        case 'input':
+          return renderField<typeof FormInput>(field, FormInput, {
+            type: 'text',
+          })
+        case 'textarea':
+          return renderField<typeof FormTextarea>(field, FormTextarea)
+        default:
+          throw new Error(
+            `Unsupported additional signup field type: ${field.type}`
+          )
+      }
+    })
+  )
+}
+
+function isFieldRenderFn(
+  additionalSignupField: AdditionalSignupField | AdditionalSignupFieldRenderFn
+): additionalSignupField is AdditionalSignupFieldRenderFn {
+  return typeof additionalSignupField === 'function'
+}
+
+function areAdditionalFieldsRenderFn(
+  additionalSignupFields?: AdditionalSignupFields
+): additionalSignupFields is AdditionalSignupFieldRenderFn {
+  return typeof additionalSignupFields === 'function'
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/ForgotPasswordForm.tsx

@@ -0,0 +1,52 @@
+import { useContext } from 'react'
+import { useForm } from 'react-hook-form'
+import { requestPasswordReset } from '../../../email/actions/passwordReset.js'
+import { Form, FormItemGroup, FormLabel, FormInput, SubmitButton, FormError } from '../Form'
+import { AuthContext } from '../../Auth'
+
+// PRIVATE API
+export const ForgotPasswordForm = () => {
+  const { register, handleSubmit, reset, formState: { errors } } = useForm<{ email: string }>()
+  const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useContext(AuthContext)
+
+  const onSubmit = async (data) => {
+    setIsLoading(true)
+    setErrorMessage(null)
+    setSuccessMessage(null)
+    try {
+      await requestPasswordReset(data)
+      reset()
+      setSuccessMessage('Check your email for a password reset link.')
+    } catch (error) {
+      setErrorMessage({
+        title: error.message,
+        description: error.data?.data?.message,
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <FormItemGroup>
+          <FormLabel>E-mail</FormLabel>
+          <FormInput
+            {...register('email', {
+              required: 'Email is required',
+            })}
+            type="email"
+            disabled={isLoading}
+          />
+          {errors.email && <FormError>{errors.email.message}</FormError>}
+        </FormItemGroup>
+        <FormItemGroup>
+          <SubmitButton type="submit" disabled={isLoading}>
+            Send password reset email
+          </SubmitButton>
+        </FormItemGroup>
+      </Form>
+    </>
+  )
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/ResetPasswordForm.tsx

@@ -0,0 +1,82 @@
+import { useContext } from 'react'
+import { useForm } from 'react-hook-form'
+import { resetPassword } from '../../../email/actions/passwordReset.js'
+import { useLocation } from 'react-router-dom'
+import { Form, FormItemGroup, FormLabel, FormInput, SubmitButton, FormError } from '../Form'
+import { AuthContext } from '../../Auth'
+
+// PRIVATE API
+export const ResetPasswordForm = () => {
+  const { register, handleSubmit, reset, formState: { errors } } = useForm<{ password: string; passwordConfirmation: string }>()
+  const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useContext(AuthContext)
+  const location = useLocation()
+  const token = new URLSearchParams(location.search).get('token')
+  const onSubmit = async (data) => {
+    if (!token) {
+      setErrorMessage({
+        title:
+          'The token is missing from the URL. Please check the link you received in your email.',
+      })
+      return
+    }
+
+    if (!data.password || data.password !== data.passwordConfirmation) {
+      setErrorMessage({ title: `Passwords don't match!` })
+      return
+    }
+
+    setIsLoading(true)
+    setErrorMessage(null)
+    setSuccessMessage(null)
+    try {
+      await resetPassword({ password: data.password, token })
+      reset()
+      setSuccessMessage('Your password has been reset.')
+    } catch (error) {
+      setErrorMessage({
+        title: error.message,
+        description: error.data?.data?.message,
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <FormItemGroup>
+          <FormLabel>New password</FormLabel>
+          <FormInput
+            {...register('password', {
+              required: 'Password is required',
+            })}
+            type="password"
+            disabled={isLoading}
+          />
+          {errors.passwordConfirmation && (
+            <FormError>{errors.passwordConfirmation.message}</FormError>
+          )}
+        </FormItemGroup>
+        <FormItemGroup>
+          <FormLabel>Confirm new password</FormLabel>
+          <FormInput
+            {...register('passwordConfirmation', {
+              required: 'Password confirmation is required',
+            })}
+            type="password"
+            disabled={isLoading}
+          />
+          {errors.passwordConfirmation && (
+            <FormError>{errors.passwordConfirmation.message}</FormError>
+          )}
+        </FormItemGroup>
+        <FormItemGroup>
+          <SubmitButton type="submit" disabled={isLoading}>
+            Reset password
+          </SubmitButton>
+        </FormItemGroup>
+      </Form>
+    </>
+  )
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/VerifyEmailForm.tsx

@@ -0,0 +1,43 @@
+import { useContext } from 'react'
+import { useLocation } from 'react-router-dom'
+import { verifyEmail } from '../../../email/actions/verifyEmail.js'
+import { Message } from '../Message'
+import { AuthContext } from '../../Auth'
+import { useEffectOnce } from '../../../../client/hooks.js'
+
+// PRIVATE API
+export const VerifyEmailForm = () => {
+  const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useContext(AuthContext)
+  const location = useLocation()
+  const token = new URLSearchParams(location.search).get('token')
+
+  async function submitForm() {
+    if (!token) {
+      setErrorMessage({
+        title:
+          'The token is missing from the URL. Please check the link you received in your email.',
+      })
+      return
+    }
+    setIsLoading(true)
+    setErrorMessage(null)
+    setSuccessMessage(null)
+    try {
+      await verifyEmail({ token })
+      setSuccessMessage('Your email has been verified. You can now log in.')
+    } catch (error) {
+      setErrorMessage({
+        title: error.message,
+        description: error.data?.data?.message,
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffectOnce(() => {
+    submitForm()
+  })
+
+  return <>{isLoading && <Message>Verifying email...</Message>}</>
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/useEmail.ts

@@ -0,0 +1,33 @@
+import { signup } from '../../../email/actions/signup'
+import { login } from '../../../email/actions/login'
+
+// PRIVATE API
+export function useEmail({
+  onError,
+  showEmailVerificationPending,
+  onLoginSuccess,
+  isLogin,
+}: {
+  onError: (error: Error) => void
+  showEmailVerificationPending: () => void
+  onLoginSuccess: () => void
+  isLogin: boolean
+}) {
+  async function handleSubmit(data) {
+    try {
+      if (isLogin) {
+        await login(data)
+        onLoginSuccess()
+      } else {
+        await signup(data)
+        showEmailVerificationPending()
+      }
+    } catch (err: unknown) {
+      onError(err as Error)
+    }
+  }
+
+  return {
+    handleSubmit,
+  }
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/social/SocialButton.module.css

@@ -0,0 +1,33 @@
+/*
+  Using !important with some of the components is a workaround for Tailwind
+  CSS's having too much precedence.
+  https://github.com/wasp-lang/wasp/issues/1764
+*/
+
+.socialButton {
+  display: flex !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  /* NOTE(matija): icon is otherwise blue, since that
+     is link's default font color. */
+  color: inherit !important;
+  background-color: #f0f0f0 !important;
+  border-radius: 0.375rem !important;
+  border-width: 1px !important;
+  border-color: var(--color-gray600) !important;
+  font-size: 13px !important;
+  padding: 0.5rem 0.75rem !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition-duration: 100ms !important;
+  text-decoration: none;
+}
+
+.socialButton:visited {
+  color: inherit !important;
+}
+
+.socialButton:hover {
+  background-color: var(--color-gray500) !important;
+  color: inherit !important;
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/social/SocialButton.tsx

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import "../auth-styles.css";
+import { clsx } from "../util";
+import styles from "./SocialButton.module.css";
+
+// PRIVATE API
+export const SocialButton = forwardRef<
+  ComponentRef<"a">,
+  ComponentPropsWithoutRef<"a">
+>(({ children, className, ...props }, ref) => (
+  <a className={clsx(styles.socialButton, className)} {...props} ref={ref}>
+    {children}
+  </a>
+));

package/data/Generator/templates/sdk/wasp/auth/forms/internal/social/SocialIcons.module.css

@@ -0,0 +1,4 @@
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}