Better handle mobile devices in CSS of mod_register_web

Thanks to Marek Foss. Fixes #2039

diff --git a/Makefile.in b/Makefile.in
index 01596329471e53c46a831f1da0680a0d8facb367..5d184a431183c9e62acdbe12dba796005c4d83b7 100644 (file)
--- a/Makefile.in
+++ b/Makefile.in
@@ -46,6 +46,9 @@ SODIR = $(PRIVDIR)/lib
 # /usr/lib/ejabberd/priv/msgs
 MSGSDIR = $(PRIVDIR)/msgs
 
+# /usr/lib/ejabberd/priv/css
+CSSDIR = $(PRIVDIR)/css
+
 # /usr/lib/ejabberd/priv/sql
 SQLDIR = $(PRIVDIR)/sql
 
@@ -129,7 +132,7 @@ DEPS_FILES=$(call FILES_WILDCARD,$(foreach DEP,$(DEPS),deps/$(DEP)/ebin/*.beam d
 DEPS_FILES_FILTERED=$(filter-out %/epam %/eimp deps/elixir/ebin/elixir.app,$(DEPS_FILES))
 DEPS_DIRS=$(sort deps/ $(foreach DEP,$(DEPS),deps/$(DEP)/) $(dir $(DEPS_FILES)))
 
-MAIN_FILES=$(filter-out %/configure.beam,$(call FILES_WILDCARD,ebin/*.beam ebin/*.app priv/msgs/*.msg priv/lib/* include/*.hrl COPYING))
+MAIN_FILES=$(filter-out %/configure.beam,$(call FILES_WILDCARD,ebin/*.beam ebin/*.app priv/msgs/*.msg priv/css/*.css priv/lib/* include/*.hrl COPYING))
 MAIN_DIRS=$(sort $(dir $(MAIN_FILES)) priv/bin priv/sql)
 
 define DEP_VERSION_template
@@ -252,6 +255,8 @@ uninstall-binary:
        rm -fr $(SODIR)
        rm -f  $(MSGSDIR)/*.msgs
        rm -fr $(MSGSDIR)
+       rm -f  $(CSSDIR)/*.css
+       rm -fr $(CSSDIR)
        rm -f  $(SQLDIR)/*.sql
        rm -fr $(SQLDIR)
        rm -fr $(PRIVDIR)

diff --git a/priv/css/register.css b/priv/css/register.css
new file mode 100644 (file)
index 0000000..5ebe238
--- /dev/null
+++ b/priv/css/register.css
@@ -0,0 +1,65 @@
+@meta {
+  width: device-width;
+  zoom: 1.0;
+}
+
+html,body {
+  font-family: sans-serif;
+  background: white;
+
+  padding: 0.5em;
+  margin: auto;
+  max-width: 800px;
+  height: 100%;
+}
+
+form {
+  padding: 0.5em 0;
+}
+
+ul {
+  list-style: none;
+}
+  ul > li {
+    margin-bottom: 2em;
+  }
+
+ol {
+  list-style: none;
+  padding: 0;
+}
+  ol > li {
+    margin-bottom: 2em;
+    font-weight: bold;
+    font-size: 0.75em;
+  }
+  ol > li > ul {
+    list-style: decimal;
+    font-weight: normal;
+    font-style: italic;
+  }
+  ol > li > ul > li {
+    margin-bottom: auto;
+  }
+
+input {
+  display: block;
+  padding: 0.25em;
+  font-size: 1.5em;
+  border: 1px solid #ccc;
+  border-radius: 0;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+  input:focus {
+    border-color: #428bca;
+  }
+  input[type=submit] {
+    padding: 0.33em 1em;
+    background-color: #428bca;
+    border-radius: 2px;
+    cursor: pointer;
+    border: none;
+    color: #fff;
+  }

diff --git a/src/misc.erl b/src/misc.erl
index 06d81cb88ab62cfccb3c996ac5de88cf90f0b2e3..dffe171125bb2c9e86cb3004353b3ea1fa47c05f 100644 (file)
--- a/src/misc.erl
+++ b/src/misc.erl
@@ -33,7 +33,8 @@
         atom_to_binary/1, binary_to_atom/1, tuple_to_binary/1,
         l2i/1, i2l/1, i2l/2, expr_to_term/1, term_to_expr/1,
         now_to_usec/1, usec_to_now/1, encode_pid/1, decode_pid/2,
-        compile_exprs/2, join_atoms/2, try_read_file/1, have_eimp/0]).
+        compile_exprs/2, join_atoms/2, try_read_file/1, have_eimp/0,
+        css_dir/0]).
 
 %% Deprecated functions
 -export([decode_base64/1, encode_base64/1]).
@@ -219,6 +220,17 @@ have_eimp() -> true.
 have_eimp() -> false.
 -endif.
 
+-spec css_dir() -> file:filename().
+css_dir() ->
+    case os:getenv("EJABBERD_CSS_PATH") of
+       false ->
+           case code:priv_dir(ejabberd) of
+               {error, _} -> filename:join(["priv", "css"]);
+               Path -> filename:join([Path, "css"])
+           end;
+       Path -> Path
+    end.
+
 %%%===================================================================
 %%% Internal functions
 %%%===================================================================

diff --git a/src/mod_register_web.erl b/src/mod_register_web.erl
index 16c2d80207639c7440d9a98c25cd3251d20d039f..b7bc2edcad3e1e9271fb066b4c57f8a518676b91 100644 (file)
--- a/src/mod_register_web.erl
+++ b/src/mod_register_web.erl
@@ -156,10 +156,14 @@ process(_Path, _Request) ->
 %%%----------------------------------------------------------------------
 
 serve_css() ->
-    {200,
-     [{<<"Content-Type">>, <<"text/css">>}, last_modified(),
-      cache_control_public()],
-     css()}.
+    case css() of
+       {ok, CSS} ->
+           {200,
+            [{<<"Content-Type">>, <<"text/css">>}, last_modified(),
+             cache_control_public()], CSS};
+       error ->
+           {404, [], "CSS not found"}
+    end.
 
 last_modified() ->
     {<<"Last-Modified">>,
@@ -168,16 +172,30 @@ last_modified() ->
 cache_control_public() ->
     {<<"Cache-Control">>, <<"public">>}.
 
+-spec css() -> {ok, binary()} | error.
 css() ->
-    <<"html,body {\nbackground: white;\nmargin: "
-      "0;\npadding: 0;\nheight: 100%;\n}">>.
+    Dir = misc:css_dir(),
+    File = filename:join(Dir, "register.css"),
+    case file:read_file(File) of
+       {ok, Data} ->
+           {ok, Data};
+       {error, Why} ->
+           ?ERROR_MSG("failed to read ~s: ~s", [File, file:format_error(Why)]),
+           error
+    end.
+
+meta() ->
+    ?XA(<<"meta">>,
+       [{<<"name">>, <<"viewport">>},
+        {<<"content">>, <<"width=device-width, initial-scale=1">>}]).
 
 %%%----------------------------------------------------------------------
 %%% Index page
 %%%----------------------------------------------------------------------
 
 index_page(Lang) ->
-    HeadEls = [?XCT(<<"title">>,
+    HeadEls = [meta(),
+              ?XCT(<<"title">>,
                    <<"Jabber Account Registration">>),
               ?XA(<<"link">>,
                   [{<<"href">>, <<"/register/register.css">>},
@@ -206,7 +224,8 @@ index_page(Lang) ->
 
 form_new_get(Host, Lang, IP) ->
     CaptchaEls = build_captcha_li_list(Lang, IP),
-    HeadEls = [?XCT(<<"title">>,
+    HeadEls = [meta(),
+              ?XCT(<<"title">>,
                    <<"Register a Jabber account">>),
               ?XA(<<"link">>,
                   [{<<"href">>, <<"/register/register.css">>},
@@ -350,7 +369,8 @@ build_captcha_li_list2(Lang, IP) ->
 %%%----------------------------------------------------------------------
 
 form_changepass_get(Host, Lang) ->
-    HeadEls = [?XCT(<<"title">>, <<"Change Password">>),
+    HeadEls = [meta(),
+              ?XCT(<<"title">>, <<"Change Password">>),
               ?XA(<<"link">>,
                   [{<<"href">>, <<"/register/register.css">>},
                    {<<"type">>, <<"text/css">>},
@@ -456,7 +476,8 @@ check_password(Username, Host, Password) ->
 %%%----------------------------------------------------------------------
 
 form_del_get(Host, Lang) ->
-    HeadEls = [?XCT(<<"title">>,
+    HeadEls = [meta(),
+              ?XCT(<<"title">>,
                    <<"Unregister a Jabber account">>),
               ?XA(<<"link">>,
                   [{<<"href">>, <<"/register/register.css">>},