Merge branch 'release-1.5'

Author: krokosik

package.json

@@ -20,7 +20,7 @@
     "start-with-latest-migrations": "prisma migrate deploy && next start",
     "d": "pnpm dx && pnpm dev",
     "dx": "pnpm i && pnpm dx:up && pnpm db:dev",
-    "dx:up": "docker compose -f docker/dev/compose.yml up -d",
+    "dx:up": "docker compose -f docker/dev/compose.yml --env-file .env up -d",
     "dx:down": "docker compose -f docker/dev/compose.yml down",
     "test": "jest",
     "test:watch": "jest --watch",

public/locales/en/common.json

@@ -118,6 +118,7 @@
   "errors": {
     "currency_conversion_error": "Error while setting currency conversion",
     "email_invalid": "Email is invalid, please try the signin flow again.",
+    "no_providers": "Error when fetching authentication providers. Please check backend logs.",
     "email_required": "Email is required",
     "feedback_min_length": "Feedback should be at least 10 characters",
     "feedback_required": "Feedback is required",

src/components/Friend/GroupSettleup.tsx

@@ -10,6 +10,7 @@ import { BigMath } from '~/utils/numbers';
 import { EntityAvatar } from '../ui/avatar';
 import { CurrencyInput } from '../ui/currency-input';
 import { AppDrawer } from '../ui/drawer';
+import { useSession } from 'next-auth/react';
 
 export const GroupSettleUp: React.FC<{
   amount: bigint;
@@ -19,6 +20,7 @@ export const GroupSettleUp: React.FC<{
   children: ReactNode;
   groupId: number;
 }> = ({ amount: _amount, currency, friend, user, children, groupId }) => {
+  const { data } = useSession();
   const { displayName, t, getCurrencyHelpersCached } = useTranslationWithUtils();
   const [amount, setAmount] = useState<bigint>(BigMath.abs(_amount));
   const [amountStr, setAmountStr] = useState(getCurrencyHelpersCached(currency).toUIString(amount));
@@ -38,8 +40,8 @@ export const GroupSettleUp: React.FC<{
   const addExpenseMutation = api.expense.addOrEditExpense.useMutation();
   const utils = api.useUtils();
 
-  const sender = 0 > amount ? user : friend;
-  const receiver = 0 > amount ? friend : user;
+  const sender = 0 > _amount ? user : friend;
+  const receiver = 0 > _amount ? friend : user;
 
   const saveExpense = React.useCallback(() => {
     if (!amount) {
@@ -97,7 +99,9 @@ export const GroupSettleUp: React.FC<{
             <EntityAvatar entity={receiver} />
           </div>
           <p className="mt-2 text-center text-sm text-gray-400">
-            {displayName(sender)} {t('ui.expense.user.pay')} {displayName(receiver)}
+            {displayName(sender, data?.user.id)}{' '}
+            {t(`ui.expense.${sender.id === data?.user.id ? 'you' : 'user'}.pay`)}{' '}
+            {displayName(receiver, data?.user.id)}
           </p>
         </div>
         <CurrencyInput

src/pages/auth/signin.tsx

@@ -25,6 +25,7 @@ import {
   FormMessage,
 } from '~/components/ui/form';
 import { Input } from '~/components/ui/input';
+import { LoadingSpinner } from '~/components/ui/spinner';
 import { env } from '~/env';
 import { getServerAuthSession } from '~/server/auth';
 import { customServerSideTranslations } from '~/utils/i18n/server';
@@ -56,10 +57,12 @@ const Home: NextPage<{
   feedbackEmail: string;
   providers: ClientSafeProvider[];
   callbackUrl?: string;
-}> = ({ error, providers, feedbackEmail, callbackUrl }) => {
+}> = ({ error, providers: serverProviders, feedbackEmail, callbackUrl }) => {
   const { t } = useTranslation();
   const [emailStatus, setEmailStatus] = useState<'idle' | 'sending' | 'success'>('idle');
   const [showVerificationStep, setShowVerificationStep] = useState(false);
+  const [providers, setProviders] = useState<ClientSafeProvider[]>(serverProviders);
+  const [isLoadingProviders, setIsLoadingProviders] = useState(false);
 
   const emailForm = useForm<EmailFormValues>({
     resolver: zodResolver(emailSchema(t)),
@@ -68,6 +71,30 @@ const Home: NextPage<{
     },
   });
 
+  // Client-side fallback for getProviders when server-side call fails
+  useEffect(() => {
+    if (serverProviders.length > 0) {
+      return;
+    }
+
+    void (async () => {
+      setIsLoadingProviders(true);
+      try {
+        const clientProviders = await getProviders();
+        if (clientProviders && Object.keys(clientProviders).length > 0) {
+          setProviders(Object.values(clientProviders));
+        } else {
+          throw new Error('No providers returned from getProviders()');
+        }
+      } catch (error) {
+        console.error('Error fetching providers client-side:', error);
+        toast.error(t('errors.no_providers'), { duration: 8000 });
+      } finally {
+        setIsLoadingProviders(false);
+      }
+    })();
+  }, [serverProviders.length, t]);
+
   useEffect(() => {
     if (error) {
       if ('SignupDisabled' === error) {
@@ -148,75 +175,85 @@ const Home: NextPage<{
             <LanguageSelector />
           </div>
 
-          {providers.length === 0 ? (
-            <div className="text-muted-foreground flex w-[300px] flex-col items-center gap-4 text-center">
-              <p className="text-lg font-semibold">{t('auth.no_providers_configured')}</p>
-              <p className="text-sm">
-                {t('auth.no_providers_instructions')}{' '}
-                <a
-                  className="text-primary underline"
-                  href="https://github.com/oss-apps/split-pro/blob/main/docker/README.md"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {t('auth.setup_instructions')}
-                </a>
-                .
-              </p>
+          {isLoadingProviders ? (
+            <div className="flex h-[200px] w-[300px] items-center justify-center">
+              <LoadingSpinner className="h-8 w-8" />
             </div>
           ) : (
             <>
-              {providers
-                .filter((provider) => 'email' !== provider.id)
-                .map((provider) => (
-                  <Button
-                    className="mx-auto flex w-[300px] items-center gap-3 bg-white hover:bg-gray-100 focus:bg-gray-100"
-                    onClick={handleProviderSignIn(provider.id)}
-                    key={provider.id}
-                  >
-                    {providerTypeGuard(provider.id) && providerSvgs[provider.id]}
-                    {t('auth.continue_with', { provider: provider.name })}
-                  </Button>
-                ))}
-              {providers && 2 === providers.length && (
-                <div className="mt-6 flex w-[300px] items-center justify-between gap-2">
-                  <p className="bg-background z-10 ml-[150px] -translate-x-1/2 px-4 text-sm">
-                    {t('ui.or')}
+              {providers.length === 0 ? (
+                <div className="text-muted-foreground flex w-[300px] flex-col items-center gap-4 text-center">
+                  <p className="text-lg font-semibold">{t('auth.no_providers_configured')}</p>
+                  <p className="text-sm">
+                    {t('auth.no_providers_instructions')}{' '}
+                    <a
+                      className="text-primary underline"
+                      href="https://github.com/oss-apps/split-pro/blob/main/docker/README.md"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t('auth.setup_instructions')}
+                    </a>
+                    .
                   </p>
-                  <div className="absolute h-px w-[300px] bg-linear-to-r from-zinc-800 via-zinc-300 to-zinc-800" />
                 </div>
-              )}
-              {providers.find((provider) => 'email' === provider.id) ? (
+              ) : (
                 <>
-                  <Form {...emailForm}>
-                    <form
-                      onSubmit={emailForm.handleSubmit(onEmailSubmit)}
-                      className="mt-6 space-y-8"
-                    >
-                      <FormField control={emailForm.control} name="email" render={field} />
+                  {providers
+                    .filter((provider) => 'email' !== provider.id)
+                    .map((provider) => (
                       <Button
-                        className="mt-6 w-[300px] bg-white hover:bg-gray-100 focus:bg-gray-100"
-                        type="submit"
-                        disabled={'sending' === emailStatus}
+                        className="mx-auto flex w-[300px] items-center gap-3 bg-white hover:bg-gray-100 focus:bg-gray-100"
+                        onClick={handleProviderSignIn(provider.id)}
+                        key={provider.id}
                       >
-                        {'sending' === emailStatus ? t('auth.sending') : t('auth.send_magic_link')}
+                        {providerTypeGuard(provider.id) && providerSvgs[provider.id]}
+                        {t('auth.continue_with', { provider: provider.name })}
                       </Button>
-                    </form>
-                  </Form>
+                    ))}
+                  {providers && 2 === providers.length && (
+                    <div className="mt-6 flex w-[300px] items-center justify-between gap-2">
+                      <p className="bg-background z-10 ml-[150px] -translate-x-1/2 px-4 text-sm">
+                        {t('ui.or')}
+                      </p>
+                      <div className="absolute h-px w-[300px] bg-linear-to-r from-zinc-800 via-zinc-300 to-zinc-800" />
+                    </div>
+                  )}
+                  {providers.find((provider) => 'email' === provider.id) ? (
+                    <>
+                      <Form {...emailForm}>
+                        <form
+                          onSubmit={emailForm.handleSubmit(onEmailSubmit)}
+                          className="mt-6 space-y-8"
+                        >
+                          <FormField control={emailForm.control} name="email" render={field} />
+                          <Button
+                            className="mt-6 w-[300px] bg-white hover:bg-gray-100 focus:bg-gray-100"
+                            type="submit"
+                            disabled={'sending' === emailStatus}
+                          >
+                            {'sending' === emailStatus
+                              ? t('auth.sending')
+                              : t('auth.send_magic_link')}
+                          </Button>
+                        </form>
+                      </Form>
+                    </>
+                  ) : null}
                 </>
-              ) : null}
+              )}
+              {feedbackEmail && (
+                <p className="text-muted-foreground mt-6 w-[300px] text-center text-sm">
+                  {t('auth.trouble_logging_in')}
+                  <br />
+                  {/* oxlint-disable-next-line next/no-html-link-for-pages */}
+                  <a className="underline" href={feedbackEmailLink}>
+                    {feedbackEmail ?? ''}
+                  </a>
+                </p>
+              )}
             </>
           )}
-          {feedbackEmail && (
-            <p className="text-muted-foreground mt-6 w-[300px] text-center text-sm">
-              {t('auth.trouble_logging_in')}
-              <br />
-              {/* oxlint-disable-next-line next/no-html-link-for-pages */}
-              <a className="underline" href={feedbackEmailLink}>
-                {feedbackEmail ?? ''}
-              </a>
-            </p>
-          )}
         </div>
       </main>
     </>
@@ -227,7 +264,12 @@ export default Home;
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const session = await getServerAuthSession(context);
-  const providers = await getProviders();
+  let providers: Record<string, ClientSafeProvider> | null = null;
+  try {
+    providers = await getProviders();
+  } catch (error) {
+    console.error(error);
+  }
   const { callbackUrl, error } = context.query;
 
   if (session) {