Login Studio

bench get-app https://github.com/thinkspedia/login_studio

[![Listed on Frappe Gems](https://frappegems.com/api/method/frappe_gems.seo.badge?app=thinkspedia%2Flogin_studio)](https://frappegems.com/gems/apps/thinkspedia/login_studio)

--- ## Why Login Studio? Frappe's default `/login` page is a plain card with a small logo. Changing it today usually means editing core files (lost on every update), copying the whole login template into a custom app (breaks when upstream changes OTP, LDAP or social login), or fragile CSS hacks. Login Studio replaces all of that with one installable app: - **Wraps, never copies, the stock login form.** Password, OTP / 2FA, LDAP, social login, login-with-email-link, forgot password and signup keep working — and keep receiving upstream fixes. - **Never locks you out.** Any layout or plugin error falls back to the stock Frappe login automatically, and a site-config kill switch is always available. ## Features | | | |---|---| | **Predefined layouts** | Split Hero, Centered Card, Glass, Minimal, Corporate Sidebar — mobile-first and responsive from 320 px up | | **Branding** | Logo, brand name, tagline, background image, primary / secondary / accent colors, fonts, corner radius | | **Powered by** | Configurable text and URL, show or hide | | **App versions** | Optionally show Frappe / ERPNext / HRMS (or any installed app) versions — off by default | | **Live custom layouts** | Duplicate any layout and edit its HTML (Jinja) and CSS in Desk; changes are live on save | | **Layout contract** | Documented variables, partials and CSS custom properties; templates run in Frappe's Jinja sandbox and are checked on save | | **Languages** | Follows the visitor's browser language, with an optional on-page language switcher that remembers the choice; right-to-left languages mirror the layout. Indonesian translation included | | **Plugin API** | Other apps can add layouts, context data, page slots and assets through `hooks.py` — no changes to Login Studio needed | | **On / off** | One checkbox restores the exact stock Frappe login | | **Privacy** | Fonts bundled locally; no third-party CDN calls from the login page by default | ## Layouts | Split Hero | Centered Card | Glass | |---|---|---| | | | | | Minimal | Corporate Sidebar | Split Hero on a phone | |---|---|---| | | | | ## Compatibility | Frappe / ERPNext | Branch | Python | |---|---|---| | v16 | `version-16` | 3.14 | | v15 | `version-15` | 3.10+ | ERPNext and HRMS are optional — Login Studio only requires Frappe. ## Installation ```bash # Pick the branch that matches your Frappe version bench get-app https://github.com/thinkspedia/login_studio --branch version-16 bench --site your-site.com install-app login_studio ``` Then open **Login Studio Settings** in Desk, choose a layout and set your branding. ### Emergency switch If a custom layout ever misbehaves, disable Login Studio without touching the database: ```bash bench --site your-site.com set-config login_studio_disabled 1 ``` On Frappe v16 this takes effect within a minute, because web workers cache the site config for 60 seconds; run `bench restart` to apply it immediately. On v15 it applies on the next request. ## Custom layouts at a glance A layout is a Jinja template plus CSS. The only required piece is the stock login form: ```jinja ``` ```css .my-login { display: grid; min-height: 100vh; grid-template-columns: 1fr; } .my-login__brand { background: linear-gradient(135deg, var(--ls-primary), var(--ls-secondary)); color: var(--ls-on-primary); } @media (min-width: 992px) { .my-login { grid-template-columns: 1fr 1fr; } } ``` The full layout contract (variables, partials, CSS custom properties, rules) is in [docs/layout-contract.md](docs/layout-contract.md). ## Plugin API at a glance Extend Login Studio from your own app's `hooks.py`: ```python login_studio_layouts = ["login_layouts"] # ship extra layouts login_studio_context = ["my_app.login.add_context"] # add data to the template login_studio_slots = {"below_form": "my_app.login.notice"} # inject HTML into named slots login_studio_assets = {"css": ["/assets/my_app/css/login.css"]} ``` The plugin guide is in [docs/plugins.md](docs/plugins.md), with a working example app in [examples/login_studio_plugin_example](examples/login_studio_plugin_example). ## Roadmap - [x] Five predefined layouts, branding, typography, Powered by, app versions - [x] Custom layouts with save-time checks and live preview - [x] Plugin API and example plugin - [x] Language switcher, Indonesian translation, right-to-left support - [ ] Frappe Cloud Marketplace listing - [ ] More layouts and translations (contributions welcome) See [CHANGELOG.md](CHANGELOG.md) for what each release contains. ## Development ```bash cd frappe-bench bench get-app https://github.com/thinkspedia/login_studio --branch develop bench --site dev.localhost install-app login_studio cd apps/login_studio pre-commit install # ruff, prettier, eslint on every commit bench --site dev.localhost set-config allow_tests true bench --site dev.localhost run-tests --app login_studio ``` Code must stay **Python 3.10 compatible** (Frappe v15). Anything that differs between Frappe v15 and v16 belongs in `login_studio/compat.py`. CI runs every test on both versions. ## Contributing Issues and pull requests are welcome; see [CONTRIBUTING.md](CONTRIBUTING.md). Please open an issue to discuss larger changes first. New layouts, translations and plugins are especially appreciated. This project follows a [Code of Conduct](CODE_OF_CONDUCT.md). Translations live in `login_studio/translations/.csv` (`source,translation,context`). Strings Frappe already translates are left to Frappe, so terms stay the same as in Desk. ## Security Please do not report security issues in public issues. See [SECURITY.md](SECURITY.md). ## License [MIT](LICENSE) © 2026 [Thinkspedia](https://thinkspedia.id) ### Third-party fonts Bundled unmodified under the SIL Open Font License 1.1, license files next to each font: - [Inter](https://github.com/rsms/inter) v4.1, © The Inter Project Authors — `login_studio/public/fonts/inter/` - [Source Serif 4](https://github.com/adobe-fonts/source-serif) 4.005, © Adobe — `login_studio/public/fonts/source-serif-4/` ---