Harmonize login and register page

This commit is contained in:
Eike Kettner 2021-01-08 01:43:50 +01:00
parent 752c8f9be2
commit 48d182667d
2 changed files with 109 additions and 107 deletions

View File

@ -83,7 +83,7 @@ view flags model =
, div [ class "ui very basic right aligned segment" ] , div [ class "ui very basic right aligned segment" ]
[ text "No account? " [ text "No account? "
, a [ class "ui icon link", Page.href RegisterPage ] , a [ class "ui icon link", Page.href RegisterPage ]
[ i [ class "edit icon" ] [] [ i [ class "user circle outline icon" ] []
, text "Sign up!" , text "Sign up!"
] ]
] ]

View File

@ -14,125 +14,127 @@ view flags model =
[ div [ class "ui centered grid" ] [ div [ class "ui centered grid" ]
[ div [ class "row" ] [ div [ class "row" ]
[ div [ class "sixteen wide mobile twelve wide tablet six wide computer column" ] [ div [ class "sixteen wide mobile twelve wide tablet six wide computer column" ]
[ h1 [ class "ui cener aligned icon header" ] [ div [ class "ui segment register-view" ]
[ img [ h1 [ class "ui cener aligned icon header" ]
[ class "ui image" [ img
, src (flags.config.docspellAssetPath ++ "/img/logo-96.png") [ class "ui image"
] , src (flags.config.docspellAssetPath ++ "/img/logo-96.png")
[] ]
, div [ class "content" ] []
[ text "Sign up @ Docspell" , div [ class "content" ]
] [ text "Sign up @ Docspell"
]
, Html.form
[ class "ui large error form raised segment"
, onSubmit RegisterSubmit
, autocomplete False
]
[ div [ class "required field" ]
[ label [] [ text "Collective ID" ]
, div [ class "ui left icon input" ]
[ input
[ type_ "text"
, autocomplete False
, onInput SetCollId
, value model.collId
, autofocus True
]
[]
, i [ class "users icon" ] []
] ]
] ]
, div [ class "required field" ] , Html.form
[ label [] [ text "User Login" ] [ class "ui large error form raised segment"
, div [ class "ui left icon input" ] , onSubmit RegisterSubmit
[ input , autocomplete False
[ type_ "text" ]
, autocomplete False [ div [ class "required field" ]
, onInput SetLogin [ label [] [ text "Collective ID" ]
, value model.login , div [ class "ui left icon input" ]
[ input
[ type_ "text"
, autocomplete False
, onInput SetCollId
, value model.collId
, autofocus True
]
[]
, i [ class "users icon" ] []
] ]
[]
, i [ class "user icon" ] []
] ]
] , div [ class "required field" ]
, div [ label [] [ text "User Login" ]
[ class "required field" , div [ class "ui left icon input" ]
] [ input
[ label [] [ text "Password" ] [ type_ "text"
, div [ class "ui left icon action input" ] , autocomplete False
[ input , onInput SetLogin
[ type_ <| , value model.login
if model.showPass1 then ]
"text" []
, i [ class "user icon" ] []
]
]
, div
[ class "required field"
]
[ label [] [ text "Password" ]
, div [ class "ui left icon action input" ]
[ input
[ type_ <|
if model.showPass1 then
"text"
else else
"password" "password"
, autocomplete False , autocomplete False
, onInput SetPass1 , onInput SetPass1
, value model.pass1 , value model.pass1
] ]
[] []
, i [ class "lock icon" ] [] , i [ class "lock icon" ] []
, button [ class "ui icon button", onClick ToggleShowPass1 ] , button [ class "ui icon button", onClick ToggleShowPass1 ]
[ i [ class "eye icon" ] [] [ i [ class "eye icon" ] []
]
] ]
] ]
] , div
, div [ class "required field"
[ class "required field" ]
] [ label [] [ text "Password (repeat)" ]
[ label [] [ text "Password (repeat)" ] , div [ class "ui left icon action input" ]
, div [ class "ui left icon action input" ] [ input
[ input [ type_ <|
[ type_ <| if model.showPass2 then
if model.showPass2 then "text"
"text"
else else
"password" "password"
, autocomplete False , autocomplete False
, onInput SetPass2 , onInput SetPass2
, value model.pass2 , value model.pass2
] ]
[] []
, i [ class "lock icon" ] [] , i [ class "lock icon" ] []
, button [ class "ui icon button", onClick ToggleShowPass2 ] , button [ class "ui icon button", onClick ToggleShowPass2 ]
[ i [ class "eye icon" ] [] [ i [ class "eye icon" ] []
]
] ]
] ]
] , div
, div [ classList
[ classList [ ( "field", True )
[ ( "field", True ) , ( "invisible", flags.config.signupMode /= "invite" )
, ( "invisible", flags.config.signupMode /= "invite" )
]
]
[ label [] [ text "Invitation Key" ]
, div [ class "ui left icon input" ]
[ input
[ type_ "text"
, autocomplete False
, onInput SetInvite
, model.invite |> Maybe.withDefault "" |> value
] ]
[] ]
, i [ class "key icon" ] [] [ label [] [ text "Invitation Key" ]
, div [ class "ui left icon input" ]
[ input
[ type_ "text"
, autocomplete False
, onInput SetInvite
, model.invite |> Maybe.withDefault "" |> value
]
[]
, i [ class "key icon" ] []
]
]
, button
[ class "ui primary button"
, type_ "submit"
]
[ text "Submit"
] ]
] ]
, button , resultMessage model
[ class "ui primary button" , div [ class "ui very basic right aligned segment" ]
, type_ "submit" [ text "Already signed up? "
] , a [ class "ui link", Page.href (LoginPage Nothing) ]
[ text "Submit" [ i [ class "sign in icon" ] []
] , text "Sign in"
] ]
, resultMessage model
, div [ class "ui very basic right aligned segment" ]
[ text "Already signed up? "
, a [ class "ui link", Page.href (LoginPage Nothing) ]
[ i [ class "sign-in icon" ] []
, text "Sign in"
] ]
] ]
] ]