Loading Component...

Loading

More Components

View All
Part of

Show/Hide Password Component

Oops! Something went wrong while submitting the form.
Show/Hide Password Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc5","type":"Block","tag":"div","classes":["e2324e2a-b829-05ca-4a67-0076f02ca027"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfc6","07eb2d08-82d1-e73c-78d7-a4842dcecfc8","07eb2d08-82d1-e73c-78d7-a4842dcecfc9","8159c4b0-ceef-f21a-559b-028191d372ee"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc6","type":"FormBlockLabel","tag":"label","classes":[],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfc7"],"data":{"attr":{"id":"","for":"Password-4"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"label"},"displayName":""}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc7","text":true,"v":"Password"},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc8","type":"FormTextInput","tag":"input","classes":[],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Password-3","data-name":"Password 3","placeholder":"","type":"password","id":"Password-3","disabled":false,"required":true},"xattr":[{"name":"data-ms-member","value":"password"},{"name":"data-show","value":"true"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"name":"Password 3","type":"input","passwordPage":false},"displayName":""}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc9","type":"TabsWrapper","tag":"div","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135cf"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfca","07eb2d08-82d1-e73c-78d7-a4842dcecfd3"],"data":{"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tabs":{"type":"wrapper","current":"Show","easing":"ease","fadeIn":300,"fadeOut":100},"displayName":""}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfca","type":"TabsMenu","tag":"div","classes":[],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfcb","07eb2d08-82d1-e73c-78d7-a4842dcecfcf"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-transform","value":"true"}],"displayName":"","attr":{"id":"transformButton"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"menu"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfcb","type":"TabsLink","tag":"a","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135d0"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfcc","07eb2d08-82d1-e73c-78d7-a4842dcecfcd"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Show"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfcc","type":"HtmlEmbed","tag":"div","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135d1"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewbox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"16px\" viewBox=\"0 0 24 24\" width=\"16px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfcd","type":"Block","tag":"div","classes":[],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfce"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfce","text":true,"v":"Hide"},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfcf","type":"TabsLink","tag":"a","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135d0"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfd0","07eb2d08-82d1-e73c-78d7-a4842dcecfd1"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Hide"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd0","type":"HtmlEmbed","tag":"div","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135d1"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"16px\" viewbox=\"0 0 24 24\" width=\"16px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"16px\" viewBox=\"0 0 24 24\" width=\"16px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd1","type":"Block","tag":"div","classes":[],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfd2"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd2","text":true,"v":"Show"},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd3","type":"TabsContent","tag":"div","classes":["1973b4f7-c1d1-3bdb-4eda-4686353dd483"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfd4","07eb2d08-82d1-e73c-78d7-a4842dcecfd5"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"content"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd4","type":"TabsPane","tag":"div","classes":[],"children":[],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"","data-w-tab":"Show"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd5","type":"TabsPane","tag":"div","classes":[],"children":[],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"","data-w-tab":"Hide"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"8159c4b0-ceef-f21a-559b-028191d372ee","type":"HtmlEmbed","tag":"div","classes":["09a3d99e-ca57-5ee5-a9cc-55689975d369"],"children":[],"v":"<script>\n//attach a click handler to the button to make it transform when clicked, via our transform() function below. Add right before your closing body tag.\n document.querySelector(\"[data-transform]\").addEventListener(\"click\", transform);\n //flag of whether or not it is a password field or text field\n var isPassword = true;\n //this function will toggle the input between being a password or a text input\n function transform() {\n //copy the element itself, its html source, and value text to a variable\n var myInput = document.querySelector(\"[data-show]\");\n var oldHtml = myInput.outerHTML;\n var text = myInput.value;\n if (isPassword)\n {\n //replace \"password\" with \"text\" in the html if it is a password field\n var newHtml = oldHtml.replace(/password/g, \"text\");\n }\n else\n {\n //replace \"text\" with \"password\" if it is a text field\n newHtml = oldHtml.replace(/text/g, \"password\");\n }\n //update the html\n myInput.outerHTML = newHtml;\n //restore the text value\n myInput = document.querySelector(\"[data-show]\");\n myInput.value = text;\n //toggle the isPassword flag\n isPassword = !isPassword;\n }\n</script>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<script>\n//attach a click handler to the button to make it transform when clicked, via our transform() function below. Add right before your closing body tag.\n document.querySelector(\"[data-transform]\").addEventListener(\"click\", transform);\n //flag of whether or not it is a password field or text field\n var isPassword = true;\n //this function will toggle the input between being a password or a text input\n function transform() {\n //copy the element itself, its html source, and value text to a variable\n var myInput = document.querySelector(\"[data-show]\");\n var oldHtml = myInput.outerHTML;\n var text = myInput.value;\n if (isPassword)\n {\n //replace \"password\" with \"text\" in the html if it is a password field\n var newHtml = oldHtml.replace(/password/g, \"text\");\n }\n else\n {\n //replace \"text\" with \"password\" if it is a text field\n newHtml = oldHtml.replace(/text/g, \"password\");\n }\n //update the html\n myInput.outerHTML = newHtml;\n //restore the text value\n myInput = document.querySelector(\"[data-show]\");\n myInput.value = text;\n //toggle the isPassword flag\n isPassword = !isPassword;\n }\n</script>","div":false,"iframe":false,"script":true,"compilable":false},"type":"html"}}}],"styles":[{"_id":"e2324e2a-b829-05ca-4a67-0076f02ca027","fake":false,"type":"class","name":"Relative","namespace":"","comb":"","styleLess":"position: relative;","variants":{},"children":[],"selector":null},{"_id":"2a9baea0-8d42-5c72-a778-fb6ab53135cf","fake":false,"type":"class","name":"Show Password Wrap","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: 7px; right: 0px; bottom: auto; z-index: 4;","variants":{},"children":[],"selector":null},{"_id":"2a9baea0-8d42-5c72-a778-fb6ab53135d0","fake":false,"type":"class","name":"Show Password","namespace":"","comb":"","styleLess":"bottom: 5px; display: flex; padding-top: 0px; padding-right: 7px; padding-bottom: 0px; padding-left: 6px; background-color: white; font-size: 13.5px;","variants":{"main_current":{"styleLess":"display: none;"}},"children":[],"selector":null},{"_id":"2a9baea0-8d42-5c72-a778-fb6ab53135d1","fake":false,"type":"class","name":"Eye SVG","namespace":"","comb":"","styleLess":"display: flex; width: 16px; margin-right: 4px; justify-content: center; align-items: center;","variants":{},"children":[],"selector":null},{"_id":"1973b4f7-c1d1-3bdb-4eda-4686353dd483","fake":false,"type":"class","name":"hide","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"selector":null},{"_id":"09a3d99e-ca57-5ee5-a9cc-55689975d369","fake":false,"type":"class","name":"🌟 Show/hide Code","namespace":"","comb":"","styleLess":"max-width: 300px; margin-right: auto; margin-left: auto;","variants":{},"children":[],"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc5","type":"Block","tag":"div","classes":["e2324e2a-b829-05ca-4a67-0076f02ca027"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfc6","07eb2d08-82d1-e73c-78d7-a4842dcecfc8","07eb2d08-82d1-e73c-78d7-a4842dcecfc9","8159c4b0-ceef-f21a-559b-028191d372ee"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc6","type":"FormBlockLabel","tag":"label","classes":[],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfc7"],"data":{"attr":{"id":"","for":"Password-4"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"label"},"displayName":""}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc7","text":true,"v":"Password"},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc8","type":"FormTextInput","tag":"input","classes":[],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Password-3","data-name":"Password 3","placeholder":"","type":"password","id":"Password-3","disabled":false,"required":true},"xattr":[{"name":"data-ms-member","value":"password"},{"name":"data-show","value":"true"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"name":"Password 3","type":"input","passwordPage":false},"displayName":""}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfc9","type":"TabsWrapper","tag":"div","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135cf"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfca","07eb2d08-82d1-e73c-78d7-a4842dcecfd3"],"data":{"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tabs":{"type":"wrapper","current":"Show","easing":"ease","fadeIn":300,"fadeOut":100},"displayName":""}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfca","type":"TabsMenu","tag":"div","classes":[],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfcb","07eb2d08-82d1-e73c-78d7-a4842dcecfcf"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-transform","value":"true"}],"displayName":"","attr":{"id":"transformButton"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"menu"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfcb","type":"TabsLink","tag":"a","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135d0"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfcc","07eb2d08-82d1-e73c-78d7-a4842dcecfcd"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Show"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfcc","type":"HtmlEmbed","tag":"div","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135d1"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewbox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"16px\" viewBox=\"0 0 24 24\" width=\"16px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfcd","type":"Block","tag":"div","classes":[],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfce"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfce","text":true,"v":"Hide"},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfcf","type":"TabsLink","tag":"a","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135d0"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfd0","07eb2d08-82d1-e73c-78d7-a4842dcecfd1"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Hide"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd0","type":"HtmlEmbed","tag":"div","classes":["2a9baea0-8d42-5c72-a778-fb6ab53135d1"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"16px\" viewbox=\"0 0 24 24\" width=\"16px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"16px\" viewBox=\"0 0 24 24\" width=\"16px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd1","type":"Block","tag":"div","classes":[],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfd2"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd2","text":true,"v":"Show"},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd3","type":"TabsContent","tag":"div","classes":["1973b4f7-c1d1-3bdb-4eda-4686353dd483"],"children":["07eb2d08-82d1-e73c-78d7-a4842dcecfd4","07eb2d08-82d1-e73c-78d7-a4842dcecfd5"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"content"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd4","type":"TabsPane","tag":"div","classes":[],"children":[],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"","data-w-tab":"Show"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"07eb2d08-82d1-e73c-78d7-a4842dcecfd5","type":"TabsPane","tag":"div","classes":[],"children":[],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"","data-w-tab":"Hide"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"8159c4b0-ceef-f21a-559b-028191d372ee","type":"HtmlEmbed","tag":"div","classes":["09a3d99e-ca57-5ee5-a9cc-55689975d369"],"children":[],"v":"<script>\n//attach a click handler to the button to make it transform when clicked, via our transform() function below. Add right before your closing body tag.\n document.querySelector(\"[data-transform]\").addEventListener(\"click\", transform);\n //flag of whether or not it is a password field or text field\n var isPassword = true;\n //this function will toggle the input between being a password or a text input\n function transform() {\n //copy the element itself, its html source, and value text to a variable\n var myInput = document.querySelector(\"[data-show]\");\n var oldHtml = myInput.outerHTML;\n var text = myInput.value;\n if (isPassword)\n {\n //replace \"password\" with \"text\" in the html if it is a password field\n var newHtml = oldHtml.replace(/password/g, \"text\");\n }\n else\n {\n //replace \"text\" with \"password\" if it is a text field\n newHtml = oldHtml.replace(/text/g, \"password\");\n }\n //update the html\n myInput.outerHTML = newHtml;\n //restore the text value\n myInput = document.querySelector(\"[data-show]\");\n myInput.value = text;\n //toggle the isPassword flag\n isPassword = !isPassword;\n }\n</script>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<script>\n//attach a click handler to the button to make it transform when clicked, via our transform() function below. Add right before your closing body tag.\n document.querySelector(\"[data-transform]\").addEventListener(\"click\", transform);\n //flag of whether or not it is a password field or text field\n var isPassword = true;\n //this function will toggle the input between being a password or a text input\n function transform() {\n //copy the element itself, its html source, and value text to a variable\n var myInput = document.querySelector(\"[data-show]\");\n var oldHtml = myInput.outerHTML;\n var text = myInput.value;\n if (isPassword)\n {\n //replace \"password\" with \"text\" in the html if it is a password field\n var newHtml = oldHtml.replace(/password/g, \"text\");\n }\n else\n {\n //replace \"text\" with \"password\" if it is a text field\n newHtml = oldHtml.replace(/text/g, \"password\");\n }\n //update the html\n myInput.outerHTML = newHtml;\n //restore the text value\n myInput = document.querySelector(\"[data-show]\");\n myInput.value = text;\n //toggle the isPassword flag\n isPassword = !isPassword;\n }\n</script>","div":false,"iframe":false,"script":true,"compilable":false},"type":"html"}}}],"styles":[{"_id":"e2324e2a-b829-05ca-4a67-0076f02ca027","fake":false,"type":"class","name":"Relative","namespace":"","comb":"","styleLess":"position: relative;","variants":{},"children":[],"selector":null},{"_id":"2a9baea0-8d42-5c72-a778-fb6ab53135cf","fake":false,"type":"class","name":"Show Password Wrap","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: 7px; right: 0px; bottom: auto; z-index: 4;","variants":{},"children":[],"selector":null},{"_id":"2a9baea0-8d42-5c72-a778-fb6ab53135d0","fake":false,"type":"class","name":"Show Password","namespace":"","comb":"","styleLess":"bottom: 5px; display: flex; padding-top: 0px; padding-right: 7px; padding-bottom: 0px; padding-left: 6px; background-color: white; font-size: 13.5px;","variants":{"main_current":{"styleLess":"display: none;"}},"children":[],"selector":null},{"_id":"2a9baea0-8d42-5c72-a778-fb6ab53135d1","fake":false,"type":"class","name":"Eye SVG","namespace":"","comb":"","styleLess":"display: flex; width: 16px; margin-right: 4px; justify-content: center; align-items: center;","variants":{},"children":[],"selector":null},{"_id":"1973b4f7-c1d1-3bdb-4eda-4686353dd483","fake":false,"type":"class","name":"hide","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"selector":null},{"_id":"09a3d99e-ca57-5ee5-a9cc-55689975d369","fake":false,"type":"class","name":"🌟 Show/hide Code","namespace":"","comb":"","styleLess":"max-width: 300px; margin-right: auto; margin-left: auto;","variants":{},"children":[],"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

Similar Components

View All

More Components

View All
No items found.