Use routes to navigate.

src/Main.elm

@@ -5,7 +5,10 @@ import Scylla.Login exposing (..)
 import Scylla.Model exposing (..)
 import Scylla.Http exposing (..)
 import Scylla.Views exposing (viewFull)
+import Scylla.Route exposing (Route(..))
 import Url exposing (Url)
+import Url.Parser exposing (parse)
+import Url.Builder
 import Html exposing (div, text)
 import Http
 
@@ -18,6 +21,7 @@ init flags url key =
     let
         model =
             { key = key
+            , route = Maybe.withDefault Unknown <| parse Scylla.Route.route url
             , token = flags.token
             , loginUsername = ""
             , loginPassword = ""
@@ -32,7 +36,7 @@ init flags url key =
             }
         cmd = case flags.token of
             Just _ -> Cmd.none
-            Nothing -> Cmd.none
+            Nothing -> Nav.pushUrl key <| Url.Builder.absolute [ "login" ] []
     in
         (model, cmd)
 
@@ -48,13 +52,17 @@ update msg model = case msg of
     ChangeLoginUsername u -> ({ model | loginUsername = u }, Cmd.none)
     ChangeLoginPassword p -> ({ model | loginPassword = p }, Cmd.none)
     AttemptLogin -> (model, Scylla.Http.login model.apiUrl model.loginUsername model.loginPassword) -- TODO 
+    ChangeRoute r -> ({ model | route = r }, Cmd.none)
     ReceiveLoginResponse r -> updateLoginResponse model r
     ReceiveSyncResponse r -> updateSyncResponse model r
     _ -> (model, Cmd.none)
 
 updateLoginResponse : Model -> Result Http.Error LoginResponse -> (Model, Cmd Msg)
 updateLoginResponse model r = case r of
-    Ok lr -> ( { model | token = Just lr.accessToken } , firstSync model.apiUrl lr.accessToken )
+    Ok lr -> ( { model | token = Just lr.accessToken } , Cmd.batch
+        [ firstSync model.apiUrl lr.accessToken
+        , Nav.pushUrl model.key <| Url.Builder.absolute [] []
+        ] )
     Err e  -> (model, Cmd.none)
 
 updateSyncResponse : Model -> Result Http.Error SyncResponse -> (Model, Cmd Msg)
@@ -69,7 +77,7 @@ onUrlRequest : Browser.UrlRequest -> Msg
 onUrlRequest = TryUrl
 
 onUrlChange : Url -> Msg
-onUrlChange = ChangeUrl
+onUrlChange = ChangeRoute << Maybe.withDefault Unknown << parse Scylla.Route.route
 
 main = application
     { init = init

src/Scylla/Model.elm

@@ -2,6 +2,7 @@ module Scylla.Model exposing (..)
 import Scylla.Api exposing (..)
 import Scylla.Sync exposing (SyncResponse, JoinedRoom)
 import Scylla.Login exposing (LoginResponse, Username, Password)
+import Scylla.Route exposing (Route)
 import Browser.Navigation as Nav
 import Dict exposing (Dict)
 import Browser
@@ -10,6 +11,7 @@ import Url exposing (Url)
 
 type alias Model =
     { key : Nav.Key
+    , route : Route
     , token : Maybe ApiToken
     , loginUsername : Username
     , loginPassword : Password
@@ -24,7 +26,7 @@ type Msg =
     | ChangeLoginPassword Password -- During login screen: the password
     | AttemptLogin -- During login screen, login button presed
     | TryUrl Browser.UrlRequest -- User attempts to change URL
-    | ChangeUrl Url -- URL changes
+    | ChangeRoute Route -- URL changes
     | ReceiveSyncResponse (Result Http.Error SyncResponse) -- HTTP, Sync has finished
     | ReceiveLoginResponse (Result Http.Error LoginResponse) -- HTTP, Login has finished
 

src/Scylla/Route.elm

@@ -0,0 +1,18 @@
+module Scylla.Route exposing (..)
+import Url.Parser exposing (Parser, oneOf, map, s, string, (</>), top)
+
+type alias RoomId = String
+
+type Route =
+    Base
+    | Unknown
+    | Login
+    | Room RoomId
+
+route : Parser (Route -> a) a
+route =
+    oneOf
+        [ map Base top
+        , map Login (s "login")
+        , map Room (s "room" </> string)
+        ]

src/Scylla/Views.elm

@@ -1,6 +1,7 @@
 module Scylla.Views exposing (..)
 import Scylla.Model exposing (..)
 import Scylla.Sync exposing (..)
+import Scylla.Route exposing (..)
 import Json.Decode as Decode
 import Html exposing (Html, div, input, text, button, div, span)
 import Html.Attributes exposing (type_, value)
@@ -10,9 +11,11 @@ import Dict
 viewFull : Model -> List (Html Msg)
 viewFull model = 
     let
-        core = case model.token of
+        core = case model.route of
-            Just _ -> normalView model
+            Login -> loginView model 
-            Nothing -> loginView model 
+            Base -> normalView model
+            Room r -> normalView model
+            _ -> div [] []
         errorList = errorsView model.errors
     in
         [ errorList ] ++ [ core ]