import { render } from "solid-js/web";
import { Router, Route, useNavigate } from "@solidjs/router";

function Home() {
  console.log("ran");

  return <h1>Home</h1>;
}

function App() {
  return (
    <Router>
      <Route
        preload={() => useNavigate()("/other")}
        path="/"
        component={Home}
      />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function Other() {
  return (
    <>
      <h1>Other</h1>
      <a href="/">Home</a>
    </>
  );
}

render(() => <App />, document.getElementById("app"));

import { render } from "solid-js/web";
import { Router, Route, useNavigate } from "@solidjs/router";

function Home() {
  console.log("ran");

  return <h1>Home</h1>;
}

function App() {
  return (
    <Router>
      <Route
        preload={() => useNavigate()("/other")}
        path="/"
        component={Home}
      />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function Other() {
  return (
    <>
      <h1>Other</h1>
      <a href="/">Home</a>
    </>
  );
}

render(() => <App />, document.getElementById("app"));

function App() {
  const redirect = useNavigate();
  return (
    <Router>
      <Route preload={() => redirect("/other")} path="/" component={Home} />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function App() {
  const redirect = useNavigate();
  return (
    <Router>
      <Route preload={() => redirect("/other")} path="/" component={Home} />
      <Route path="/other" component={Other} />
    </Router>
  );
}

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

function Home() {
  return <h1>Home</h1>;
}

function App() {
  return (
    <Router>
      <Route
        preload={() => Response.redirect("/other")}
        path="/"
        component={Home}
      />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function Other() {
  return <h1>Other</h1>;
}

render(() => <App />, document.getElementById("app"));

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

function Home() {
  return <h1>Home</h1>;
}

function App() {
  return (
    <Router>
      <Route
        preload={() => Response.redirect("/other")}
        path="/"
        component={Home}
      />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function Other() {
  return <h1>Other</h1>;
}

render(() => <App />, document.getElementById("app"));

import { action, redirect, useSubmission } from "@solidjs/router";
import { type Accessor, Show } from "solid-js";

export default function Home() {
    const login = action(async (data: FormData) => {
        "use server";

        const username = data.get("username");
        const password = data.get("password");

        if (typeof username !== "string" || typeof password !== "string")
            throw new Error("Invalid input");

        if (username === "a" && password === "b") throw redirect("/register");
        if (encodeURIComponent(username) !== username)
            throw new Error("Invalid username");
        return JSON.stringify({ username, password });
    }, "login");

    const form = useSubmission(login);

    return (
        <div>
            <h1>Login</h1>
            <Show when={form.pending}>
                <p>Submitting...</p>
            </Show>
            <Show when={form.result}>{(result) => <p>{result()}</p>}</Show>
            <p>
                Don't have an account? <a href="/register">Register</a>
            </p>
            <Show when={form.error}>
                {(error: Accessor<Error>) => <span>{error().message}</span>}
            </Show>
            <form action={login} method="post">
                <div>
                    <input name="username" required placeholder="Username" />
                </div>
                <div>
                    <input
                        required
                        type="password"
                        name="password"
                        placeholder="Password"
                    />
                </div>
                <button>Submit</button>
            </form>
        </div>
    );
}

import { action, redirect, useSubmission } from "@solidjs/router";
import { type Accessor, Show } from "solid-js";

export default function Home() {
    const login = action(async (data: FormData) => {
        "use server";

        const username = data.get("username");
        const password = data.get("password");

        if (typeof username !== "string" || typeof password !== "string")
            throw new Error("Invalid input");

        if (username === "a" && password === "b") throw redirect("/register");
        if (encodeURIComponent(username) !== username)
            throw new Error("Invalid username");
        return JSON.stringify({ username, password });
    }, "login");

    const form = useSubmission(login);

    return (
        <div>
            <h1>Login</h1>
            <Show when={form.pending}>
                <p>Submitting...</p>
            </Show>
            <Show when={form.result}>{(result) => <p>{result()}</p>}</Show>
            <p>
                Don't have an account? <a href="/register">Register</a>
            </p>
            <Show when={form.error}>
                {(error: Accessor<Error>) => <span>{error().message}</span>}
            </Show>
            <form action={login} method="post">
                <div>
                    <input name="username" required placeholder="Username" />
                </div>
                <div>
                    <input
                        required
                        type="password"
                        name="password"
                        placeholder="Password"
                    />
                </div>
                <button>Submit</button>
            </form>
        </div>
    );
}