fixed https://github.com/picortex/bitframe/runs/3833336115?check_suit…

…e_focus=true

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.legacy.SignUpState.*
 import pimonitor.authentication.signup.exports.SignUpScope
-import pimonitor.authentication.signup.legacy.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,7 @@ 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.*

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,7 @@ 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.*

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

@@ -1,4 +1,4 @@
-package pimonitor.authentication.signup
+package pimonitor.authentication.signup.legacy
 
 import color.invoke
 import kotlinx.css.*

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

@@ -0,0 +1,55 @@
+package pimonitor.authentication.signup.legacy
+
+import kotlinx.css.minHeight
+import kotlinx.css.vh
+import pimonitor.PiMonitorService
+import pimonitor.authentication.signup.legacy.SignUpState.*
+import pimonitor.authentication.signup.exports.SignUpScopeLegacy
+import pimonitor.authentication.signup.legacy.SignUpIntent as Intent
+import react.Props
+import react.RBuilder
+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 styled.css
+import useViewModelState
+
+private external class SignUpProps : Props {
+    var scope: SignUpScopeLegacy
+}
+
+private val SignUp = fc<SignUpProps> { props ->
+    val scope = props.scope
+    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() }
+            )
+        }
+    }
+}
+
+fun RBuilder.SignUpLegacy(service: PiMonitorService) = child(withRouter(SignUp)) {
+    attrs.scope = SignUpScopeLegacy(service.signUp)
+}

pi-monitor/pi-monitor-client/browser/react/src/jsMain/kotlin/pimonitor/index.kt

@@ -2,7 +2,6 @@ package pimonitor
 
 import applikation.konfig
 import bitframe.Bitframe
-import bitframe.service.config.ClientConfiguration
 import client
 import kotlinext.js.jso
 import kotlinx.browser.document
@@ -12,6 +11,7 @@ import logging.ConsoleAppender
 import logging.Logging
 import org.w3c.dom.HTMLDivElement
 import pimonitor.authentication.signup.SignUp
+import pimonitor.authentication.signup.legacy.SignUpLegacy
 import pimonitor.evaluation.business.BusinessContainer
 import reakt.setContent
 

pi-monitor/pi-monitor-client/browser/react/src/jvmTest/kotlin/acceptance/authentication/SignUp.kt

@@ -18,20 +18,11 @@ import kotlin.test.Test
 @TestInstance(TestInstance.Lifecycle.PER_CLASS)
 class SignUp : AcceptanceTest() {
 
-    @Test
-    fun should_start_with_the_selection_screen() = application.test {
-        val signUpScreen = openSignUpScreen()
-        expect(signUpScreen).toBeVisible()
-    }
-
     @Nested
-    @Ignore("Haven't implemented fully yet") // TODO
     inner class `Individual Registration` {
         // Given a Person with details
         private val person = IndividualRegistrationParams(
-            name = "John Doe",
-            email = "[email protected]",
-            password = "1234"
+            name = "John Doe", email = "[email protected]", password = "1234"
         )
 
         @Test
@@ -42,20 +33,16 @@ class SignUp : AcceptanceTest() {
         }
     }
 
-    @Ignore("Not yet covered") // TODO Implement organisation registration
     @Nested
     inner class `Organisational Registration` {
         // Given
         private val person = IndividualRegistrationParams(
-            name = "John Doe",
-            email = "[email protected]",
-            password = "1234"
+            name = "John Doe", email = "[email protected]", password = "1234"
         )
 
         // Given
         private val business = MonitorBusinessParams(
-            name = "John Doe Inc.",
-            email = "[email protected]"
+            name = "John Doe Inc.", email = "[email protected]"
         )
 
         @Test

pi-monitor/pi-monitor-client/sdks/core/src/jsMain/kotlin/pimonitor/authentication/signup/exports/Params.kt

@@ -2,11 +2,21 @@
 
 package pimonitor.authentication.signup.exports
 
-external interface OrganisationParams {
+@Deprecated("In favour of RegisterBusinessParams")
+external interface RegisterOrganisationParams {
     var name: String
     var email: String
 }
 
-external interface IndividualParams : OrganisationParams {
+external interface RegisterIndividualParams {
+    var name: String
+    var email: String
+    var password: String
+}
+
+external interface RegisterBusinessParams {
+    var businessName: String
+    var individualName: String
+    var individualEmail: String
     var password: String
 }

pi-monitor/pi-monitor-client/sdks/core/src/jsMain/kotlin/pimonitor/authentication/signup/exports/ParamsUtils.kt

@@ -2,6 +2,11 @@ package pimonitor.authentication.signup.exports
 
 import pimonitor.authentication.signup.IndividualRegistrationParams
 import pimonitor.authentication.signup.MonitorBusinessParams
+import pimonitor.monitors.SignUpParams
 
-fun IndividualParams.toIndividualRegistrationParams() = IndividualRegistrationParams(name, email, password)
-fun OrganisationParams.toMonitorBusinessParams() = MonitorBusinessParams(name, email)
+fun RegisterIndividualParams.toIndividualRegistrationParams() = IndividualRegistrationParams(name, email, password)
+fun RegisterOrganisationParams.toMonitorBusinessParams() = MonitorBusinessParams(name, email)
+
+fun RegisterIndividualParams.toSignUpParams() = SignUpParams.Individual(name, email, password)
+
+fun RegisterBusinessParams.toSignUpParams() = SignUpParams.Business(businessName, individualName, individualEmail, password)

pi-monitor/pi-monitor-client/sdks/core/src/jsMain/kotlin/pimonitor/authentication/signup/exports/SignUpServiceWrapper.kt

@@ -6,7 +6,11 @@ package pimonitor.authentication.signup.exports
 import pimonitor.authentication.signup.SignUpService
 
 open class SignUpServiceWrapper(service: SignUpService) {
-    val registerIndividual = { params: IndividualParams ->
-        service.registerIndividuallyAs(params.toIndividualRegistrationParams())
+    val registerIndividual = { params: RegisterIndividualParams ->
+        service.signUp(params.toSignUpParams())
+    }
+
+    val registerBusiness = { params: RegisterBusinessParams ->
+        service.signUp(params.toSignUpParams())
     }
 }

pi-monitor/pi-monitor-client/sdks/full/src/commonMain/kotlin/pimonitor/authentication/signup/IndividualFormFields.kt

@@ -9,7 +9,6 @@ import bitframe.presenters.fields.TextInputField
 import kotlin.js.JsExport
 
 data class IndividualFormFields(
-    val title: String = "Create Your Account",
     val select: DropDownInputField = DropDownInputField(
         Option("Select account type"),
         Option("Register as Business"),

pi-monitor/pi-monitor-client/sdks/full/src/commonMain/kotlin/pimonitor/authentication/signup/SignUpState.kt

@@ -3,15 +3,21 @@
 package pimonitor.authentication.signup
 
 import bitframe.presenters.feedbacks.FormFeedback
+import bitframe.presenters.fields.ButtonInputField
+import bitframe.presenters.fields.DropDownInputField
 import kotlin.js.JsExport
 
-sealed class SignUpState {
+sealed class SignUpState(val select: DropDownInputField, open val status: FormFeedback?) {
+
+    val title: String = "Create Your Account"
 
     data class IndividualForm(
-        val fields: IndividualFormFields, val status: FormFeedback?
-    ) : SignUpState()
+        val fields: IndividualFormFields, override val status: FormFeedback?
+    ) : SignUpState(fields.select, status)
 
     data class BusinessForm(
-        val fields: BusinessFormFields, val status: FormFeedback?
-    ) : SignUpState()
+        val fields: BusinessFormFields, override val status: FormFeedback?
+    ) : SignUpState(fields.select, status)
+
+    val submitButton: ButtonInputField = ButtonInputField("Get Started")
 }

pi-monitor/pi-monitor-client/sdks/full/src/jsMain/kotlin/index.kt

@@ -4,10 +4,13 @@
 import bitframe.authentication.signin.exports.SignInScope
 import pimonitor.PiMonitorService
 import pimonitor.authentication.signup.exports.SignUpScope
+import pimonitor.authentication.signup.exports.SignUpScopeLegacy
 import pimonitor.evaluation.business.BusinessesScope
 
 fun signIn(service: PiMonitorService) = SignInScope(service.signIn)
 
+fun signUpLegacy(service: PiMonitorService) = SignUpScopeLegacy(service.signUp)
+
 fun signUp(service: PiMonitorService) = SignUpScope(service.signUp)
 
 fun business(service: PiMonitorService) = BusinessesScope(service.businesses)