From ca15d219b9a63f08667fc45d1a5f2518ce1d5244 Mon Sep 17 00:00:00 2001
From: Daniel Hoffend <dh@dotlan.net>
Date: Thu, 25 Apr 2019 01:05:28 +0200
Subject: [PATCH] make welcome.html customizable
---
group_vars/matrix-servers | 2 +
roles/matrix-riot-web/defaults/main.yml | 3 +
.../matrix-riot-web/tasks/setup_riot_web.yml | 1 +
.../systemd/matrix-riot-web.service.j2 | 1 +
.../matrix-riot-web/templates/welcome.html.j2 | 194 ++++++++++++++++++
5 files changed, 201 insertions(+)
create mode 100644 roles/matrix-riot-web/templates/welcome.html.j2
diff --git a/group_vars/matrix-servers b/group_vars/matrix-servers
index 7ded5ff42..facf1b84e 100755
--- a/group_vars/matrix-servers
+++ b/group_vars/matrix-servers
@@ -319,6 +319,8 @@ matrix_riot_web_integrations_jitsi_widget_url: "{{ matrix_dimension_integrations
matrix_riot_web_self_check_validate_certificates: "{{ false if matrix_ssl_retrieval_method == 'self-signed' else false }}"
+matrix_riot_web_registration_enabled: "{{ matrix_synapse_enable_registration }}"
+
######################################################################
#
# /matrix-riot-web
diff --git a/roles/matrix-riot-web/defaults/main.yml b/roles/matrix-riot-web/defaults/main.yml
index 4c6424dc3..b1112eeee 100644
--- a/roles/matrix-riot-web/defaults/main.yml
+++ b/roles/matrix-riot-web/defaults/main.yml
@@ -28,3 +28,6 @@ matrix_riot_web_embedded_pages_home_path: ~
# Controls whether the self-check feature should validate SSL certificates.
matrix_riot_web_self_check_validate_certificates: true
+
+# don't show the registration button on welcome page
+matrix_riot_web_registration_enabled: false
diff --git a/roles/matrix-riot-web/tasks/setup_riot_web.yml b/roles/matrix-riot-web/tasks/setup_riot_web.yml
index a8a314b0e..62eb750b0 100644
--- a/roles/matrix-riot-web/tasks/setup_riot_web.yml
+++ b/roles/matrix-riot-web/tasks/setup_riot_web.yml
@@ -28,6 +28,7 @@
with_items:
- {src: "{{ role_path }}/templates/config.json.j2", name: "config.json"}
- {src: "{{ role_path }}/templates/nginx.conf.j2", name: "nginx.conf"}
+ - {src: "{{ role_path }}/templates/welcome.html.j2", name: "welcome.html"}
- {src: "{{ matrix_riot_web_embedded_pages_home_path }}", name: "home.html"}
when: "matrix_riot_web_enabled and item.src is not none"
diff --git a/roles/matrix-riot-web/templates/systemd/matrix-riot-web.service.j2 b/roles/matrix-riot-web/templates/systemd/matrix-riot-web.service.j2
index 2b57f27c0..06f60cc58 100644
--- a/roles/matrix-riot-web/templates/systemd/matrix-riot-web.service.j2
+++ b/roles/matrix-riot-web/templates/systemd/matrix-riot-web.service.j2
@@ -25,6 +25,7 @@ ExecStart=/usr/bin/docker run --rm --name matrix-riot-web \
{% if matrix_riot_web_embedded_pages_home_path is not none %}
-v {{ matrix_riot_web_data_path }}/home.html:/etc/riot-web/home.html:ro \
{% endif %}
+ -v {{ matrix_riot_web_data_path }}/welcome.html:/etc/riot-web/welcome.html:ro \
{{ matrix_riot_web_docker_image }}
ExecStop=-/usr/bin/docker kill matrix-riot-web
ExecStop=-/usr/bin/docker rm matrix-riot-web
diff --git a/roles/matrix-riot-web/templates/welcome.html.j2 b/roles/matrix-riot-web/templates/welcome.html.j2
new file mode 100644
index 000000000..6456e9475
--- /dev/null
+++ b/roles/matrix-riot-web/templates/welcome.html.j2
@@ -0,0 +1,194 @@
+<style type="text/css">
+
+/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
+ * voodoo where we have to set display: none by default
+ */
+
+h1::after {
+ content: "!";
+}
+
+.mx_Parent {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ text-align: center;
+ padding: 25px 35px;
+ color: #2e2f32;
+}
+
+.mx_Logo {
+ height: 54px;
+ margin-top: 2px;
+}
+
+.mx_ButtonGroup {
+ margin-top: 10px;
+}
+
+.mx_ButtonRow {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-justify-content: space-around;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ margin: 12px 0 0;
+}
+
+.mx_ButtonRow > * {
+ margin: 0 10px;
+}
+
+.mx_ButtonRow > *:first-child {
+ margin-left: 0;
+}
+
+.mx_ButtonRow > *:last-child {
+ margin-right: 0;
+}
+
+.mx_ButtonParent {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 10px 20px;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 4px;
+ width: 150px;
+ background-repeat: no-repeat;
+ background-position: 10px center;
+ text-decoration: none;
+ color: #2e2f32 !important;
+}
+
+.mx_ButtonHeadline {
+ margin-bottom: 14px;
+}
+
+.mx_ButtonLabel {
+ margin-left: 20px;
+}
+
+.mx_ButtonWrapperText {
+ font-size: 13px;
+ margin-bottom: 10px;
+}
+
+.mx_Header_title {
+ font-size: 24px;
+ font-weight: 600;
+ margin: 20px 0 0;
+}
+
+.mx_Header_subtitle {
+ font-size: 12px;
+ font-weight: normal;
+ margin: 8px 0 0;
+}
+
+.mx_ButtonSignIn {
+ background-color: #368BD6;
+ color: white !important;
+}
+
+.mx_ButtonCreateAccount {
+ background-color: #03B381;
+ color: white !important;
+}
+
+.mx_SecondaryButton {
+ background-color: #FFFFFF;
+ color: #2E2F32;
+}
+
+.mx_Button_iconSignIn {
+ background-image: url('welcome/images/icon-sign-in.svg');
+}
+.mx_Button_iconCreateAccount {
+ background-image: url('welcome/images/icon-create-account.svg');
+}
+.mx_Button_iconHelp {
+ background-image: url('welcome/images/icon-help.svg');
+}
+.mx_Button_iconRoomDirectory {
+ background-image: url('welcome/images/icon-room-directory.svg');
+}
+
+</style>
+
+<div class="mx_Parent">
+ <a href="https://riot.im" target="_blank" rel="noopener">
+ <img src="welcome/images/logo.svg" alt="" class="mx_Logo"/>
+ </a>
+ <h1 class="mx_Header_title">_t("Welcome to Riot.im")</h1>
+ <h4 class="mx_Header_subtitle">_t("Decentralised, encrypted chat & collaboration powered by [matrix]")</h4>
+ <div class="mx_ButtonGroup">
+ <div class="mx_ButtonRow">
+ <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
+ <div class="mx_ButtonLabel">_t("Sign In")</div>
+ </a>
+{% if matrix_riot_web_registration_enabled %}
+ <a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
+ <div class="mx_ButtonLabel">_t("Create Account")</div>
+ </a>
+{% endif %}
+ </div>
+{% if matrix_riot_web_disable_guests != true %}
+ <!-- The comments below are meant to be used by Ansible as a quick way
+ to strip out the marked content when desired.
+ See https://github.com/vector-im/riot-web/issues/8622.
+ TODO: Convert to config option if possible. -->
+ <!-- BEGIN Ansible: Remove these lines when guest access is disabled -->
+ <div class="mx_ButtonRow">
+ <div>
+ <div class="mx_ButtonWrapperText">_t("Need help?")</div>
+ <a href="#/user/@riot-bot:matrix.org?action=chat" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconHelp">
+ <div class="mx_ButtonLabel">_t("Chat with Riot Bot")</div>
+ </a>
+ </div>
+ <div>
+ <div class="mx_ButtonWrapperText">_t("Explore rooms")</div>
+ <a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">
+ <div class="mx_ButtonLabel">_t("Room Directory")</div>
+ </a>
+ </div>
+ </div>
+ <!-- END Ansible: Remove these lines when guest access is disabled -->
+{% endif %}
+ </div>
+</div>