| summaryrefslogtreecommitdiff |
diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/css/src/login.scss | 35 | ||||
| -rw-r--r-- | src/login/src/ElmModule/View.elm | 22 | ||||
| -rw-r--r-- | src/login/src/Struct/UI.elm | 9 | ||||
| -rw-r--r-- | src/login/src/View/AccountRecovery.elm | 38 | ||||
| -rw-r--r-- | src/login/src/View/MainMenu.elm | 94 | ||||
| -rw-r--r-- | src/login/src/View/SignIn.elm | 52 | ||||
| -rw-r--r-- | src/login/src/View/SignUp.elm | 144 |
7 files changed, 332 insertions, 62 deletions
diff --git a/src/css/src/login.scss b/src/css/src/login.scss index 9005d12..f3e5df4 100644 --- a/src/css/src/login.scss +++ b/src/css/src/login.scss @@ -17,6 +17,11 @@ body, align-items: center; } +.fullscreen-module +{ + padding-bottom: 1em; +} + .fullscreen-module > header { display: flex; @@ -141,6 +146,13 @@ article flex-direction: column; } +article p +{ + color: $BROWN-0; + text-shadow: none; + margin: 0.5em 4em 0.5em 4em; +} + article header { display: inline-block; @@ -171,6 +183,27 @@ article h1 padding: 0.5em; padding-left: 1.5em; max-width: 50%; + + align-self: start; +} + +article .multi-input +{ + display: flex; + flex-direction: column; + + flex: 1; +} + +.multi-input input:first-child +{ + margin-bottom: 0.5em; +} + +.multi-input input:nth-child(2) +{ + background: $RED-4; + border: 2px solid $RED-2; } article input @@ -186,6 +219,8 @@ article input color: $BROWN-0; text-shadow: none; + + flex: 1; } article .user-input input diff --git a/src/login/src/ElmModule/View.elm b/src/login/src/ElmModule/View.elm index 55e720f..874eb01 100644 --- a/src/login/src/ElmModule/View.elm +++ b/src/login/src/ElmModule/View.elm @@ -8,9 +8,13 @@ import Html.Attributes -- Map ------------------------------------------------------------------- import Struct.Event import Struct.Model +import Struct.UI +import View.AccountRecovery import View.Header import View.MainMenu +import View.SignIn +import View.SignUp -------------------------------------------------------------------------------- -- LOCAL ----------------------------------------------------------------------- @@ -27,6 +31,22 @@ view model = ] [ (View.Header.get_html), - (View.MainMenu.get_html) + (Html.main_ + [ + ] + [ + (View.MainMenu.get_html + (Struct.UI.try_getting_displayed_tab model.ui) + ), + ( + case (Struct.UI.try_getting_displayed_tab model.ui) of + (Just Struct.UI.SignInTab) -> (View.SignIn.get_html) + (Just Struct.UI.SignUpTab) -> (View.SignUp.get_html) + (Just Struct.UI.RecoveryTab) -> + (View.AccountRecovery.get_html) + _ -> (View.SignIn.get_html) + ) + ] + ) ] ) diff --git a/src/login/src/Struct/UI.elm b/src/login/src/Struct/UI.elm index 53528f7..be7eab3 100644 --- a/src/login/src/Struct/UI.elm +++ b/src/login/src/Struct/UI.elm @@ -21,6 +21,8 @@ type Tab = SignInTab | SignUpTab | SignedInTab + | SignedOutTab + | RecoveryTab type alias Type = { @@ -54,16 +56,19 @@ to_string : Tab -> String to_string tab = case tab of SignInTab -> "Sign In" - SignUpTab -> "Sign Up" + SignUpTab -> "Create Account" SignedInTab -> "Signed In" + SignedOutTab -> "Signed Out" + RecoveryTab -> "Account Recovery" tab_from_string : String -> Tab tab_from_string str = case str of "signin" -> SignInTab "signup" -> SignUpTab + "recover" -> RecoveryTab _ -> SignInTab get_all_tabs : (List Tab) get_all_tabs = - [SignInTab, SignUpTab] + [SignInTab, SignUpTab, RecoveryTab] diff --git a/src/login/src/View/AccountRecovery.elm b/src/login/src/View/AccountRecovery.elm new file mode 100644 index 0000000..0004053 --- /dev/null +++ b/src/login/src/View/AccountRecovery.elm @@ -0,0 +1,38 @@ +module View.AccountRecovery exposing (get_html) + +-- Elm ------------------------------------------------------------------------- +import Html +import Html.Attributes +import Html.Events + +-- Map ------------------------------------------------------------------- +import Struct.Event +import Struct.UI + +-------------------------------------------------------------------------------- +-- LOCAL ----------------------------------------------------------------------- +-------------------------------------------------------------------------------- + +-------------------------------------------------------------------------------- +-- EXPORTED -------------------------------------------------------------------- +-------------------------------------------------------------------------------- +get_html : (Html.Html Struct.Event.Type) +get_html = + (Html.article + [] + [ + (Html.div + [ + (Html.Attributes.class "user-input") + ] + [ + (Html.h1 [] [(Html.text "Email")]), + (Html.input [] []) + ] + ), + (Html.button + [] + [ (Html.text "Send") ] + ) + ] + ) diff --git a/src/login/src/View/MainMenu.elm b/src/login/src/View/MainMenu.elm index 018b9ba..e086b34 100644 --- a/src/login/src/View/MainMenu.elm +++ b/src/login/src/View/MainMenu.elm @@ -12,18 +12,26 @@ import Struct.UI -------------------------------------------------------------------------------- -- LOCAL ----------------------------------------------------------------------- -------------------------------------------------------------------------------- -link_html : String -> Bool -> (Html.Html Struct.Event.Type) -link_html label is_active = +link_html : ( + Struct.UI.Tab -> + String -> + Struct.UI.Tab -> + (Html.Html Struct.Event.Type) + ) +link_html tab label active_tab = (Html.a - [ - (Html.Attributes.class - ( - if (is_active) - then "active" - else "inactive" - ) - ) - ] + ( + if (tab == active_tab) + then + [ + (Html.Attributes.class "active") + ] + else + [ + (Html.Attributes.class "inactive"), + (Html.Events.onClick (Struct.Event.TabSelected tab)) + ] + ) [ (Html.text label) ] @@ -32,51 +40,19 @@ link_html label is_active = -------------------------------------------------------------------------------- -- EXPORTED -------------------------------------------------------------------- -------------------------------------------------------------------------------- -get_html : (Html.Html Struct.Event.Type) -get_html = - (Html.main_ - [ - ] - [ - (Html.nav - [] - [ - (link_html "Login" True), - (link_html "Create Account" False), - (link_html "Recover Account" False) - ] - ), - (Html.article - [] - [ - (Html.div - [ - (Html.Attributes.class "user-input") - ] - [ - (Html.h1 [] [(Html.text "Username")]), - (Html.input [] []) - ] - ), - (Html.div - [ - (Html.Attributes.class "user-input") - ] - [ - (Html.h1 [] [(Html.text "Password")]), - (Html.input - [ - (Html.Attributes.type_ "password") - ] - [] - ) - ] - ), - (Html.button - [] - [ (Html.text "Send") ] - ) - ] - ) - ] - ) +get_html : (Maybe Struct.UI.Tab) -> (Html.Html Struct.Event.Type) +get_html maybe_tab = + let + tab = + case maybe_tab of + Nothing -> Struct.UI.SignInTab + (Just t) -> t + in + (Html.nav + [] + [ + (link_html Struct.UI.SignInTab "Login" tab), + (link_html Struct.UI.SignUpTab "Create Account" tab), + (link_html Struct.UI.RecoveryTab "Recover Account" tab) + ] + ) diff --git a/src/login/src/View/SignIn.elm b/src/login/src/View/SignIn.elm new file mode 100644 index 0000000..2c24526 --- /dev/null +++ b/src/login/src/View/SignIn.elm @@ -0,0 +1,52 @@ +module View.SignIn exposing (get_html) + +-- Elm ------------------------------------------------------------------------- +import Html +import Html.Attributes +import Html.Events + +-- Map ------------------------------------------------------------------- +import Struct.Event +import Struct.UI + +-------------------------------------------------------------------------------- +-- LOCAL ----------------------------------------------------------------------- +-------------------------------------------------------------------------------- + +-------------------------------------------------------------------------------- +-- EXPORTED -------------------------------------------------------------------- +-------------------------------------------------------------------------------- +get_html : (Html.Html Struct.Event.Type) +get_html = + (Html.article + [] + [ + (Html.div + [ + (Html.Attributes.class "user-input") + ] + [ + (Html.h1 [] [(Html.text "Username")]), + (Html.input [] []) + ] + ), + (Html.div + [ + (Html.Attributes.class "user-input") + ] + [ + (Html.h1 [] [(Html.text "Password")]), + (Html.input + [ + (Html.Attributes.type_ "password") + ] + [] + ) + ] + ), + (Html.button + [] + [ (Html.text "Send") ] + ) + ] + ) diff --git a/src/login/src/View/SignUp.elm b/src/login/src/View/SignUp.elm new file mode 100644 index 0000000..3737fed --- /dev/null +++ b/src/login/src/View/SignUp.elm @@ -0,0 +1,144 @@ +module View.SignUp exposing (get_html) + +-- Elm ------------------------------------------------------------------------- +import Html +import Html.Attributes +import Html.Events + +-- Map ------------------------------------------------------------------- +import Struct.Event +import Struct.UI + +-------------------------------------------------------------------------------- +-- LOCAL ----------------------------------------------------------------------- +-------------------------------------------------------------------------------- + +-------------------------------------------------------------------------------- +-- EXPORTED -------------------------------------------------------------------- +-------------------------------------------------------------------------------- +get_html : (Html.Html Struct.Event.Type) +get_html = + (Html.article + [] + [ + (Html.div + [ + (Html.Attributes.class "user-input") + ] + [ + (Html.h1 [] [(Html.text "Username")]), + (Html.input [] []) + ] + ), + (Html.p + [] + [ + (Html.text + """ + This username is used to log in. It also lets other players + find your profile. + """ + ) + ] + ), + (Html.p + [] + [ + (Html.text + """ + Usernames are not permanent. Players can change their + username once a month. Additionally, usernames of players + that have been inactive for more than six months can be + re-used. Players whose usernames have been taken will have + to go through account recovery and choose a new one. + """ + -- TODO username content rules + ) + ] + ), + (Html.div + [ + (Html.Attributes.class "user-input") + ] + [ + (Html.h1 [] [(Html.text "Password")]), + (Html.div + [ + (Html.Attributes.class "multi-input") + ] + [ + (Html.input + [ + (Html.Attributes.type_ "password") + ] + [] + ), + (Html.input + [ + (Html.Attributes.type_ "password") + ] + [] + ) + ] + ) + ] + ), + (Html.p + [] + [ + (Html.text + """ + Passwords are salted and hashed before storage, as per + standard security recommendations. + """ + ) + ] + ), + (Html.div + [ + (Html.Attributes.class "user-input") + ] + [ + (Html.h1 [] [(Html.text "Email")]), + (Html.div + [ + (Html.Attributes.class "multi-input") + ] + [ + (Html.input + [ + ] + [] + ), + (Html.input + [ + ] + [] + ) + ] + ) + ] + ), + (Html.p + [] + [ + (Html.text + """ + The only two uses of emails are account recovery and + the notifications you opt-in for. You will not receive an + email to activate your account. This field is optional, leave + it empty if you do not wish to give an email address (you can + always change your mind later). However, be warned: not having + any means to recover your account is likely to lead to the + loss of this account (for example, if your username gets taken + during an inactivity period). + """ + ) + ] + ), + (Html.button + [] + [ (Html.text "Send") ] + ) + ] + ) |