feat: disable email functions if email not enabled (#195)

* fix: disabled email functionality unless email sending enabled

* feat: missing locale only russian complete

* chore: add ENABLE_EMAIL to docker compose

* chore: add translations

* fix: removed new env variable, and used SMTP_HOST instead for checking

* Revert "fix: removed new env variable, and used SMTP_HOST instead for checking"

This reverts commit 5f75237.

* feat: allow inviting members via link

* refactor: update env to disable email

* chore: update translations

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

Author: nahSystemu

.env.example

@@ -1,6 +1,6 @@
 # https://github.com/kanbn/kan?tab=readme-ov-file#environment-variables-)
 
-# Required environment variables 
+# Required environment variables
 NEXT_PUBLIC_BASE_URL= # e.g. https://kan.bn
 BETTER_AUTH_SECRET= # Random 32+ char string (can gen with: openssl rand -base64 24 | tr -dc 'a-zA-Z0-9' | head -c 32)
 
@@ -18,6 +18,9 @@ SMTP_PASSWORD=
 EMAIL_FROM= # e.g. "Kan <hello@mail.kan.bn>"
 SMTP_SECURE= # set to "false" to use port 587
 
+# Switch email features off entirely (optional)
+NEXT_PUBLIC_DISABLE_EMAIL=
+
 # S3 storage (optional)
 S3_REGION=
 S3_ENDPOINT=

README.md

@@ -147,6 +147,7 @@ pnpm dev
 | `SMTP_USER`                               | SMTP username/email                                      | No                       | `resend`                                                    |
 | `SMTP_PASSWORD`                           | SMTP password/token                                      | No                       | `re_xxxx`                                                   |
 | `SMTP_SECURE`                             | Use secure SMTP connection (defaults to true if not set) | For Email                | `true`                                                      |
+| `NEXT_PUBLIC_DISABLE_EMAIL`               | To disable all email features                            | For Email                | `true`                                                      |
 | `NEXT_PUBLIC_BASE_URL`                    | Base URL of your installation                            | Yes                      | `http://localhost:3000`                                     |
 | `BETTER_AUTH_SECRET`                      | Auth encryption secret                                   | Yes                      | Random 32+ char string                                      |
 | `BETTER_AUTH_TRUSTED_ORIGINS`             | Allowed callback origins                                 | No                       | `http://localhost:3000,http://localhost:3001`               |

apps/web/i18n.lock

@@ -112,6 +112,7 @@ checksums:
     Create%20board/singular: 155b62818bfab0e34f0089e1b34a32f3
     Create%20card/singular: 32792935dd5837a9433909b04021c22b
     Create%20checklist/singular: 5cbca15a7004558c4e6d381f83a34da2
+    Create%20invite%20link/singular: bef23fe786978f7abf78dece49a35a26
     Create%20label/singular: c64e8180fa956f005edc1fd9b8e65abb
     Create%20list/singular: 858c3d514aa95765ec82114393199144
     Create%20new%20board/singular: cbb87b1f4cc46b336ad9510c9f19407c
@@ -128,6 +129,7 @@ checksums:
     Custom%20workspace%20URL/singular: 7ba841d0946eb04fa3d17d74365be37b
     Customer%20Support/singular: 50e3c77e22e41061ca85ea2f02625a2e
     Dark/singular: 73e6e208ba628b26e90fcf6dce15e1b2
+    Deactivate%20invite%20link/singular: 8cf4bf82e153e4dc82d026448cb4dd10
     Delete/singular: 8bcf303dd10a645b5baacb02b47d72c9
     Delete%20account/singular: a9d11113f1a1d7e20582bdcc9633bcef
     Delete%20board/singular: e915cd160651ad4b61a67e8da0737c23
@@ -306,6 +308,8 @@ checksums:
     Own%20your%20data/singular: cc2178dac4bdf6b07f030cfc2a7510e6
     Part-time/singular: 213d63da450f35dabb3ab0e35e29feed
     Password%20Changed/singular: 1fcebe9ddb46f722a57f195efddc695d
+    Password%20is%20required%20to%20login./singular: a09c76294ca7b27b38658b34618a7119
+    Password%20is%20required%20to%20sign%20up./singular: 3fa1abbf2e6ac8ac4d18c215191bdbcc
     Password%20must%20be%20at%20least%208%20characters/singular: 4c30501d085eaccea47af34212bb26a7
     Passwords%20do%20not%20match/singular: 37ca1f4e0afc9a0b8e9617f767103c92
     Paused/singular: edb1f7b7219e1c9b7aa67159090d6991
@@ -367,7 +371,6 @@ checksums:
     Settings%20%7C%20Billing/singular: e44cba741d5414035a0b499c5766c203
     Settings%20%7C%20Integrations/singular: d04992e28016452f6d3d7dcc0b592415
     Settings%20%7C%20Workspace/singular: 5d0bacf7ff696da940f232df45edfd39
-    Share%20invite%20link/singular: ec5081a1f4e49fd9d782e770438f703b
     Sign%20in/singular: cb8757c7450e17de1e226e82fb0fa4a2
     Sign%20In/singular: ec7b8f314fe9bc6591006707484ede61
     Sign%20Up/singular: 0dd2ae69be4618c1f9e615774a4509ca

apps/web/src/components/AuthForm.tsx

@@ -5,7 +5,7 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { useQuery } from "@tanstack/react-query";
 import { env } from "next-runtime-env";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import {
   FaApple,
@@ -156,10 +156,12 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
   const [isLoginWithProviderPending, setIsLoginWithProviderPending] =
     useState<null | AuthProvider>(null);
   const [isCredentialsEnabled, setIsCredentialsEnabled] = useState(false);
+  const [isEmailSendingEnabled, setIsEmailSendingEnabled] = useState(false);
   const [isLoginWithEmailPending, setIsLoginWithEmailPending] = useState(false);
   const [loginError, setLoginError] = useState<string | null>(null);
   const { showPopup } = usePopup();
   const oidcProviderName = "OIDC";
+  const passwordRef = useRef<HTMLInputElement | null>(null);
 
   const redirect = useSearchParams().get("next");
   const callbackURL = redirect ?? "/boards";
@@ -168,6 +170,9 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
   useEffect(() => {
     const credentialsAllowed =
       env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
+    const emailSendingEnabled =
+      env("NEXT_PUBLIC_DISABLE_EMAIL")?.toLowerCase() !== "true";
+    setIsEmailSendingEnabled(emailSendingEnabled);
     setIsCredentialsEnabled(credentialsAllowed);
   }, []);
 
@@ -187,7 +192,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
 
   const handleLoginWithEmail = async (
     email: string,
-    password?: string,
+    password?: string | null,
     name?: string,
   ) => {
     setIsLoginWithEmailPending(true);
@@ -230,16 +235,26 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
         );
       }
     } else {
-      await authClient.signIn.magicLink(
-        {
-          email,
-          callbackURL,
-        },
-        {
-          onSuccess: () => setIsMagicLinkSent(true, email),
-          onError: ({ error }) => setLoginError(error.message),
-        },
-      );
+      // Only allow magic link if email sending is enabled and not in sign up mode
+      if (isEmailSendingEnabled && !isSignUp) {
+        await authClient.signIn.magicLink(
+          {
+            email,
+            callbackURL,
+          },
+          {
+            onSuccess: () => setIsMagicLinkSent(true, email),
+            onError: ({ error }) => setLoginError(error.message),
+          },
+        );
+      } else {
+        // Provide a clear error feedback when password omitted but magic link unavailable
+        setLoginError(
+          isSignUp
+            ? t`Password is required to sign up.`
+            : t`Password is required to login.`,
+        );
+      }
     }
 
     setIsLoginWithEmailPending(false);
@@ -276,11 +291,43 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
   };
 
   const onSubmit = async (values: FormValues) => {
-    await handleLoginWithEmail(values.email, values.password, values.name);
+    // Treat empty password string as undefined to trigger magic link path
+    const sanitizedPassword = values.password?.trim()
+      ? values.password
+      : undefined;
+    await handleLoginWithEmail(values.email, sanitizedPassword, values.name);
   };
 
   const password = watch("password");
 
+  // Determine if we should operate in magic link mode for current form state (login only)
+  const isMagicLinkMode = useMemo(() => {
+    // Magic link only viable when email sending enabled AND not sign up.
+    if (!isEmailSendingEnabled || isSignUp) return false;
+    // If credentials disabled we always default to magic link.
+    if (!isCredentialsEnabled) return true;
+    // Credentials enabled: user chooses magic link by leaving password blank.
+    return !password;
+  }, [isEmailSendingEnabled, isSignUp, isCredentialsEnabled, password]);
+
+  // Auto-focus password field when an error indicates it's required
+  useEffect(() => {
+    if (!isCredentialsEnabled) return;
+    // Focus when: sign up and missing password; login error requiring password; validation error on password.
+    const pwdEmpty = (password ?? "").length === 0;
+    let needsPassword = false;
+    if (isSignUp && pwdEmpty) {
+      needsPassword = true;
+    } else if (loginError?.toLowerCase().includes("password")) {
+      needsPassword = true;
+    } else if (errors.password) {
+      needsPassword = true;
+    }
+    if (needsPassword && passwordRef.current) {
+      passwordRef.current.focus();
+    }
+  }, [isSignUp, password, loginError, errors.password, isCredentialsEnabled]);
+
   return (
     <div className="space-y-6">
       {socialProviders?.length !== 0 && (
@@ -351,7 +398,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
               />
               {errors.password && (
                 <p className="mt-2 text-xs text-red-400">
-                  {t`Please enter a valid password`}
+                  {errors.password.message ?? t`Please enter a valid password`}
                 </p>
               )}
             </div>
@@ -368,9 +415,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
             variant="secondary"
           >
             {isSignUp ? t`Sign up with ` : t`Continue with `}
-            {!isCredentialsEnabled || (password && password.length !== 0)
-              ? t`email`
-              : t`magic link`}
+            {isMagicLinkMode ? t`magic link` : t`email`}
           </Button>
         </div>
       </form>