Form Example: Login Form

A user login form with username, password and 2FA options.

{
    "schema": {
        "type": "object",
        "properties": {
            "username": {
                "type": "string",
                "title": "Username or Email"
            },
            "password": {
                "type": "string",
                "title": "Password"
            },
            "twoFactorToken": {
                "type": "string",
                "title": "2FA Token (optional)",
                "description": "Enter your two-factor authentication code if enabled"
            }
        },
        "required": [
            "username",
            "password"
        ]
    },
    "uischema": {
        "type": "VerticalLayout",
        "elements": [
            {
                "type": "Control",
                "scope": "#/properties/username",
                "options": {
                    "input_group_prepend_icon": "fa-solid fa-user"
                }
            },
            {
                "type": "Control",
                "scope": "#/properties/password",
                "options": {
                    "type": "password",
                    "input_group_prepend_icon": "fa-solid fa-key"
                }
            },
            {
                "type": "Control",
                "scope": "#/properties/twoFactorToken",
                "options": {
                    "input_group_prepend_icon": "fa-solid fa-shield-halved"
                }
            }
        ]
    },
    "data": {
        "username": "",
        "password": ""
    }
}

Username or Email

Password

2FA Token (optional)

Enter your two-factor authentication code if enabled

Not all the input types and widgets from Derafu Form are supported by JSON Forms library.

{
    "type": "object",
    "properties": {
        "username": {
            "type": "string",
            "title": "Username or Email"
        },
        "password": {
            "type": "string",
            "title": "Password"
        },
        "twoFactorToken": {
            "type": "string",
            "title": "2FA Token (optional)",
            "description": "Enter your two-factor authentication code if enabled"
        }
    },
    "required": [
        "username",
        "password"
    ]
}

{
    "type": "VerticalLayout",
    "elements": [
        {
            "type": "Control",
            "scope": "#/properties/username",
            "options": {
                "input_group_prepend_icon": "fa-solid fa-user"
            }
        },
        {
            "type": "Control",
            "scope": "#/properties/password",
            "options": {
                "type": "password",
                "input_group_prepend_icon": "fa-solid fa-key"
            }
        },
        {
            "type": "Control",
            "scope": "#/properties/twoFactorToken",
            "options": {
                "input_group_prepend_icon": "fa-solid fa-shield-halved"
            }
        }
    ]
}

{
    "username": "",
    "password": ""
}