diff options
| -rw-r--r-- | client/src/Login.elm | 125 | ||||
| -rw-r--r-- | client/src/State.elm | 54 |
2 files changed, 88 insertions, 91 deletions
diff --git a/client/src/Login.elm b/client/src/Login.elm index 046ee8583ca7..60a45e7fca77 100644 --- a/client/src/Login.elm +++ b/client/src/Login.elm @@ -32,7 +32,19 @@ loginForm model = |> Tailwind.use |> class ] - [ div + [ div [ [ "text-center", "pb-6" ] |> Tailwind.use |> class ] + [ UI.textButton + { handleClick = State.ToggleLoginForm + , label = + case model.loginTab of + State.LoginForm -> + "Switch to sign up" + + State.SignUpForm -> + "Switch to login" + } + ] + , div [ [ "mb-4" ] |> Tailwind.use |> class ] [ UI.label_ { for_ = "username", text_ = "Username" } , UI.textField @@ -42,28 +54,35 @@ loginForm model = , inputValue = model.username } ] - , div [] - [ UI.label_ { for_ = "role", text_ = "Role" } - , select - [ [ "mb-4" - , "w-full" - , "py-2" - , "px-2" - , "rounded" - , "shadow" - , "border" - ] - |> Tailwind.use - |> class - , id "role" - , onInput State.UpdateRole - ] - [ option [] [ text "" ] - , option [ value "user" ] [ text "User" ] - , option [ value "manager" ] [ text "Manager" ] - , option [ value "admin" ] [ text "Admin" ] - ] - ] + , case model.loginTab of + State.LoginForm -> + text "" + + State.SignUpForm -> + div + [ [ "mb-4" ] |> Tailwind.use |> class ] + [ UI.label_ { for_ = "email", text_ = "Email" } + , input + [ [ "shadow" + , "appearance-none" + , "border" + , "rounded" + , "w-full" + , "py-2" + , "px-3" + , "text-gray-700" + , "leading-tight" + , "focus:outline-none" + , "focus:shadow-outline" + ] + |> Tailwind.use + |> class + , id "email" + , placeholder "who@domain.tld" + , onInput State.UpdateEmail + ] + [] + ] , div [ [ "mb-4" ] |> Tailwind.use |> class ] [ UI.label_ { for_ = "password", text_ = "Password" } @@ -89,56 +108,16 @@ loginForm model = ] [] ] - , div - [] - [ UI.baseButton - { label = "Sign In" - , handleClick = State.AttemptLogin - , extraClasses = [] - , enabled = - case ( model.username, model.password ) of - ( "", "" ) -> - False - - ( "", _ ) -> - False - - ( _, "" ) -> - False - - _ -> - True - } - , div [ [ "inline", "pl-2" ] |> Tailwind.use |> class ] - [ UI.baseButton - { label = "Sign Up" - , extraClasses = [] - , enabled = - case ( model.username, model.password, model.role ) of - ( "", "", _ ) -> - False - - ( _, "", _ ) -> - False - - ( "", _, _ ) -> - False - - ( _, _, Nothing ) -> - False - - _ -> - True - , handleClick = - case model.role of - Just role -> - State.AttemptSignUp role - - Nothing -> - State.DoNothing - } - ] - ] + , case model.loginTab of + State.LoginForm -> + UI.simpleButton { handleClick = State.AttemptLogin, label = "Login" } + + State.SignUpForm -> + if String.length model.username > 0 && String.length model.email > 0 && String.length model.password > 0 then + UI.simpleButton { handleClick = State.AttemptSignUp, label = "Sign up" } + + else + UI.disabledButton { label = "Sign up" } ] ] diff --git a/client/src/State.elm b/client/src/State.elm index 8595ee4dd3e8..e23580a05ebb 100644 --- a/client/src/State.elm +++ b/client/src/State.elm @@ -27,16 +27,18 @@ import Utils type Msg = DoNothing | UpdateUsername String + | UpdateEmail String | UpdatePassword String | UpdateRole String | UpdateAdminTab AdminTab | ClearErrors + | ToggleLoginForm -- SPA | LinkClicked Browser.UrlRequest | UrlChanged Url.Url -- Outbound network | AttemptGetUsers - | AttemptSignUp Role + | AttemptSignUp | AttemptLogin | AttemptLogout | AttemptDeleteUser String @@ -94,16 +96,23 @@ type AdminTab = Users +type LoginTab + = LoginForm + | SignUpForm + + type alias Model = { route : Maybe Route , url : Url.Url , key : Nav.Key , session : Maybe Session , username : String + , email : String , password : String , role : Maybe Role , users : WebData AllUsers , adminTab : AdminTab + , loginTab : LoginTab , loginError : Maybe Http.Error , logoutError : Maybe Http.Error , signUpError : Maybe Http.Error @@ -191,29 +200,20 @@ logout = signUp : { username : String + , email : String , password : String - , role : Role } -> Cmd Msg -signUp { username, password, role } = +signUp { username, email, password } = Utils.postWithCredentials - { url = endpoint [ "create-account" ] [] + { url = endpoint [ "accounts" ] [] , body = Http.jsonBody (JE.object [ ( "username", JE.string username ) + , ( "email", JE.string username ) , ( "password", JE.string password ) - , ( "role" - , case role of - User -> - JE.string "user" - - Manager -> - JE.string "manager" - - Admin -> - JE.string "admin" - ) + , ( "role", JE.string "user" ) ] ) , expect = Http.expectJson GotSignUp decodeSession @@ -306,10 +306,12 @@ init _ url key = , key = key , session = Nothing , username = "" + , email = "" , password = "" , role = Nothing , users = RemoteData.NotAsked , adminTab = Users + , loginTab = LoginForm , loginError = Nothing , logoutError = Nothing , signUpError = Nothing @@ -333,6 +335,9 @@ update msg model = UpdatePassword x -> ( { model | password = x }, Cmd.none ) + UpdateEmail x -> + ( { model | email = x }, Cmd.none ) + UpdateAdminTab x -> ( { model | adminTab = x }, Cmd.none ) @@ -343,7 +348,7 @@ update msg model = "user" -> Just User - "owner" -> + "manager" -> Just Manager "admin" -> @@ -364,6 +369,19 @@ update msg model = , Cmd.none ) + ToggleLoginForm -> + ( { model + | loginTab = + case model.loginTab of + LoginForm -> + SignUpForm + + SignUpForm -> + LoginForm + } + , Cmd.none + ) + LinkClicked urlRequest -> case urlRequest of Browser.Internal url -> @@ -443,12 +461,12 @@ update msg model = ) -- /create-account - AttemptSignUp role -> + AttemptSignUp -> ( model , signUp { username = model.username + , email = model.email , password = model.password - , role = role } ) |