kwikid-components-react
Version:
KwikID's Component Library in React
102 lines (101 loc) • 2.46 kB
JSON
{
"title": "Login",
"key": "LOGIN_FORM",
"fields": [
{
"type": "title",
"label": "Login to Your Account",
"key": "login_title"
},
{
"type": "html",
"key": "login_description",
"html": "<div style='margin-bottom: 20px; color: #666;'>Please enter your credentials to access the identity verification platform.</div>"
},
{
"label": "Email Address",
"type": "text",
"key": "email",
"disabled": false,
"validators": {
"required": true,
"pattern": {
"key": "IS_EMAIL"
}
},
"properties": {
"placeholder": "Enter your email address",
"readOnly": false
}
},
{
"label": "Password",
"type": "password",
"key": "password",
"disabled": false,
"validators": {
"required": true,
"minLength": 8
},
"properties": {
"placeholder": "Enter your password",
"readOnly": false,
"hintContent": "Password must be at least 8 characters long"
}
},
{
"label": "Remember me",
"type": "checkbox",
"key": "rememberMe",
"disabled": false,
"validators": {
"required": false
},
"properties": {
"readOnly": false
}
},
{
"type": "link",
"label": "Forgot Password?",
"key": "forgot_password_link",
"properties": {
"href": "#",
"target": "_self"
}
},
{
"type": "button",
"label": "Log In",
"key": "login_button",
"properties": {
"variant": "primary",
"size": "medium",
"action": "submit"
}
},
{
"type": "html",
"key": "login_alternative",
"html": "<div style='margin-top: 20px; text-align: center;'><p>Don't have an account? <a href='#' style='color: #0077ff; text-decoration: none;'>Sign up</a></p></div>"
},
{
"type": "html",
"key": "secure_login_info",
"html": "<div style='margin-top: 20px; text-align: center; font-size: 12px; color: #999;'><p>🔒 Your connection is secure</p></div>"
}
],
"layout": {
"type": "vertical",
"styles": {
"container": {
"maxWidth": "400px",
"margin": "0 auto",
"padding": "30px",
"backgroundColor": "#ffffff",
"borderRadius": "8px",
"boxShadow": "0 4px 6px rgba(0, 0, 0, 0.1)"
}
}
}
}