diff --git a/assets/stylesheets/matrixchat.scss b/assets/stylesheets/matrixchat.scss
index 79f3b59ed208af1095e88d00f32cc2fdda1ccbb5..15e5bd701917c31bf5311f223c5334875ae1e2e4 100644
--- a/assets/stylesheets/matrixchat.scss
+++ b/assets/stylesheets/matrixchat.scss
@@ -1,8 +1,110 @@
-div.matrix-chat-button {
+@import "assets/stylesheets/mixins/colors";
+@import "assets/stylesheets/scss/variables";
+
+$font-size-huge: floor($font-size-h1 * 2.5);
+
+.matrix-welcome {
+ margin: 75px auto 0 auto;
+ text-align: center;
+
+ header {
+ h1 {
+ font-size: $font-size-huge;
+ font-weight: bold;
+ }
+ p {
+ font-size: floor($font-size-large * 1.25);
+ }
+ }
+
+ ol {
+ align-items: center;
+ counter-reset: item;
+ display: flex;
+ justify-content: center;
+ list-style: none;
+
+ li {
+ align-items: center;
+ background-color: $content-color-20;
+ counter-increment: item;
+ display: flex;
+ height: 120px;
+ margin: 15px;
+ padding: 10px;
+ text-align: left;
+ vertical-align: center;
+ width: 250px;
+
+ &:before {
+ color: $content-color;
+ content: counter(item) '.';
+ font-size: floor($font-size-huge * 1.25);
+ font-weight: bold;
+ margin-right: 15px;
+ position: relative;
+ top: -25px;
+ width: 50px;
+ }
+ }
+ }
+
+ .open-chat-container {
+ margin-bottom: 50px;
+ margin-top: 25px;
+
+ button {
+ font-size: $font-size-h1;
+ padding: 15px 40px;
+
+ &:hover {
+ background-color: $white;
+ }
+
+ a {
+ img {
+ vertical-align: bottom;
+ }
+
+ .button-text {
+ line-height: 36px;
+ }
+ }
+ }
+ }
+
+ footer {
+ margin-left: auto;
+ margin-right: auto;
+ text-align: left;
+ width: 550px;
+
+ h1 {
+ font-size: $font-size-h2;
+
+ img {
+ vertical-align: bottom;
+ margin-right: 10px;
+ }
+
+ .matrix-footer-heading {
+ display: inline-block;
+ font-size: $font-size-h1;
+ font-weight: bold;
+ }
+ }
+
+ p {
+ padding-left: 48px;
+ }
+ }
+}
+
+.matrix-chat-button {
text-align: center;
}
-div.matrix-loading {
+.matrix-loading {
height: 64px;
text-align: center;
width: 100%;
diff --git a/plugin.manifest b/plugin.manifest
index a3622a76ff3a6d907b5eede7caeb5309abe367ca..2665452a603d3b1ecd5642fd7ecbda8a232f9f27 100644
--- a/plugin.manifest
+++ b/plugin.manifest
@@ -1,7 +1,7 @@
pluginname=Matrix-Chat
pluginclassname=MatrixPlugin
origin=data-quest
-version=1.3
+version=1.4
screenshot=assets/images/matrix_logo.png
description=Matrix chat for Stud.IP courses
studipMinVersion=4.5
diff --git a/views/matrix_chat/_welcome.php b/views/matrix_chat/_welcome.php
new file mode 100644
index 0000000000000000000000000000000000000000..2b8e90e7fb3f938bafeb4c9da7df101eadf3a516
--- /dev/null
+++ b/views/matrix_chat/_welcome.php
@@ -0,0 +1,47 @@
+<article class="matrix-welcome">
+ <header>
+ <h1><?= dgettext('Matrix', 'Matrix-Chat') ?></h1>
+ <p>
+ <?= dgettext('matrix', 'So aktivieren Sie den Chat für diese Veranstaltung.') ?>
+ </p>
+ </header>
+ <ol>
+ <li>
+ <?= dgettext('matrix', 'Rufen Sie den Chat auf und klicken dort auf ' .
+ '"Mit SAML fortfahren". Melden Sie sich per WebSSO an.') ?>
+ </li>
+ <li>
+ <?= dgettext('matrix', 'Laden Sie danach diese Seite neu. ' .
+ 'Sie erhalten dann eine Einladung in den Chatraum dieser Veranstaltung.') ?>
+ </li>
+ <li>
+ <?= dgettext('matrix', 'Nach dem ersten Login können Sie einen beliebigen ' .
+ 'Chatclient für Matrix verwenden.') ?>
+ </li>
+ </ol>
+ <div class="open-chat-container">
+ <button type="button" class="button">
+ <a href="<?= Config::get()->MATRIX_CHATSERVER_URL ?>"
+ title="<?= dgettext('matrix', 'Zum Chat') ?>">
+ <?= Icon::create('link-extern')->asImg(36) ?>
+ <span class="button-text">
+ <?= dgettext('matrix', 'Jetzt zum Chat anmelden.') ?>
+ </span>
+ </a>
+ </button>
+ </div>
+ <footer>
+ <h1>
+ <?= Icon::create('info-circle')->asImg(32) ?>
+ <span class="matrix-footer-heading">
+ <?= dgettext('matrix', 'Warum ist diese Anmeldung nötig?') ?>
+ </span>
+ </h1>
+ <p>
+ <?= dgettext('matrix', 'Sie müssen sich bereits erstmalig im Chat angemeldet haben, ' .
+ 'damit Ihre Kennung dort angelegt wurde. Erst dann können Sie in den Chatraum dieser Veranstaltung ' .
+ 'eingeladen werden. Aus technischen Gründen ist es nicht möglich, Ihre Kennung automatisch zu ' .
+ 'ermitteln.' ) ?>
+ </p>
+ </footer>
+</article>
diff --git a/views/matrix_chat/index.php b/views/matrix_chat/index.php
index 9fc9393ed4c05ee3a5d8c6242f24544555f7ff0f..5662ea84c866c6599dce2db74efdd29b9d88a5d9 100644
--- a/views/matrix_chat/index.php
+++ b/views/matrix_chat/index.php
@@ -8,28 +8,7 @@
</div>
<? endif ?>
<? if ($showAccountHint) : ?>
- <div class="messagebox messagebox_warning">
- <p>
- <?= dgettext('matrix', 'Sie müssen sich bereits erstmalig im Chat angemeldet haben, ' .
- 'damit Ihre Kennung dort angelegt wurde und Sie in den Chatraum dieser Veranstaltung eingeladen ' .
- 'werden können. Aus Datenschutzgründen ist es nicht möglich, Ihre Kennung dort automatisch zu ' .
- 'ermitteln.') ?>
- </p>
- <p>
- <?= dgettext('matrix', 'Wenn Sie also noch nie im Element-Chat eingeloggt waren:') ?>
- <br>
- <?= sprintf(dgettext('matrix', '%sBitte rufen Sie den Chat auf%s und ' .
- 'klicken dort auf "Mit SAML fortfahren", um sich per WebSSO einzuloggen. Wenn Sie danach diese Seite ' .
- 'neu laden oder später nochmals aufrufen, erhalten Sie eine Einladung in den Chatraum dieser ' .
- 'Veranstaltung.'),
- '<a href="' . Config::get()->MATRIX_CHATSERVER_URL . '" title="Chat" target="_blank">',
- '</a>') ?>
- </p>
- <p>
- <?= dgettext('matrix', 'Nach dem ersten Login können Sie problemlos beliebige ' .
- 'Chatclients für Matrix verwenden.') ?>
- </p>
- </div>
+ <?= $this->render_partial('matrix_chat/_welcome') ?>
<? endif ?>
<? if (!$account && Config::get()->MATRIX_AUTO_CREATE_ACCOUNTS) : ?>
<form class="default" action="<?= $controller->link_for('matrix_chat/create_account') ?>" method="post">
@@ -53,7 +32,7 @@
<div class="matrix-loading" data-endpoint="<?= htmlReady($controller->link_for('matrix_chat/require_room')) ?>">
<?= Assets::img('ajax-indicator-black.svg') ?>
</div>
-<? elseif (!$noChat) : ?>
+<? elseif (!$noChat && !$showAccountHint) : ?>
<? if (Config::get()->MATRIX_USE_CHAT_IFRAME) : ?>
<iframe src="<?= Config::get()->MATRIX_CHATSERVER_URL ?>" width="100%" height="100%"></iframe>
<? else : ?>