fix: input field for password visiblity (#283)

* fix: input field for password visiblity

* chore: add scripts to layouts

* fix: bump @ory/elements v0.1.0-beta.1

package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ory/client": "1.1.50",
-    "@ory/elements-markup": "0.0.1-beta.13",
+    "@ory/elements-markup": "0.1.0-beta.1",
     "@ory/integrations": "1.1.4",
     "axios": "1.2.6",
     "body-parser": "1.20.2",

src/routes/login.ts

@@ -193,7 +193,7 @@ export const createLoginRoute: RouteCreator =
                 flow.oauth2_login_request.client?.client_id
               }`,
             }),
-            flow: flow as SelfServiceFlow,
+            flow: flow,
             flowType: "login",
             cardImage: logoUrl,
             additionalProps: {

src/routes/recovery.ts

@@ -52,7 +52,7 @@ export const createRecoveryRoute: RouteCreator =
         res.render("recovery", {
           card: UserAuthCard({
             title: "Recover your account",
-            flow: flow as SelfServiceFlow,
+            flow: flow,
             flowType: "recovery",
             cardImage: logoUrl,
             additionalProps: {

src/routes/verification.ts

@@ -60,7 +60,7 @@ export const createVerificationRoute: RouteCreator =
           res.render("verification", {
             card: UserAuthCard({
               title: "Verify your account",
-              flow: flow as SelfServiceFlow,
+              flow: flow,
               flowType: "verification",
               cardImage: logoUrl,
               additionalProps: {

views/consent.hbs

@@ -1,3 +1,5 @@
 <div id="consent">
   {{{card}}}
+
+  {{> scripts}}
 </div>

views/layouts/auth.hbs

@@ -9,7 +9,8 @@
         {{{body}}}
         {{> ory_branding}}
       </div>
-
+
+    {{> scripts }}
     </main>
   </body>
-</html>
+</html>

views/layouts/settings.hbs

@@ -14,6 +14,7 @@
           {{> ory_branding}}
         </div>
       </div>
+      {{> scripts }}
     </main>
   </body>
-</html>
+</html>

views/layouts/welcome.hbs

@@ -14,6 +14,7 @@
           {{> ory_branding}}
         </div>
       </div>
+      {{> scripts }}
     </main>
   </body>
-</html>
+</html>

views/login.hbs

@@ -3,11 +3,11 @@
 
   {{> ui_nodes nodes=nodes groups="webauthn" attributes="text/javascript" withoutDefaultGroup=true}}
 
-    <script type="text/javascript">
-    document.getElementsByName("webauthn_login_trigger").forEach((v) =>
-    { v.addEventListener("click", () => {
-    {{{webAuthnHandler}}}
-    }) })
+  <script type="text/javascript">
+    document.getElementsByName("webauthn_login_trigger").forEach((v) => { 
+      v.addEventListener("click", () => {
+        {{{webAuthnHandler}}}
+      }) 
+    })
   </script>
 </div>
-

views/partials/scripts.hbs

@@ -0,0 +1,3 @@
+{{! Scripts }}
+<script src="assets/passwordInput.js"></script>
+

views/partials/standard_headers.hbs

@@ -15,4 +15,4 @@
 <link type="text/css" rel="stylesheet" href="style.css" />
 <link type="text/css" rel="stylesheet" href="theme.css" />
 {{! Managed UI styling }}
-<link type="text/css" rel="stylesheet" href="main.css" />
+<link type="text/css" rel="stylesheet" href="main.css" />

views/recovery.hbs

@@ -1,3 +1,3 @@
 <div id='recovery'>
   {{{card}}}
-</div>
+</div>

views/registration.hbs

@@ -4,11 +4,11 @@
 
   {{> ui_nodes nodes=nodes groups="webauthn" attributes="text/javascript" withoutDefaultGroup=true}}
 
-    <script type="text/javascript">
-      document.getElementsByName("webauthn_register_trigger").forEach((v) =>
-      { v.addEventListener("click", () => {
-      {{{webAuthnHandler}}}
-      }) })
-    </script>
+  <script type="text/javascript">
+    document.getElementsByName("webauthn_register_trigger").forEach((v) => { 
+      v.addEventListener("click", () => {
+        {{{webAuthnHandler}}}
+      }) 
+    })
+  </script>
 </div>
-

views/settings.hbs

@@ -18,11 +18,12 @@
 
   {{> ui_nodes nodes=nodes groups="webauthn" attributes="text/javascript" withoutDefaultGroup=true}}
 
-    <script type="text/javascript">
-    document.getElementsByName("webauthn_register_trigger").forEach((v) =>
-    { v.addEventListener("click", () => {
-    {{{webAuthnHandler}}}
-    }) })
+  <script type="text/javascript">
+    document.getElementsByName("webauthn_register_trigger").forEach((v) => { 
+      v.addEventListener("click", () => {
+      {{{webAuthnHandler}}}
+      }) 
+    })
   </script>
 
-</div>
+</div>

views/verification.hbs

@@ -1,3 +1,3 @@
 <div id='verification'>
   {{{card}}}
-</div>
+</div>