Master dev anderson

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## PiMonitor Client SDK Core
 
+- [[PM127]](https://github.com/picortex/bitframe/issues/127) Re authored the SignUpService to accommodate the new designs
 - [[PM103]](https://github.com/picortex/bitframe/issues/103) Moved SignUpTest to commonMain
 
 ## PiMonitor Client Browser Web
@@ -26,6 +27,10 @@
 - [[BF92]](https://github.com/picortex/bitframe/issues/92) Fixed sign in validation bug for empty sign in credentials
 - [[BF93]](https://github.com/picortex/bitframe/issues/93) Attach Universal testing to cover future bugs
 
+## Bitframe Presenters
+
+- [[BF133]](https://github.com/picortex/bitframe/issues/133) Made the FormFeedback States easily reusable. Doesn't have to be consumed directly from the SDK
+
 ## Bitframe Test Containers
 
 - [[BF96]](https://github.com/picortex/bitframe/issues/96) Make PiMonitor bitframe containers multiplatform
@@ -38,11 +43,13 @@
 
 - [[BF100]](https://github.com/picortex/bitframe/issues/100) Cache gradle for faster CI builds
 
-## Dependencies
+## Libs/Tools Dependency Changes
 
-- Bumped kotlin to 1.5.31 from 1.5.30
-- Bumped ksp to 1.5.31-1.0.0 from 1.5.30-1.0.0
-- Bumped asoft foundation from 1.4.0 to 1.4.11
+| Lib/Tool | Prev version | Current version|
+|----------|--------------|----------------|
+| Kotlin   | 1.5.30       | 1.5.31         |
+| KSP      | 1.5.30-1.0.0 | 1.5.31-1.0.0   |
+| asoft foundation | 1.4.0| 1.4.11         |
 
 # 0.0.28
 

bitframe-authentication/services/ktor/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
 
         val jvmTest by getting {
             dependencies {
-                implementation(project(":pi-monitor-test-containers"))
+                implementation(project(":pi-monitor-test-testing"))
             }
         }
 

bitframe-client/sdks/ktor/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
 
         val jvmTest by getting {
             dependencies {
-                implementation(project(":pi-monitor-test-containers"))
+                implementation(project(":pi-monitor-test-testing"))
                 implementation(asoft("expect-coroutines", vers.asoft.expect))
             }
         }

bitframe-presenters/src/commonMain/kotlin/bitframe/presenters/feedbacks/FormFeedback.kt

@@ -5,12 +5,18 @@ package bitframe.presenters.feedbacks
 import kotlin.js.JsExport
 
 sealed class FormFeedback(open val message: String) {
-    data class Loading(override val message: String) : FormFeedback(message)
+    data class Loading(override val message: String) : FormFeedback(message) {
+        val loading = true
+    }
 
     data class Failure(
         val cause: Throwable,
         override val message: String = cause.message ?: "Unknown failure"
-    ) : FormFeedback(message)
+    ) : FormFeedback(message) {
+        val failure = true
+    }
 
-    data class Success(override val message: String) : FormFeedback(message)
+    data class Success(override val message: String) : FormFeedback(message) {
+        val success = true
+    }
 }

bitframe-presenters/src/commonMain/kotlin/bitframe/presenters/fields/DropDownInputField.kt

@@ -0,0 +1,19 @@
+@file:JsExport
+
+package bitframe.presenters.fields
+
+import kotlin.js.JsExport
+import kotlin.js.JsName
+
+data class DropDownInputField(
+    val options: List<Option>
+) {
+    @JsName("from")
+    constructor(vararg options: Option) : this(options.toList())
+
+    val items get() = options.toTypedArray()
+
+    data class Option(
+        val label: String, val value: String = label, val selected: Boolean = false
+    )
+}

pi-monitor/pi-monitor-client/browser/react/build.gradle.kts

@@ -5,6 +5,7 @@ import com.bmuschko.gradle.docker.tasks.image.DockerBuildImage
 import com.bmuschko.gradle.docker.tasks.image.Dockerfile
 import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
 import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin
+import org.jetbrains.kotlin.gradle.targets.js.yarn.YarnRootExtension
 
 plugins {
     kotlin("multiplatform")
@@ -18,7 +19,10 @@ applikation {
 }
 
 rootProject.plugins.withType(NodeJsRootPlugin::class.java) {
-    rootProject.the<NodeJsRootExtension>().versions.webpackDevServer.version = "4.1.0"
+    rootProject.the<NodeJsRootExtension>().versions.apply {
+        webpackDevServer.version = "4.1.0"
+        webpackCli.version = "4.9.0"
+    }
 }
 
 kotlin {

pi-monitor/pi-monitor-client/browser/react/src/jsMain/kotlin/pimonitor/authentication/signup/SignUp.kt

@@ -1,22 +1,27 @@
 package pimonitor.authentication.signup
 
-import kotlinx.css.minHeight
-import kotlinx.css.vh
+import bitframe.components.TextInput
+import bitframe.presenters.feedbacks.FormFeedback
+import kotlinx.css.*
+import kotlinx.extensions.onDesktop
+import kotlinx.extensions.onMobile
+import kotlinx.extensions.text
+import kotlinx.html.InputType
 import pimonitor.PiMonitorService
-import pimonitor.authentication.signup.SignUpState.*
 import pimonitor.authentication.signup.exports.SignUpScope
-import pimonitor.authentication.signup.SignUpIntent as Intent
+import pimonitor.monitors.SignUpParams
 import react.Props
 import react.RBuilder
+import react.dom.p
 import react.fc
 import react.router.dom.useHistory
 import react.router.dom.withRouter
-import reakt.ErrorBox
-import reakt.Grid
-import reakt.LoadingBox
-import reakt.SuccessBox
+import reakt.*
 import styled.css
+import styled.styledH2
+import theme.clazz
 import useViewModelState
+import pimonitor.authentication.signup.SignUpIntent as Intent
 
 private external class SignUpProps : Props {
     var scope: SignUpScope
@@ -27,25 +32,78 @@ private val SignUp = fc<SignUpProps> { props ->
     val viewModel = scope.viewModel
     val state = useViewModelState(viewModel)
     val history = useHistory()
-    Grid {
-        css { minHeight = 100.vh }
-
-        when (state) {
-            is Loading -> LoadingBox(state.message)
-            is Failure -> ErrorBox(state.cause)
-            is Success -> SuccessBox(state.message)
-            is OrganisationForm -> OrganisationForm(
-                fields = state.fields,
-                onNext = { viewModel.post(Intent.SubmitBusinessForm(it)) }
-            )
-            is IndividualForm -> IndividualForm(
-                fields = state.fields,
-                onNext = { viewModel.post(Intent.SubmitIndividualForm(it)) }
-            )
-            SelectRegistrationType -> SelectRegistrationType(
-                onIndividualClicked = { scope.registerAsIndividual() },
-                onOrganisationClicked = { scope.registerAsOrganisation() }
+    FlexBox {
+        css {
+            minHeight = 100.vh
+            centerContent()
+            onMobile { padding(horizontal = 1.em) }
+            onDesktop { padding(horizontal = 20.pct) }
+        }
+
+        Form { theme ->
+            styledH2 {
+                css { +theme.text.h4.clazz }
+                +state.title
+            }
+
+            DropDown(
+                name = "registrationType",
+                value = state.select.options.first { it.selected }.value,
+                options = state.select.options.map { it.value },
+                onChange = {
+                    when (it) {
+                        "Register as Business" -> scope.registerAsBusiness()
+                        "Register as Individual" -> scope.registerAsIndividual()
+                    }
+                }
             )
+
+            when (state) {
+                is SignUpState.IndividualForm -> {
+                    val fields = state.fields
+                    TextInput("name", fields.name)
+
+                    TextInput("email", fields.email, InputType.email)
+
+                    TextInput("password", fields.password, InputType.password)
+                }
+                is SignUpState.BusinessForm -> {
+                    val fields = state.fields
+                    TextInput("businessName", fields.businessName)
+
+                    TextInput("individualName", fields.individualName)
+
+                    TextInput("individualEmail", fields.individualEmail, InputType.email)
+
+                    TextInput("password", fields.password, InputType.password)
+                }
+            }
+
+            when (val status = state.status) {
+                is FormFeedback.Loading -> p { +status.message }
+                is FormFeedback.Failure -> p { +status.message }
+                is FormFeedback.Success -> p { +status.message }
+                null -> ContainedButton(state.submitButton.text)
+            }
+
+        } onSubmit {
+            when (state) {
+                is SignUpState.IndividualForm -> {
+                    val name by text()
+                    val email by text()
+                    val password by text()
+                    val params = SignUpParams.Individual(name, email, password)
+                    viewModel.post(Intent.Submit.IndividualForm(params))
+                }
+                is SignUpState.BusinessForm -> {
+                    val businessName by text()
+                    val individualName by text()
+                    val individualEmail by text()
+                    val password by text()
+                    val params = SignUpParams.Business(businessName, individualName, individualEmail, password)
+                    viewModel.post(Intent.Submit.BusinessForm(params))
+                }
+            }
         }
     }
 }

pi-monitor/pi-monitor-client/browser/react/src/jsMain/kotlin/pimonitor/authentication/signup/IndividualForm.kt → pi-monitor/pi-monitor-client/browser/react/src/jsMain/kotlin/pimonitor/authentication/signup/legacy/IndividualForm.kt

@@ -1,4 +1,4 @@
-package pimonitor.authentication.signup
+package pimonitor.authentication.signup.legacy
 
 import bitframe.components.*
 import kotlinx.css.em
@@ -8,6 +8,8 @@ import kotlinx.extensions.onDesktop
 import kotlinx.extensions.onMobile
 import kotlinx.extensions.text
 import kotlinx.html.InputType
+import pimonitor.authentication.signup.IndividualRegistrationParams
+import pimonitor.authentication.signup.legacy.IndividualFormFields
 import react.RBuilder
 import reakt.*
 import styled.css

pi-monitor/pi-monitor-client/browser/react/src/jsMain/kotlin/pimonitor/authentication/signup/OrganisationForm.kt → pi-monitor/pi-monitor-client/browser/react/src/jsMain/kotlin/pimonitor/authentication/signup/legacy/OrganisationForm.kt

@@ -1,4 +1,4 @@
-package pimonitor.authentication.signup
+package pimonitor.authentication.signup.legacy
 
 import bitframe.components.TextInput
 import kotlinx.css.em
@@ -8,6 +8,8 @@ import kotlinx.extensions.onDesktop
 import kotlinx.extensions.onMobile
 import kotlinx.extensions.text
 import kotlinx.html.InputType
+import pimonitor.authentication.signup.MonitorBusinessParams
+import pimonitor.authentication.signup.legacy.OrganisationFormFields
 import react.RBuilder
 import reakt.*
 import styled.css