A single-file HTML mockup of a Wiki.js instance, covering the login screen
and the post-login home page, built to reflect Wiki.js's built-in
Local authentication strategy (username/password — no external identity
provider required).
File: wikijs-home-login.html
| Screen |
Purpose |
| Login screen |
Full-page sign-in form using the Local auth strategy |
| Home page |
Wiki shell shown after a successful sign-in |
The two screens live in one HTML file and are toggled with vanilla
JavaScript — no build step, no external dependencies beyond Google Fonts
(Roboto + Material Icons).
- Auth strategy tab — shows a single Local tab, representing
Wiki.js's built-in provider (as opposed to OAuth2, LDAP, SAML, etc.,
which would appear as additional tabs if enabled).
- Fields — Email and Password, each with an icon and inline validation
(invalid email format / empty password blocks submission).
- Remember me checkbox and Forgot password? link.
- Login button — shows a brief "Signing in…" loading state before
transitioning to the home page.
- Footer — "Powered by Wiki.js · Local Authentication" as a visual
reminder of which provider is in use.
- Sidebar — brand mark, page search, navigation (Home, All Pages,
Recently Updated, Favorites), Spaces (Engineering, Onboarding, Product),
and Admin links (Users & Groups, Site Administration). The signed-in
user's name/initial is pulled from the email entered at login.
- Top bar — breadcrumb and page actions (History, New Page).
- Content area — welcome heading, shortcut cards to common pages, and a
banner confirming the session was authenticated via Wiki.js's local
strategy.
- Sign out — the logout icon in the sidebar footer returns to the login
screen.
- This is a front-end mockup only — the login form does not call a real
API; submitting any valid-looking email/password pair signs you in.
- No data is persisted (no
localStorage/cookies) — refreshing the page
resets to the login screen.
- Colors and layout are modeled on Wiki.js's actual look (indigo/teal
gradient, Material Design components) rather than a fully custom brand.
Wiki.js renders its login page server-side, so this HTML can't be dropped
in directly as a replacement page. To get the same effect on an actual
instance:
- Administration → Authentication — confirm the Local strategy is
enabled and set as default if it should be the only sign-in option.
- Administration → Login — customize the real login screen's logo,
background, and site name to match this design direction.
- Administration → Theme — adjust primary/accent colors and site title
shown across the wiki shell.
- Auth mechanism represented: Wiki.js built-in Local (username +
password) strategy
- File type: static HTML, self-contained
- Dependencies: Google Fonts (Roboto, Material Icons) via CDN
- Persistence: none (session state is in-memory only, per page load)