nudge new and returning users in the right direction by ensuring they have a project and can create a file with just one click.

Author: williamstein

src/packages/frontend/app/query-params.ts

@@ -79,4 +79,5 @@ export function init_query_params(): void {
   // not have session in the URL, so we can share url's without infected
   // other user's session.
   QueryParams.remove("session");
+
 }

src/packages/frontend/app/sign-in-action.ts

@@ -0,0 +1,115 @@
+/*
+Do something somewhat friendly when a user signs in for the first time,
+either after creating an account or being signed out.
+
+For now:
+
+- ensure they are a collab on at least one project
+- open the most recent project they actively used and show the +New page
+
+That's it for now.
+*/
+
+import { delay } from "awaiting";
+import { redux } from "@cocalc/frontend/app-framework";
+import { once } from "@cocalc/util/async-utils";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { cmp } from "@cocalc/util/misc";
+import { QueryParams } from "@cocalc/frontend/misc/query-params";
+
+export default async function signInAction() {
+  const signIn = QueryParams.get("sign-in");
+  if (signIn == null) {
+    return;
+  }
+  QueryParams.remove("sign-in");
+  await delay(1); // so projects store is created (not in sync initial load loop)
+  const project_id = await getProject();
+  const actions = redux.getActions("projects");
+  actions.open_project({ project_id, switch_to: true, target: "new" });
+  await actions.start_project(project_id);
+}
+
+async function create(title = "My First Project") {
+  const project_id = await webapp_client.project_client.create({
+    title,
+    description: "",
+  });
+  const projects = redux.getStore("projects");
+  // wait until projects_map is loaded, so we know what projects the users has (probably)
+  while (projects.getIn(["project_map", project_id]) == null) {
+    await once(projects, "change");
+  }
+  return project_id;
+}
+
+async function getProject(): Promise<string> {
+  const projects = redux.getStore("projects");
+  // wait until projects_map is loaded, so we know what projects the users has (probably)
+  while (projects.get("project_map") == null) {
+    await once(projects, "change");
+  }
+  const account = redux.getStore("account");
+  while (account.get("created") == null) {
+    await once(account, "change");
+  }
+
+  const created = account.get("created");
+  let project_map = projects.get("project_map")!;
+  if (project_map.size == 0) {
+    // no known projects -- could be a new account, or could be an old account and no *recent* projects
+    if (
+      (created?.valueOf() ?? Date.now()) >=
+      Date.now() - 2 * 24 * 60 * 60 * 1000
+    ) {
+      // new account -- make a project
+      return await create("My First Project");
+    } else {
+      // old account but no projects -- try loading all.
+      const projectActions = redux.getActions("projects");
+      await projectActions.load_all_projects();
+      project_map = projects.get("project_map")!;
+      if (project_map.size == 0) {
+        // still nothing -- just create
+        return await create();
+      }
+    }
+  }
+
+  const account_id = account.get("account_id");
+
+  // now there should be at least one project in project_map.
+  // Is there a non-deleted non-hidden project?
+  const options: any[] = [];
+  for (const [_, project] of project_map) {
+    if (project.get("deleted")) {
+      continue;
+    }
+    if (project.getIn(["users", account_id, "hide"])) {
+      continue;
+    }
+    options.push(project);
+  }
+  if (options.length == 0) {
+    return await create();
+  }
+
+  // Sort the projects by when YOU were last active on the project, or if you were
+  // never active on any project, by when the projects was last_edited.
+  const usedByYou = options.filter((x) => x.getIn(["last_active", account_id]));
+
+  if (usedByYou.length == 0) {
+    //  you were never active on any project, so just return project most recently edited
+    options.sort((x, y) => -cmp(x.get("last_edited"), y.get("last_edited")));
+    return options[0].get("project_id");
+  }
+
+  usedByYou.sort(
+    (x, y) =>
+      -cmp(
+        x.getIn(["last_active", account_id]),
+        y.getIn(["last_active", account_id]),
+      ),
+  );
+  return usedByYou[0].get("project_id");
+}

src/packages/frontend/compute/public-templates.tsx

@@ -313,7 +313,7 @@ export default function PublicTemplates({
   if (loading) {
     return (
       <div style={{ maxWidth: "1200px", margin: "15px auto", ...style }}>
-        Loading Templates... <Spin />
+        Loading Templates... <Spin delay={3000} />
       </div>
     );
   }

src/packages/frontend/entry-point.ts

@@ -25,7 +25,7 @@ import "./launch/actions";
 
 // Various jquery plugins:
 import "./jquery-plugins";
-import '@ant-design/v5-patch-for-react-19';
+import "@ant-design/v5-patch-for-react-19";
 
 // Initialize app stores, actions, etc.
 import { init as initJqueryPlugins } from "./jquery-plugins";

src/packages/frontend/projects/actions.ts

@@ -931,7 +931,10 @@ export class ProjectsActions extends Actions<ProjectsState> {
     project_id: string,
     options: { disablePayAsYouGo?: boolean } = {},
   ): Promise<boolean> => {
-    if (!(await allow_project_to_run(project_id))) {
+    if (
+      !(await allow_project_to_run(project_id)) ||
+      !store.getIn(["project_map", project_id])
+    ) {
       return false;
     }
     if (!options.disablePayAsYouGo) {

src/packages/frontend/session.ts

@@ -18,6 +18,7 @@ import { bind_methods } from "@cocalc/util/misc";
 import target from "@cocalc/frontend/client/handle-target";
 import { load_target } from "./history";
 import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
+import signInAction from "@cocalc/frontend/app/sign-in-action";
 
 const log = (..._args) => {
   // console.log("session: ", ..._args);
@@ -127,6 +128,9 @@ class SessionManager {
       this._initialized = true;
       // ... and load a target URL
       SessionManager.load_url_target();
+      // and finally possibly do a sign in action if the user just signed up
+      // or signed in after a while:
+      await signInAction();
     } catch (err) {
       console.warn("Error restoring session:", err);
     }

src/packages/next/components/auth/sign-in.tsx

@@ -140,10 +140,10 @@ function SignIn0(props: SignInProps) {
         {strategies == null
           ? "Sign in"
           : haveSSO
-          ? requiredSSO != null
-            ? "Sign in using your single sign-on provider"
-            : "Sign in using your email address or a single sign-on provider."
-          : "Sign in using your email address."}
+            ? requiredSSO != null
+              ? "Sign in using your single sign-on provider"
+              : "Sign in using your email address or a single sign-on provider."
+            : "Sign in using your email address."}
       </div>
       <form>
         {haveSSO && (
@@ -194,7 +194,6 @@ function SignIn0(props: SignInProps) {
         {requiredSSO == null && (
           <>
             <Button
-              disabled={signingIn || !email || !(password?.length >= 6)}
               shape="round"
               size="large"
               type="primary"

src/packages/next/components/auth/sign-up.tsx

@@ -9,7 +9,6 @@ import {
   GoogleReCaptchaProvider,
   useGoogleReCaptcha,
 } from "react-google-recaptcha-v3";
-
 import Markdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { MAX_PASSWORD_LENGTH } from "@cocalc/util/auth";
 import {
@@ -38,7 +37,7 @@ const LINE: CSSProperties = { margin: "15px 0" } as const;
 interface SignUpProps {
   minimal?: boolean; // use a minimal interface with less explanation and instructions (e.g., for embedding in other pages)
   requiresToken?: boolean; // will be determined by API call if not given.
-  onSuccess?: (opts?: {}) => void; // if given, call after sign up *succeeds*.
+  onSuccess?: () => void; // if given, call after sign up *succeeds*.
   has_site_license?: boolean;
   publicPathId?: string;
   showSignIn?: boolean;
@@ -173,7 +172,7 @@ function SignUp0({
       if (result.issues && len(result.issues) > 0) {
         setIssues(result.issues);
       } else {
-        onSuccess?.({});
+        onSuccess?.();
       }
     } catch (err) {
       setIssues({ error: `${err}` });

src/packages/next/locales/en/index.json

@@ -2,7 +2,7 @@
   "ar": "Arabic",
   "chat-text": "<p><strong><A>CoCalc's chatrooms</A></strong> offer a range of features to enhance communication and collaboration:</p> <ul> <li><strong>@-mentions</strong> for directly addressing collaborators or querying a language model</li> <li><strong>Emoticons</strong> support for expressing emotions</li> <li><strong>LaTeX formula</strong> rendering between $ signs</li> <li><strong>Threads</strong> and <strong>Hashtags</strong> for easy topic organization</li> <li><strong>Image insertion</strong> via upload or drag-and-drop</li> <li><strong>Markdown syntax</strong> for text formatting and link insertion</li> <li><strong>Notifications</strong> system with a bell icon for alerting users to new activity</li> </ul>",
   "chat-title": "Chat Rooms",
-  "compute-servers-text": "<p>Extend your CoCalc projects with powerful <strong>compute servers</strong>. They give you much more power, GPU options, and flexibility for your computations.  From within your project, spin up and connect to a powerful machine and tell your terminals and Jupyter Notebooks to run on these machines.</p><p>These servers optionally come with <strong>very competitively priced GPU support</strong>, they are <strong>billed by the second</strong> and your files are <strong>seamlessly synchronized</strong> between your project and servers.</p><p><A1>Read the docs</A1> and <A2>check out some applications</A2>.</p>",
+  "compute-servers-text": "<p>Extend your CoCalc projects with <strong>compute servers</strong>. Spin up and connect to a powerful machine or GPU and run your terminals and Jupyter Notebooks on these machines.</p><p>These come with <strong>very competitively priced GPU support</strong>, they are <strong>billed by the second</strong> and your files are <strong>seamlessly synchronized</strong> between your project and servers.</p><p><A1>Read the docs</A1> and <A2>check out some applications</A2>.</p>",
   "compute-servers-title": "Compute Servers with GPU support",
   "de": "German",
   "en": "English",

src/packages/next/pages/auth/sign-in.tsx

@@ -23,7 +23,7 @@ export default function Home({ customize }) {
       <Layout>
         <Header page="sign-in" />
         <Layout.Content style={{ backgroundColor: "white" }}>
-          <SignIn onSuccess={() => router.push("/")} />
+          <SignIn onSuccess={() => router.push("/app?sign-in")} />
           <Footer />
         </Layout.Content>
       </Layout>