Fix: change password page

- Use `ftd.string-field`
- Rename `set-password` -> `action`. Easier to read and write and move
  around.

actions/user/set-password.ftd

@@ -1,11 +1,13 @@
--- optional string $new-password-error:
--- optional string $new-password2-error:
+-- ftd.string-field $new-password: new-password
+-- ftd.string-field $new-password2: new-password2
 
--- void submit-values(password, password2, code):
-string password:
-string password2:
-string code:
+-- void submit-values(new_password, new_password2, email, code, spr):
+ftd.string-field new_password:
+ftd.string-field new_password2:
+ftd.string-field email:
+ftd.string-field code:
+ftd.string-field spr:
 js: $assets.files.assets.functions.js
 
-callAlert("change password attempt: " + password + " " + password2)
-;; call submit with http options
+callAlert("ui: change password attempt")
+

pages/change-password.ftd

@@ -1,16 +1,14 @@
 -- import: ui.fifthtry.com/site-data
+-- import: ui.fifthtry.com/utils
 -- import: ui.fifthtry.com/actions/user/set-password
 -- import: fastn/processors as pr
 
--- string code: auth
-;; default values don't work here
-$processor$: pr.request-data
-
 -- component page:
+ftd.string-field email:
+ftd.string-field code:
+ftd.string-field spr:
 module site-data: site-data
-module set-password: set-password
-private string $new-password: *$ftd.empty
-private string $new-password2: *$ftd.empty
+module action: set-password
 
 -- ds.column:
 
@@ -53,20 +51,21 @@ private string $new-password2: *$ftd.empty
 
 						-- ftd.text-input:
 						placeholder: Enter new password
-						type: text
-						$on-input$: $ftd.set-string($a = $page.new-password, v = $VALUE)
+						type: password
+						$on-input$: $ftd.set-string($a = $page.action.new-password.value, v = $VALUE)
+						$on-input$: $utils.set-null($var = $page.action.new-password.error)
 						width: fill-container
 						height.fixed.px: 40
 						border-radius.px: 8
 						background.solid: transparent
 						border-width.px: 1
 						border-color: $inherited.colors.border
-						border-color if { page.set-password.new-password-error != NULL }: $inherited.colors.error.border
+						border-color if { page.action.new-password.error != NULL }: $inherited.colors.error.border
 						padding.px: 8
 						color: $inherited.colors.text-strong
 
-						-- ds.copy-small: $page.set-password.new-password-error
-						if: { page.set-password.new-password-error != NULL }
+						-- ds.copy-small: $page.action.new-password.error
+						if: { page.action.new-password.error != NULL }
 						color: $ds.colors.error.text
 
 					-- end: ds.column
@@ -79,26 +78,27 @@ private string $new-password2: *$ftd.empty
 
 						-- ftd.text-input:
 						placeholder: Re-enter new password
-						type: text
-						$on-input$: $ftd.set-string($a = $page.new-password2, v = $VALUE)
+						type: password
+						$on-input$: $ftd.set-string($a = $page.action.new-password2.value, v = $VALUE)
+						$on-input$: $utils.set-null($var = $page.action.new-password2.error)
 						width: fill-container
 						height.fixed.px: 40
 						border-radius.px: 8
 						background.solid: transparent
 						border-width.px: 1
 						border-color: $inherited.colors.border
-						border-color if { page.set-password.new-password2-error != NULL }: $inherited.colors.error.border
+						border-color if { page.action.new-password2.error != NULL }: $inherited.colors.error.border
 						padding.px: 8
 						color: $inherited.colors.text-strong
 
-						-- ds.copy-small: $page.set-password.new-password2-error
-						if: { page.set-password.new-password2-error != NULL }
+						-- ds.copy-small: $page.action.new-password2.error
+						if: { page.action.new-password2.error != NULL }
 						color: $ds.colors.error.text
 
 					-- end: ds.column
 
 					-- ds.primary-button: Change Password
-					$on-click$: $page.set-password.submit-values(password = $page.new-password, password2 = $page.new-password2, code = $code)
+					$on-click$: $page.action.submit-values(new_password = $page.action.new-password, new_password2 = $page.action.new-password2, code = $page.code, email = $page.email, spr = $page.spr)
 					width: full
 					radius: curved
 
@@ -140,20 +140,21 @@ private string $new-password2: *$ftd.empty
 
 					-- ftd.text-input:
 					placeholder: Enter new password
-					type: text
-					$on-input$: $ftd.set-string($a = $page.new-password, v = $VALUE)
+					type: password
+					$on-input$: $ftd.set-string($a = $page.action.new-password.value, v = $VALUE)
+                    $on-input$: $utils.set-null($var = $page.action.new-password.error)
 					width: fill-container
 					height.fixed.px: 40
 					border-radius.px: 8
 					background.solid: transparent
 					border-width.px: 1
 					border-color: $inherited.colors.border
-					border-color if { page.set-password.new-password-error != NULL }: $inherited.colors.error.border
+					border-color if { page.action.new-password.error != NULL }: $inherited.colors.error.border
 					padding.px: 8
 					color: $inherited.colors.text-strong
 
-					-- ds.copy-small: $page.set-password.new-password-error
-					if: { page.set-password.new-password-error != NULL }
+					-- ds.copy-small: $page.action.new-password.error
+					if: { page.action.new-password.error != NULL }
 					color: $ds.colors.error.text
 
 				-- end: ds.column
@@ -166,27 +167,28 @@ private string $new-password2: *$ftd.empty
 
 					-- ftd.text-input:
 					placeholder: Re-enter new password
-					type: text
-					$on-input$: $ftd.set-string($a = $page.new-password2, v = $VALUE)
+					type: password
+					$on-input$: $ftd.set-string($a = $page.action.new-password2.value, v = $VALUE)
+                    $on-input$: $utils.set-null($var = $page.action.new-password2.error)
 					width: fill-container
 					height.fixed.px: 40
 					border-radius.px: 8
 					background.solid: transparent
 					border-width.px: 1
 					border-color: $inherited.colors.border
-					border-color if { page.set-password.new-password2-error != NULL }: $inherited.colors.error.border
+					border-color if { page.action.new-password2.error != NULL }: $inherited.colors.error.border
 					padding.px: 8
 					color: $inherited.colors.text-strong
 
-					-- ds.copy-small: $page.set-password.new-password2-error
-					if: { page.set-password.new-password2-error != NULL }
+					-- ds.copy-small: $page.action.new-password2.error
+					if: { page.action.new-password2.error != NULL }
 					color: $ds.colors.error.text
 
 
 				-- end: ds.column
 
 				-- ds.primary-button: Change Password
-				$on-click$: $page.set-password.submit-values(password = $page.new-password, password2 = $page.new-password2, code = $code)
+                $on-click$: $page.action.submit-values(new_password = $page.action.new-password, new_password2 = $page.action.new-password2, code = $page.code, email = $page.email, spr = $page.spr)
 				width: full
 				radius: curved
 

scenarios/change-password.ftd

@@ -4,3 +4,6 @@
 
 -- change-password.page:
 site-data: scenario-site
+email: [email protected]
+code: testcode
+spr: /set-password/