Better handle mobile devices in CSS of mod_register_web

Thanks to Marek Foss. Fixes #2039

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)

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;
+  }

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
 %%%===================================================================

src/mod_register_web.erl

@@ -156,10 +156,14 @@ process(_Path, _Request) ->
 %%%----------------------------------------------------------------------
 
 serve_css() ->
-    {200,
+    case css() of
-     [{<<"Content-Type">>, <<"text/css">>}, last_modified(),
+	{ok, CSS} ->
-      cache_control_public()],
+	    {200,
-     css()}.
+	     [{<<"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: "
+    Dir = misc:css_dir(),
-      "0;\npadding: 0;\nheight: 100%;\n}">>.
+    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">>},