Merge pull request #326 from fccview/develop

Lift off!

Author: fccview

README.md

@@ -14,13 +14,13 @@ A self-hosted app for your checklists and notes.
 
 <p align="center">
   <a href="https://discord.gg/invite/mMuk2WzVZu">
-    <img width="40" src="https://skills.syvixor.com/api/icons?i=discord">
+    <img width="40" src="public/repo-images/discord.svg">
   </a>
   <a href="https://www.reddit.com/r/jotty">
-    <img width="40" src="https://skills.syvixor.com/api/icons?i=reddit">
+    <img width="40" src="public/repo-images/reddit.svg">
   </a>
   <a href="https://t.me/jottypage">
-    <img width="40" src="https://skills.syvixor.com/api/icons?i=telegram">
+    <img width="40" src="public/repo-images/telegram.svg">
   </a>
   <br />
   <br />
@@ -86,6 +86,7 @@ A self-hosted app for your checklists and notes.
 ## Getting Started
 
 My recommended way to run `jotty·page` is with Docker. You can also use:
+
 - The [Proxmox community script](https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/jotty.sh) for Proxmox VE
 - The [Unraid template](howto/UNRAID.md) for Unraid Community Applications
 
@@ -252,11 +253,10 @@ I will always detail these migrations in the release notes. I _highly recommend_
 
 ## Translations
 
-`jotty·page` can be translated in multiple languages, all translations are community driven and can be found in the [app/_translations](app/_translations) directory.
+`jotty·page` can be translated in multiple languages, all translations are community driven and can be found in the [app/\_translations](app/_translations) directory.
 
 📖 **For the complete translations documentation, see [howto/TRANSLATIONS.md](howto/TRANSLATIONS.md)**
 
-
 <a id="custom-themes-and-emojis"></a>
 
 ## Custom Manifest
@@ -357,6 +357,14 @@ I would like to thank the following members for raising issues and help test/deb
         <a href="https://github.com/rcallison"><img width="100" height="100" src="https://avatars.githubusercontent.com/u/535687?s=100&v=4"><br />rcallison</a>
       </td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="20%">
+        <a href="https://github.com/BaccanoMob"><img width="100" height="100" src="https://avatars.githubusercontent.com/u/82655889?s=100&v=4"><br />BaccanoMob</a>
+      </td>
+      <td align="center" valign="top" width="20%">
+        <a href="https://github.com/DaxtonD"><img width="100" height="100" src="https://avatars.githubusercontent.com/u/96708688?s=100&v=4"><br />DaxtonD</a>
+      </td>
+    </tr>
   </tbody>
 </table>
 

app/(loggedOutRoutes)/auth/login/page.tsx

@@ -1,13 +1,14 @@
 import { redirect } from "next/navigation";
 import { hasUsers } from "@/app/_server/actions/users";
-import LoginForm from "@/app/(loggedOutRoutes)/auth/login/login-form";
+import LoginForm from "@/app/_components/GlobalComponents/Auth/LoginForm";
 import { AuthShell } from "@/app/_components/GlobalComponents/Auth/AuthShell";
 import { getTranslations } from "next-intl/server";
+import { SsoOnlyLogin } from "@/app/_components/GlobalComponents/Auth/SsoOnlyLogin";
 
 export const dynamic = "force-dynamic";
 
 export default async function LoginPage() {
-  const t = await getTranslations('auth');
+  const t = await getTranslations("auth");
   const ssoEnabled = process.env.SSO_MODE === "oidc";
   const allowLocal =
     process.env.SSO_FALLBACK_LOCAL &&
@@ -23,26 +24,7 @@ export default async function LoginPage() {
   }
 
   if (ssoEnabled && !allowLocal) {
-    return (
-      <AuthShell>
-        <div className="space-y-6 text-center">
-          <div className="space-y-2">
-            <h1 className="text-2xl font-bold tracking-tight text-foreground">
-              {t('welcomeBack')}
-            </h1>
-            <p className="text-md lg:text-sm text-muted-foreground">
-              {t('signInWithOIDC')}
-            </p>
-          </div>
-          <a
-            className="inline-flex items-center justify-center rounded-jotty text-md lg:text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full"
-            href="/api/oidc/login"
-          >
-            {t('signInButton')}
-          </a>
-        </div>
-      </AuthShell>
-    );
+    return <SsoOnlyLogin />;
   }
 
   return (

app/(loggedOutRoutes)/auth/login/sso-only-login.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useAppMode } from "@/app/_providers/AppModeProvider";
+import { AuthShell } from "@/app/_components/GlobalComponents/Auth/AuthShell";
+
+export const SsoOnlyLogin = () => {
+  const t = useTranslations("auth");
+  const searchParams = useSearchParams();
+  const [error, setError] = useState<string>("");
+  const { appVersion } = useAppMode();
+
+  useEffect(() => {
+    const errorParam = searchParams.get("error");
+    if (errorParam === "unauthorized") {
+      setError(t("notAuthorized"));
+    }
+  }, [searchParams, t]);
+
+  return (
+    <AuthShell>
+      <div className="space-y-6 text-center">
+        <div className="space-y-2">
+          <h1 className="text-2xl font-bold tracking-tight text-foreground">
+            {t("welcomeBack")}
+          </h1>
+          <p className="text-md lg:text-sm text-muted-foreground">
+            {t("signInWithOIDC")}
+          </p>
+        </div>
+
+        {error && (
+          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-jotty">
+            <span className="text-md lg:text-sm text-destructive">{error}</span>
+          </div>
+        )}
+
+        <a
+          className="inline-flex items-center justify-center rounded-jotty text-md lg:text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full"
+          href="/api/oidc/login"
+        >
+          {t("signInButton")}
+        </a>
+
+        {appVersion && (
+          <div className="text-center text-sm lg:text-xs text-muted-foreground">
+            <a
+              target="_blank"
+              href={`https://github.com/fccview/jotty/releases/tag/${appVersion}`}
+            >
+              {t("version", { version: appVersion })}
+            </a>
+          </div>
+        )}
+      </div>
+    </AuthShell>
+  );
+};

app/(loggedOutRoutes)/auth/setup/page.tsx

@@ -6,6 +6,15 @@ import { AuthShell } from "@/app/_components/GlobalComponents/Auth/AuthShell";
 export const dynamic = "force-dynamic";
 
 export default async function SetupPage() {
+  const allowLocal =
+    process.env.SSO_FALLBACK_LOCAL &&
+    process.env.SSO_FALLBACK_LOCAL !== "no" &&
+    process.env.SSO_FALLBACK_LOCAL !== "false";
+
+  if (!allowLocal) {
+    redirect("/auth/login");
+  }
+
   const hasExistingUsers = await hasUsers();
   if (hasExistingUsers) {
     redirect("/auth/login");

app/_components/FeatureComponents/Checklists/Checklist.tsx

@@ -88,7 +88,7 @@ export const ChecklistView = ({
           onEdit={() => onEdit?.(list)}
         />
         <div className="flex-1 flex items-center justify-center">
-          <p>{t('checklists.loadingChecklist')}</p>
+          <p>{t("checklists.loadingChecklist")}</p>
         </div>
       </div>
     );
@@ -118,12 +118,12 @@ export const ChecklistView = ({
                   <label className="block">
                     Deleting {deletingItemsCount} item(s)
                   </label>
-                  <label>{t('checklists.doNotRefresh')}</label>
+                  <label>{t("checklists.doNotRefresh")}</label>
                 </>
               ),
             },
           ]}
-          onRemove={() => { }}
+          onRemove={() => {}}
         ></ToastContainer>
       )}
 
@@ -138,12 +138,12 @@ export const ChecklistView = ({
                   <label className="block">
                     Syncing {pendingTogglesCount} item(s)
                   </label>
-                  <label>{t('checklists.doNotRefresh')}</label>
+                  <label>{t("checklists.doNotRefresh")}</label>
                 </>
               ),
             },
           ]}
-          onRemove={() => { }}
+          onRemove={() => {}}
         ></ToastContainer>
       )}
 
@@ -157,8 +157,8 @@ export const ChecklistView = ({
           isLoading={isLoading}
           autoFocus={true}
           focusKey={focusKey}
-          placeholder={t('checklists.addNewItem')}
-          submitButtonText={t('checklists.addItem')}
+          placeholder={t("checklists.addNewItem")}
+          submitButtonText={t("checklists.addItem")}
         />
       )}
 
@@ -180,4 +180,3 @@ export const ChecklistView = ({
     </div>
   );
 };
-

app/_components/FeatureComponents/Checklists/ChecklistsClient.tsx

@@ -15,7 +15,13 @@ interface ChecklistsClientProps {
   children: React.ReactNode;
 }
 
-type ChecklistFilter = "all" | "completed" | "incomplete" | "pinned" | "task" | "simple";
+type ChecklistFilter =
+  | "all"
+  | "completed"
+  | "incomplete"
+  | "pinned"
+  | "task"
+  | "simple";
 
 interface ChecklistsFilterContextType {
   checklistFilter: ChecklistFilter;
@@ -33,10 +39,13 @@ interface ChecklistsFilterContextType {
     onPageChange: (page: number) => void;
     onItemsPerPageChange: (items: number) => void;
   } | null;
-  setPaginationInfo: (info: ChecklistsFilterContextType['paginationInfo']) => void;
+  setPaginationInfo: (
+    info: ChecklistsFilterContextType["paginationInfo"]
+  ) => void;
 }
 
-const ChecklistsFilterContext = createContext<ChecklistsFilterContextType | null>(null);
+const ChecklistsFilterContext =
+  createContext<ChecklistsFilterContextType | null>(null);
 
 export const useChecklistsFilter = () => {
   const context = useContext(ChecklistsFilterContext);
@@ -51,22 +60,26 @@ export const ChecklistsClient = ({
   user,
   children,
 }: ChecklistsClientProps) => {
-  const t = useTranslations('checklists');
-  const { openSettings, openCreateChecklistModal, openCreateCategoryModal } = useShortcut();
+  const t = useTranslations("checklists");
+  const { openSettings, openCreateChecklistModal, openCreateCategoryModal } =
+    useShortcut();
 
-  const [checklistFilter, setChecklistFilter] = useState<ChecklistFilter>(user?.defaultChecklistFilter || "all");
+  const [checklistFilter, setChecklistFilter] = useState<ChecklistFilter>(
+    user?.defaultChecklistFilter || "all"
+  );
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [recursive, setRecursive] = useState(false);
   const [itemsPerPage, setItemsPerPage] = useState(12);
-  const [paginationInfo, setPaginationInfo] = useState<ChecklistsFilterContextType['paginationInfo']>(null);
+  const [paginationInfo, setPaginationInfo] =
+    useState<ChecklistsFilterContextType["paginationInfo"]>(null);
 
   const filterOptions = [
-    { id: "all", name: t('allChecklists') },
-    { id: "completed", name: t('completed') },
-    { id: "incomplete", name: t('incomplete') },
-    { id: "pinned", name: t('pinned') },
-    { id: "task", name: t('taskLists') },
-    { id: "simple", name: t('simpleLists') },
+    { id: "all", name: t("allChecklists") },
+    { id: "completed", name: t("completed") },
+    { id: "incomplete", name: t("incomplete") },
+    { id: "pinned", name: t("pinned") },
+    { id: "task", name: t("taskLists") },
+    { id: "simple", name: t("simpleLists") },
   ];
 
   const handleClearAllCategories = () => {
@@ -98,7 +111,7 @@ export const ChecklistsClient = ({
           <FiltersSidebar
             isOpen={isOpen}
             onClose={onClose}
-            title={t('byStatus')}
+            title={t("byStatus")}
             filterValue={checklistFilter}
             filterOptions={filterOptions}
             onFilterChange={(value) => {
@@ -113,14 +126,22 @@ export const ChecklistsClient = ({
             currentPage={paginationInfo?.currentPage}
             totalPages={paginationInfo?.totalPages}
             onPageChange={paginationInfo?.onPageChange}
-            itemsPerPage={paginationInfo?.totalItems !== undefined ? itemsPerPage : undefined}
+            itemsPerPage={
+              paginationInfo?.totalItems !== undefined
+                ? itemsPerPage
+                : undefined
+            }
             onItemsPerPageChange={paginationInfo?.onItemsPerPageChange}
             totalItems={paginationInfo?.totalItems}
           />
         )}
       >
-        <MobileHeader user={user} onOpenSettings={openSettings} currentLocale={user?.preferredLocale || "en"} />
-        
+        <MobileHeader
+          user={user}
+          onOpenSettings={openSettings}
+          currentLocale={user?.preferredLocale || "en"}
+        />
+
         <div className="w-full px-4 py-6 h-full overflow-y-auto jotty-scrollable-content">
           {children}
         </div>

app/_components/FeatureComponents/Checklists/Parts/ChecklistClient.tsx

@@ -7,7 +7,7 @@ import { ChecklistView } from "@/app/_components/FeatureComponents/Checklists/Ch
 import { KanbanBoard } from "@/app/_components/FeatureComponents/Checklists/Parts/Kanban/KanbanBoard";
 import { ChecklistHeader } from "@/app/_components/FeatureComponents/Checklists/Parts/Common/ChecklistHeader";
 import { ShareModal } from "@/app/_components/GlobalComponents/Modals/SharingModals/ShareModal";
-import { ConversionConfirmModal } from "@/app/_components/GlobalComponents/Modals/ConfirmationModals/ConversionConfirmModal";
+import { ConfirmModal } from "@/app/_components/GlobalComponents/Modals/ConfirmationModals/ConfirmModal";
 import { EditChecklistModal } from "@/app/_components/GlobalComponents/Modals/ChecklistModals/EditChecklistModal";
 import { CreateListModal } from "@/app/_components/GlobalComponents/Modals/ChecklistModals/CreateListModal";
 import { CreateCategoryModal } from "@/app/_components/GlobalComponents/Modals/CategoryModals/CreateCategoryModal";
@@ -18,6 +18,7 @@ import { Modes } from "@/app/_types/enums";
 import { useShortcut } from "@/app/_providers/ShortcutsProvider";
 import { toggleArchive } from "@/app/_server/actions/dashboard";
 import { buildCategoryPath } from "@/app/_utils/global-utils";
+import { useTranslations } from "next-intl";
 
 interface ChecklistClientProps {
   checklist: Checklist;
@@ -31,6 +32,7 @@ export const ChecklistClient = ({
   user,
 }: ChecklistClientProps) => {
   const router = useRouter();
+  const t = useTranslations();
   const { checkNavigation } = useNavigationGuard();
   const [localChecklist, setLocalChecklist] = useState<Checklist>(checklist);
   const [showShareModal, setShowShareModal] = useState(false);
@@ -160,6 +162,7 @@ export const ChecklistClient = ({
       onOpenCreateModal={openCreateChecklistModal}
       onOpenCategoryModal={openCreateCategoryModal}
       user={user}
+      extraClasses="jotty-checklist-page"
     >
       {renderContent()}
 
@@ -174,12 +177,16 @@ export const ChecklistClient = ({
       )}
 
       {showConversionModal && (
-        <ConversionConfirmModal
+        <ConfirmModal
           isOpen={showConversionModal}
           onClose={() => setShowConversionModal(false)}
           onConfirm={handleConfirmConversion}
-          currentType={localChecklist.type}
-          newType={getNewType(localChecklist.type)}
+          title={t("checklists.convertChecklistType")}
+          message={t("checklists.convertTypeConfirmation", {
+            currentType: localChecklist.type === "simple" ? t("checklists.simpleChecklist") : t("checklists.taskProject"),
+            newType: getNewType(localChecklist.type) === "simple" ? t("checklists.simpleChecklist") : t("checklists.taskProject")
+          })}
+          confirmText={t("checklists.convert")}
         />
       )}