Back
Authentication 1
Copy component
Copy component
Upgrade to copy
Join to copy
Lifetime access $249
Authentication verification form for users to confirm who they are.
Home
Components
Components
Application UI
Authentication 1
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"ceab9754-5d32-9a20-8efe-7c71ff4ac760","type":"Block","tag":"div","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8dd"],"children":["d2c0f0f9-1828-e3a6-ff33-2f13c61f1464","13e62732-4254-0b41-b493-b8e2eb9201ab","b0721a86-64ec-c562-0dad-f221c08c56a6","9aa4b80b-dde4-e230-da22-bd4ddae3df5a"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d2c0f0f9-1828-e3a6-ff33-2f13c61f1464","type":"Heading","tag":"h3","classes":["1ec40e22-4ee0-71ce-9240-1b3b61e1cf0d"],"children":["3c1864d9-3f5e-ed63-aca3-1484bd088dfc"],"data":{"tag":"h3","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3c1864d9-3f5e-ed63-aca3-1484bd088dfc","text":true,"v":"Authentication required"},{"_id":"13e62732-4254-0b41-b493-b8e2eb9201ab","type":"Block","tag":"div","classes":[],"children":["0142513d-0462-6472-5f86-d8eafefbe3d8","3bb8d702-37a8-0d96-2a85-a8622efaf87e","68681a9f-60bb-fc09-1b38-b6ba426db83b"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0142513d-0462-6472-5f86-d8eafefbe3d8","text":true,"v":"Please enter the 6-digit authentication code we just sent to your email at "},{"_id":"3bb8d702-37a8-0d96-2a85-a8622efaf87e","type":"Link","tag":"a","classes":[],"children":["eaf4271b-9f33-7965-5f78-d69c78dcbde2"],"data":{"button":false,"block":"","link":{"mode":"email","email":"hi@piixelpieces.com","subject":"Authentication Problem!"},"attr":{"href":"#"}}},{"_id":"eaf4271b-9f33-7965-5f78-d69c78dcbde2","text":true,"v":"hi@piixelpieces.com"},{"_id":"68681a9f-60bb-fc09-1b38-b6ba426db83b","text":true,"v":"."},{"_id":"b0721a86-64ec-c562-0dad-f221c08c56a6","type":"FormWrapper","tag":"div","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8d8"],"children":["9005ca5c-0952-b5bc-c1f7-be31d83dcea5","d465a429-edf6-bfb8-d62a-9fec903ef87f","8c17f8bf-9adc-1679-7731-7c5e21f8b0f3"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"9005ca5c-0952-b5bc-c1f7-be31d83dcea5","type":"FormForm","tag":"form","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8d7"],"children":["4ea63d45-dd26-2cd3-c04c-bc6977b2e428","b21991e2-e329-5b7b-bdf5-d91f8a907f21"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Authentication 1 Form"},"attr":{"id":"wf-form-Authentication-1-Form","name":"wf-form-Authentication-1-Form","data-name":"Authentication 1 Form","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4ea63d45-dd26-2cd3-c04c-bc6977b2e428","type":"Block","tag":"div","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8d6"],"children":["2051a326-59a0-3b5f-047c-8af3e095fd34","bcd9a512-d401-ce35-15eb-6e1094cb42fa","98b92e5b-2986-30ef-d05b-5e7e81dd0624","93e0b581-252a-8c80-9fd0-1b12dde4ebd7","edd8da60-0eb0-0997-1b4a-c72a1869ed70","048e9ec0-6261-5f7b-1955-e41547d280e1"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2051a326-59a0-3b5f-047c-8af3e095fd34","type":"FormTextInput","tag":"input","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8db"],"children":[],"data":{"form":{"name":"Digit 1","type":"input","passwordPage":false},"attr":{"id":"Digit-1","name":"Digit-1","maxlength":256,"data-name":"Digit 1","placeholder":"","disabled":false,"type":"text","required":true,"autofocus":true},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"maxlength","value":"1"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"bcd9a512-d401-ce35-15eb-6e1094cb42fa","type":"FormTextInput","tag":"input","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8db"],"children":[],"data":{"form":{"name":"Digit 2","type":"input","passwordPage":false},"attr":{"id":"Digit-2","name":"Digit-2","maxlength":256,"data-name":"Digit 2","placeholder":"","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"maxlength","value":"1"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"98b92e5b-2986-30ef-d05b-5e7e81dd0624","type":"FormTextInput","tag":"input","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8db"],"children":[],"data":{"form":{"name":"Digit 3","type":"input","passwordPage":false},"attr":{"id":"Digit-3","name":"Digit-3","maxlength":256,"data-name":"Digit 3","placeholder":"","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"maxlength","value":"1"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"93e0b581-252a-8c80-9fd0-1b12dde4ebd7","type":"FormTextInput","tag":"input","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8db"],"children":[],"data":{"form":{"name":"Digit 4","type":"input","passwordPage":false},"attr":{"id":"Digit-4","name":"Digit-4","maxlength":256,"data-name":"Digit 4","placeholder":"","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"maxlength","value":"1"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"edd8da60-0eb0-0997-1b4a-c72a1869ed70","type":"FormTextInput","tag":"input","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8db"],"children":[],"data":{"form":{"name":"Digit 5","type":"input","passwordPage":false},"attr":{"id":"Digit-5","name":"Digit-5","maxlength":256,"data-name":"Digit 5","placeholder":"","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"maxlength","value":"1"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"048e9ec0-6261-5f7b-1955-e41547d280e1","type":"FormTextInput","tag":"input","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8db"],"children":[],"data":{"form":{"name":"Digit 6","type":"input","passwordPage":false},"attr":{"id":"Digit-6","name":"Digit-6","maxlength":256,"data-name":"Digit 6","placeholder":"","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"maxlength","value":"1"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b21991e2-e329-5b7b-bdf5-d91f8a907f21","type":"FormButton","tag":"input","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8d9","27e2c28d-84e7-9136-e293-5ae1ccc4f8de"],"children":[],"data":{"form":{"type":"button"},"attr":{"type":"submit","value":"Verify","data-wait":"Please wait...","id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d465a429-edf6-bfb8-d62a-9fec903ef87f","type":"FormSuccessMessage","tag":"div","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8da"],"children":["707e8247-b634-b069-6b3f-9450aae3295c"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"707e8247-b634-b069-6b3f-9450aae3295c","type":"Block","tag":"div","classes":[],"children":["62072d7a-7fb5-db9f-84e1-e1629c842fa3"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"62072d7a-7fb5-db9f-84e1-e1629c842fa3","text":true,"v":"You have been verified!"},{"_id":"8c17f8bf-9adc-1679-7731-7c5e21f8b0f3","type":"FormErrorMessage","tag":"div","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8dc"],"children":["fe2de865-bf6d-40c5-c7b1-c1b6511b06c2"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"fe2de865-bf6d-40c5-c7b1-c1b6511b06c2","type":"Block","tag":"div","classes":[],"children":["02a4b16d-45bb-9fee-7bab-2df95b4f9924"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"02a4b16d-45bb-9fee-7bab-2df95b4f9924","text":true,"v":"We couldn't verify you, please try again."},{"_id":"9aa4b80b-dde4-e230-da22-bd4ddae3df5a","type":"HtmlEmbed","tag":"div","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8d5"],"children":[],"v":"<script>\nvar container = document.getElementsByClassName(\"authentication-1_form-verification\")[0];\ncontainer.onkeyup = function(e) {\n var target = e.srcElement;\n var maxLength = parseInt(target.attributes[\"maxlength\"].value, 10);\n var myLength = target.value.length;\n if (myLength >= maxLength) {\n var next = target;\n while (next = next.nextElementSibling) {\n if (next == null)\n break;\n if (next.tagName.toLowerCase() == \"input\") {\n next.focus();\n break;\n }\n }\n }\n}\n</script>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<script>\nvar container = document.getElementsByClassName(\"authentication-1_form-verification\")[0];\ncontainer.onkeyup = function(e) {\n var target = e.srcElement;\n var maxLength = parseInt(target.attributes[\"maxlength\"].value, 10);\n var myLength = target.value.length;\n if (myLength >= maxLength) {\n var next = target;\n while (next = next.nextElementSibling) {\n if (next == null)\n break;\n if (next.tagName.toLowerCase() == \"input\") {\n next.focus();\n break;\n }\n }\n }\n}\n</script>","div":false,"script":true,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}}],"styles":[{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8db","fake":false,"type":"class","name":"authentication-1_input","namespace":"","comb":"","styleLess":"width: 3rem; height: 3rem; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: solid; border-top-width: 0.0625rem; border-top-color: #9eabc1; border-right-style: solid; border-right-width: 0.0625rem; border-right-color: #9eabc1; border-bottom-style: solid; border-bottom-width: 0.0625rem; border-bottom-color: #9eabc1; border-left-style: solid; border-left-width: 0.0625rem; border-left-color: #9eabc1; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; color: #0c60f5; font-size: 1.5rem; line-height: 1.2em; font-weight: 700; text-align: center;","variants":{"main_hover":{"styleLess":"border-top-color: #0c60f5; border-right-color: #0c60f5; border-bottom-color: #0c60f5; border-left-color: #0c60f5;"},"tiny":{"styleLess":"width: 2rem; height: 3rem; font-size: 1.25rem;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8da","fake":false,"type":"class","name":"authentication-1_success","namespace":"","comb":"","styleLess":"margin-top: 0px; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; background-color: #00c394; color: black; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8d5","fake":false,"type":"class","name":"CODE: Auto Next Input","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8de","fake":false,"type":"class","name":"is-form-submit","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8dd","fake":false,"type":"class","name":"authentication-1","namespace":"","comb":"","styleLess":"display: flex; width: 100%; max-width: 30rem; margin-right: auto; margin-left: auto; flex-direction: column; flex-wrap: nowrap; grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; text-align: center;","variants":{"small":{"styleLess":"width: 25rem;"},"tiny":{"styleLess":"width: 100%;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8d9","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"display: inline-block; padding-top: 1rem; padding-right: 1.5rem; padding-bottom: 1rem; padding-left: 1.5rem; border-top-style: solid; border-top-width: 2px; border-top-color: #0c60f5; border-right-style: solid; border-right-width: 2px; border-right-color: #0c60f5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0c60f5; border-left-style: solid; border-left-width: 2px; border-left-color: #0c60f5; background-color: #0c60f5; color: white; font-size: 1em; line-height: 1.125em; font-weight: 700; text-align: center; text-decoration: none; white-space: nowrap;","variants":{"main_hover":{"styleLess":"border-top-color: #0049ca; border-right-color: #0049ca; border-bottom-color: #0049ca; border-left-color: #0049ca; background-color: #0049ca;"}},"children":["27e2c28d-84e7-9136-e293-5ae1ccc4f8de","a6b7c620-6703-68cb-4e59-d2b3a9d1ab04","5eb34a0d-1d4c-bc49-56cf-7af9cc5e2dcf","3b4f261d-5209-659d-b43e-d49e7abe6e82"],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8dc","fake":false,"type":"class","name":"authentication-1_error","namespace":"","comb":"","styleLess":"margin-top: 0.5rem; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; background-color: #d91b5f; color: white; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"1ec40e22-4ee0-71ce-9240-1b3b61e1cf0d","fake":false,"type":"class","name":"authentication-1_heading","namespace":"","comb":"","styleLess":"margin-top: 0px; margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8d7","fake":false,"type":"class","name":"authentication-1_form_form","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8d8","fake":false,"type":"class","name":"authentication-1_form","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8d6","fake":false,"type":"class","name":"authentication-1_form-verification","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 2.5rem; justify-content: center; align-items: center; grid-column-gap: 1rem; grid-row-gap: 1rem;","variants":{"tiny":{"styleLess":"justify-content: space-between; align-items: center; grid-column-gap: 0.25rem; grid-row-gap: 0.25rem;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from