ode-csslib-panda-oneconnect 1.0.0-feat-produit.202209261548

package/dist/template/auth/login-form.html

@@ -0,0 +1,171 @@
+<div>
+  <div class="centered container row">
+    <img class="logo" src="/assets/themes/[[currentTheme.child]]/img/illustrations/logo.png" alt="Logo de l'ENT">
+
+    <div ng-if="!browser" class="browser">
+      <h1><i18n>browser.not.supported.title</i18n></h1>
+      <p><i18n>browser.not.supported.download</i18n></p>
+      <p class="download">
+        <a href="https://www.google.fr/chrome/browser/desktop/" target="_blank">
+          <img src="/auth/public/img/chrome_logo.png" />
+        </a>
+        <a href="https://www.mozilla.org/fr/firefox/new/" target="_blank">
+          <img src="/auth/public/img/firefox_logo.png" />
+        </a>
+        <a
+          href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie"
+          target="_blank"
+        >
+          <img src="/auth/public/img/msie_logo.png" />
+        </a>
+      </p>
+    </div>
+
+    <div ng-if="browser && browser.outdated" class="browser">
+      <h1><i18n>browser.outdated.title</i18n></h1>
+      <p><i18n>browser.outdated.update</i18n></p>
+      <p class="update">
+        <a
+          href="https://www.google.fr/chrome/browser/desktop/"
+          target="_blank"
+          ng-if="browser.browser === 'Chrome'"
+        >
+          <img src="/auth/public/img/chrome_logo.png" />
+        </a>
+        <a
+          href="https://www.mozilla.org/fr/firefox/new/"
+          target="_blank"
+          ng-if="browser.browser === 'Firefox'"
+        >
+          <img src="/auth/public/img/firefox_logo.png" />
+        </a>
+        <a
+          href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie"
+          target="_blank"
+          ng-if="browser.browser === 'MSIE'"
+        >
+          <img src="/auth/public/img/msie_logo.png" />
+        </a>
+        <a
+          href="https://www.apple.com/fr/safari/"
+          target="_blank"
+          ng-if="browser.browser === 'Safari'"
+        >
+          <img src="/auth/public/img/safari_logo.png" />
+        </a>
+      </p>
+      <p><i18n>browser.outdated.download</i18n></p>
+      <p class="download">
+        <a
+          href="https://www.google.fr/chrome/browser/desktop/"
+          target="_blank"
+          ng-if="browser.browser !== 'Chrome'"
+        >
+          <img src="/auth/public/img/chrome_logo.png" />
+        </a>
+        <a
+          href="https://www.mozilla.org/fr/firefox/new/"
+          target="_blank"
+          ng-if="browser.browser !== 'Firefox'"
+        >
+          <img src="/auth/public/img/firefox_logo.png" />
+        </a>
+        <a
+          href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie"
+          target="_blank"
+          ng-if="browser.browser !== 'MSIE'"
+        >
+          <img src="/auth/public/img/msie_logo.png" />
+        </a>
+      </p>
+    </div>
+
+    <section class="main">
+      <div class="row"></div>
+      <div class="welcome-text" ng-if="!welcome.hideContent">
+        <div class="row">
+          <div class="twelve cell" bind-html="welcome.content"></div>
+        </div>
+      </div>
+
+      <div
+        class="panel login"
+        ng-class="{ 'lonely-panel': welcome.hideContent }"
+      >
+        <h1>
+          <img src="/auth/public/img/auth.png" /><span
+            translate
+            content="auth.header"
+          ></span>
+        </h1>
+        <p class="warning" translate content="[[error]]" ng-if="error"></p>
+        <form method="post" action="/auth/login">
+          <p>
+            <label translate content="auth.email"></label>
+            <input
+              type="text"
+              ng-model="user.email"
+              ng-keydown="noSpace($event)"
+              ng-change="noUpperCase()"
+              name="email"
+              id="email"
+              autofocus
+              tabindex="1"
+            />
+          </p>
+          <p>
+            <label translate content="auth.password"></label>
+            <input-password
+              type="password"
+              ng-model="user.password"
+              name="password"
+              id="password"
+              tabindex="2"
+            ></input-password>
+          </p>
+          <p>
+            <input
+              type="checkbox"
+              ng-model="user.rememberMe"
+              name="rememberMe"
+              id="rememberMe"
+              value="true"
+            />
+            <label
+              translate
+              content="auth.remember.me"
+              style="display: inline"
+            ></label>
+          </p>
+          <div class="flex-magnet-container">
+            <div>
+              <a
+                class="forgot-link"
+                href="/auth/forgot#/password"
+                translate
+                content="missing.password"
+              ></a>
+              <a
+                class="forgot-link"
+                href="/auth/forgot#/id"
+                translate
+                content="missing.id"
+              ></a>
+            </div>
+            <input
+              type="submit"
+              translate
+              attr="value"
+              value="auth.login"
+              tabindex="3"
+              class="vertical-spacing flex-magnet-bottom-right"
+            />
+          </div>
+          <input type="hidden" name="callBack" ng-value="callBack" />
+          <input type="hidden" name="details" ng-value="details" />
+        </form>
+        <div style="clear: both"></div>
+      </div>
+    </section>
+  </div>
+</div>

package/dist/template/auth/reset-form.html

@@ -0,0 +1,53 @@
+<div class="absolute">
+	<div class="centered container row">
+		<img class="logo" src="/assets/themes/[[currentTheme.child]]/img/illustrations/logo.png" alt="Logo de l'ENT">
+		<section class="main">
+			<div class="welcome-text" ng-if="!welcome.hideContent">
+				<div class="row">
+					<div class="twelve cell" bind-html="welcome.content"></div>
+				</div>
+			</div>
+
+			<div class="panel" ng-class="{ 'lonely-panel': welcome.hideContent }">
+				<h1><img src="/auth/public/img/auth.png" /><span translate content="auth.reset.header"></span></h1>
+				<p class="warning" translate content="[[error]]" ng-if="error"></p>
+				<form method="post" ng-submit="reset()" name="resetForm">
+					<p>
+						<label translate content="auth.email"></label>
+						<input type="text" name="login" ng-model="user.login" ng-keydown="noSpace($event)"
+							ng-change="noUpperCase()" name="login" tabindex="1" required />
+						<p class="input-errors" ng-if="resetForm.login.$invalid && resetForm.login.$dirty">
+							<span ng-repeat="(key, value) in resetForm.login.$error">
+								<label ng-if="value">[[lang.translate(key)]]</label>
+							</span>
+						</p>
+					</p>
+					<p>
+						<label translate content="auth.activation.password"></label>
+						<input-password required ng-pattern="passwordRegex" ng-model="user.password"
+							ng-change="refreshInput(resetForm, 'confirmPassword')" name="password" ng-trim="false"
+							tabindex="2"></input-password>
+						<p class="input-errors" ng-if="resetForm.password.$invalid && resetForm.password.$dirty">
+							<i18n>password.errors</i18n><br />
+							<span ng-repeat="(key, value) in resetForm.password.$error">
+								<label ng-if="value">[[lang.translate(key)]]</label>
+							</span>
+						</p>
+						<label translate content="auth.activation.confirm.password"></label>
+						<input-password required ng-model="user.confirmPassword" name="confirmPassword" ng-trim="false"
+							tabindex="3"></input-password>
+						<p class="input-errors"
+							ng-if="user.password !== '' && user.confirmPassword && user.confirmPassword !== '' && user.confirmPassword !== user.password">
+							<i18n>password.identical</i18n>
+						</p>
+					</p>
+					<p>
+						<input type="submit" translate attr="value" value="auth.reset" ng-disabled="resetForm.$invalid"
+							tabindex="4" />
+					</p>
+					<div class="clear"></div>
+				</form>
+			</div>
+		</section>
+	</div>
+</div>

package/dist/template/directory/massmail.mail.es.txt

@@ -0,0 +1,46 @@
+{{! Users that are not activated }}
+{{#activationCode}}
+Hola,<br/>
+<br/>
+Este mensaje se envía automáticamente con sus informaciones de primera conexión a ONE.<br/>
+<br/>
+Para conectarse, vaya a <a href="https://oneconnect.opendigitaleducation.com">oneconnect.opendigitaleducation.com</a>.<br/>
+<br/>
+Introduzca su nombre de usuario (se debe guardar para poder conectarse ulteriormente) y su código de activación:<br/>
+<br/>
+Id. de usuario: {{login}}<br/>
+Código de activación: {{activationCode}}<br/>
+<br/>
+Seleccione una nueva contraseña e introduzca su dirección de correo electrónico personal para obtener un correo electrónico de restauración si usted olvida su contraseña.<br/>
+<br/>
+Recomendamos que mezcle números, letras, mayúsculas, minúsculas y caracteres especiales al elegir su contraseña personal.<br/>
+<br/>
+¡Feliz navegación!<br/>
+<br/>
+El equipo ONE<br/>
+<br/>
+{{/activationCode}}
+{{! Users that are activated }}
+{{^activationCode}}
+Hola,<br/>
+<br/>
+Este mensaje se envía automáticamente con sus informaciones de primera conexión a ONE.<br/>
+<br/>
+Usted ya tiene una cuenta en ONE.<br/>
+Su Id. de usuario es: <i>{{login}}</i><br/>
+<br/>
+Si no recuerda su contraseña, puede establecer una nueva siguiendo las siguientes instrucciones:<br/>
+<br/>
+- Vaya a <a href="https://oneconnect.opendigitaleducation.com">https://oneconnect.opendigitaleducation.com</a> y haga clic en “Contraseña olvidada”<br/>
+<br/>
+- Introduzca su Id. de usuario y haga clic en “Enviar”.<br/>
+<br/>
+Se enviará un correo electrónico a la dirección que ingresó al activar su cuenta. Luego haga clic en el enlace de restauración de contraseña recibido para definir su nueva contraseña.<br/>
+<br/>
+Recomendamos que mezcle números, letras, mayúsculas, minúsculas y caracteres especiales al elegir su contraseña personal.<br/>
+<br/>
+¡Feliz navegación!<br/>
+<br/>
+El equipo ONE<br/>
+<br/>
+{{/activationCode}}

package/dist/template/directory/massmail.mail.txt

@@ -0,0 +1,44 @@
+{{! Users that are not activated }}
+{{#activationCode}}
+Bonjour,<br/>
+<br/>
+Ceci est un mail généré automatiquement qui contient vos informations de première connexion à ONE.<br/>
+<br/>
+La première connexion à ONE s’effectue sur <a href="https://oneconnect.opendigitaleducation.com">oneconnect.opendigitaleducation.com</a>.<br/>
+<br/>
+Une première étape indispensable vous permettra de personnaliser vos informations de connexion.<br/>
+<br/>
+Munissez vous de votre adresse e-mail personnelle et des informations ci-dessous :<br/>
+<br/>
+Identifiant : {{login}}<br/>
+Code d’activation : {{activationCode}}<br/>
+<br/>
+Pour sécuriser vos accès, il vous sera demandé de choisir un nouveau de mot de passe, d’indiquer votre adresse e-mail personnelle et, si vous le souhaitez, de saisir un numéro de téléphone portable.<br/>
+<br/>
+Nous vous recommandons de mélanger chiffres, lettres, majuscules, minuscules et caractères spéciaux lors du choix de votre mot de passe personnel.<br/>
+<br/>
+Bonne navigation sur ONE !<br/>
+<br/>
+{{/activationCode}}
+{{! Users that are activated }}
+{{^activationCode}}
+Bonjour,<br/>
+<br/>
+Ceci est un mail généré automatiquement qui contient vos informations de connexion à ONE.<br/>
+<br/>
+Vous possédez déjà un compte sur ONE.<br/>
+Votre identifiant de connexion est rappelé ci-contre : <i>{{login}}</i><br/>
+<br/>
+Si vous ne vous souvenez pas de votre mot de passe, vous pouvez en définir un nouveau en suivant les instructions ci-dessous :<br/>
+<br/>
+- Rendez-vous à l’adresse <a href="https://oneconnect.opendigitaleducation.com">https://oneconnect.opendigitaleducation.com</a> et cliquez sur « Mot de passe oublié ».<br/>
+<br/>
+- Saisissez votre identifiant puis cliquez sur « Envoyer ».<br/>
+<br/>
+Un mail sera envoyé à l’adresse que vous avez saisi lors de l’activation de votre compte. Cliquez ensuite sur le lien hypertexte dans le mail reçu pour définir votre nouveau mot de passe.<br/>
+<br/>
+Nous vous recommandons de mélanger chiffres, lettres, majuscules, minuscules et caractères spéciaux lors du choix de votre mot de passe personnel.<br/>
+<br/>
+Bonne navigation sur ONE !<br/>
+<br/>
+{{/activationCode}}

package/dist/template/directory/massmail.pdf.de.xhtml

@@ -0,0 +1,158 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+
+<head>
+    <!-- We use this i18n key to ensure portability because it is overriden by themes  -->
+	<title>{{#i18n}}directory.admin.massMailing{{/i18n}}</title>
+    <style type="text/css">
+			body {
+				font-family: sans-serif;
+				color: #333;
+			}
+			h2 {font-size: 1.2em}
+			h3 {font-size: 1.1em}
+			h4 {margin-left: 1.1em}
+			strong,
+			a,
+			.red {
+				font-weight: bold;
+				color: #d1232a;
+			}
+			ol li {
+				padding: 10px 0;
+				margin-left: -20px;
+			}
+			.column {
+				width: 30%;
+				margin: 1%;
+				display: inline-block;
+				vertical-align: top;
+				text-align: center;
+				font-size: 0.8em;
+			}
+			.column img {
+				width: 75px;
+				text-align: center;
+			}
+      .center{
+        text-align: center;
+      }
+      #right{
+				text-align: right;
+			}
+			.inline-block .baseline,
+			.inline-block #logo {
+				display: inline-block;
+				vertical-align: middle;
+			}
+      #logo{
+				width: 150px;
+			}
+			.baseline {
+				text-align: right;
+				color: #666;
+				letter-spacing: 2px;
+				font-weight: lighter;
+				padding: 5px;
+				border-bottom: 2px solid transparent;
+			}
+			.neo {
+				border-color: #4bafd5;
+			}
+			.one {
+				border-color: #FF8500;
+			}
+			{{#A5}}
+			@page {
+				size: landscape;
+			}
+			body {
+				font-size: 0.7em;
+			}
+			.size {
+				display: inline-block;
+				vertical-align: top;
+				width: 47%;
+				margin: 0 1%;
+			}
+			.column img {
+				width: 50px;
+			}
+			#logo {
+				width: 100px;
+			}
+			{{/A5}}
+	</style>
+</head>
+
+<body>
+
+{{#users}}
+
+<div class="size"{{^end}} style="page-break-after: always"{{/end}}>
+	<div class="inline-block">
+		<img id="logo" src="logo.png"></img>
+		<p class="baseline one">Die virtuelle Arbeitsplattform der Primarschulen</p>
+	</div>
+	{{^activationCode}}
+	<h2>Infos zu meinem Konto</h2>
+	{{/activationCode}}
+	{{#activationCode}}
+	<h2>Meine erste Anmeldung in 5 Schritten</h2>
+	{{/activationCode}}
+    <h3> » Dieses Datenblatt ist bestimmt für <strong>{{firstName}} {{lastName}}</strong></h3>
+	  {{^isGuestOrPersonnel}}
+    <h4>{{^firstChild}}{{#i18n}}{{profile}}{{/i18n}}{{/firstChild}}{{#firstChild}}Elter von <strong>{{firstName}} {{lastName}}</strong>{{#otherChildren}}, <strong>{{firstName}} {{lastName}}</strong>{{/otherChildren}}{{/firstChild}}{{#firstClass}} in der Klasse <strong>{{.}}</strong>{{#otherClasses}}, <strong>{{.}}</strong>{{/otherClasses}}{{/firstClass}}.</h4>
+	  {{/isGuestOrPersonnel}}
+	  {{#isGuestOrPersonnel}}
+    <h4>{{#i18n}}{{profile}}{{/i18n}}.</h4>
+  	{{/isGuestOrPersonnel}}
+    <p>Der den Lehrpersonen, den Personalmitgliedern, den Schülern und ihrer Familie vorbehaltene Plattform ist eine gesicherte und leicht zu handhabende digitale Lösung, die dazu dient:</p>
+    <div class="column">
+        <img src="illustrations/Publipostage_Messagerie.png"></img>
+        <p>Die Austauschprozesse zwischen Schule und Elternhaus zu vereinfachen</p>
+    </div>
+    <div class="column">
+        <img src="illustrations/Publipostage_Cahier_Multimedia.png"></img>
+        <p>Interaktive pädagogische Inhalte zu erstellen</p>
+    </div>
+    <div class="column">
+        <img src="illustrations/Publipostage_Blog.png"></img>
+        <p>Die in der Klasse durchgeführten Projekte bekanntzumachen</p>
+    </div>
+    {{^activationCode}}
+    <h2> » Wie melde ich mich an?</h2>
+    <p>Sie besitzen bereits ein Konto auf der virtuellen Plattform. Sie müssen nur noch Ihren normalen Benutzernamen
+	und das bei Ihrer ersten Anmeldung festgelegte Passwort eingeben.
+    <br />Zur Erinnerung Ihr Benutzername:</p>
+    <p class="center red">{{login}}</p>
+    <br />
+    <h2> » 3 Schritte zum Zurücksetzen meines Passworts</h2>
+    <ol>
+			<li>Bei Vergessen des Passworts gehen Sie auf <a href="{{host}}://{{hostname}}">{{hostname}}</a> und klicken Sie auf<br />« Passwort vergessen ».</li>
+			<li>Geben Sie Ihren Benutzernamen ein und klicken Sie auf « Senden ». Es wird nun eine E-Mail an die bei der Aktivierung Ihres Kontos angegebene Adresse gesendet.</li>
+			<li>Öffnen Sie die E-Mail und klicken Sie dann auf den Link zur Festlegung Ihres neuen Passworts.</li>
+		</ol>
+    {{/activationCode}}
+    {{#activationCode}}
+    <h2> » Anleitung für meine erste Anmeldung</h2>
+    <ol>
+			<li>Gehen Sie zur Anmeldung auf <a href="{{host}}://{{hostname}}">{{hostname}}</a> und klicken Sie auf « Login ».</li>
+			<li>Geben Sie Ihren Benutzernamen (für spätere Anmeldungen aufbewahren) und Ihren Aktivierungscode ein: 
+				<div class="center">
+					<p class="red">Benutzername: {{login}}</p>
+					<p class="red">Aktivierungscode: {{activationCode}}</p>
+				</div>
+			</li>
+			<li>Wählen Sie ein neues Passwort, das aus mindestens 8 Zeichen besteht <strong>und mindestens einen Großbuchstaben, einen Kleinbuchstaben und eine Ziffer enthält</strong>.</li>
+			<li>Geben Sie Ihre persönliche E-Mail-Adresse ein, damit Sie bei Vergessen des Passworts eine E-Mail zum Zurücksetzen des Passworts erhalten.</li>
+			<li>Jetzt müssen Sie nur noch die Allgemeinen Nutzungsbedingungen lesen und akzeptieren.</li>
+		</ol>
+    {{/activationCode}}
+    <p id="right">Viel Vergnügen beim Navigieren!</p>
+</div>
+{{/users}}
+</body>
+
+</html>

package/dist/template/directory/massmail.pdf.en.xhtml

@@ -0,0 +1,158 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+    <!-- We use this i18n key to ensure portability because it is overriden by themes  -->
+	<title>{{#i18n}}directory.admin.massMailing{{/i18n}}</title>
+    <style type="text/css">
+			body {
+				font-family: sans-serif;
+				color: #333;
+			}
+			h2 {font-size: 1.2em}
+			h3 {font-size: 1.1em}
+			h4 {margin-left: 1.1em}
+			strong,
+			a,
+			.red {
+				font-weight: bold;
+				color: #d1232a;
+			}
+			ol li {
+				padding: 10px 0;
+				margin-left: -20px;
+			}
+			.column {
+				width: 30%;
+				margin: 1%;
+				display: inline-block;
+				vertical-align: top;
+				text-align: center;
+				font-size: 0.8em;
+			}
+			.column img {
+				width: 75px;
+				text-align: center;
+			}
+      .center{
+        text-align: center;
+      }
+      #right{
+				text-align: right;
+			}
+			.inline-block .baseline,
+			.inline-block #logo {
+				display: inline-block;
+				vertical-align: middle;
+			}
+      #logo{
+				width: 150px;
+			}
+			.baseline {
+				text-align: right;
+				color: #666;
+				letter-spacing: 2px;
+				font-weight: lighter;
+				padding: 5px;
+				border-bottom: 2px solid transparent;
+			}
+			.neo {
+				border-color: #4bafd5;
+			}
+			.one {
+				border-color: #FF8500;
+			}
+			{{#A5}}
+			@page {
+				size: landscape;
+			}
+			body {
+				font-size: 0.7em;
+			}
+			.size {
+				display: inline-block;
+				vertical-align: top;
+				width: 47%;
+				margin: 0 1%;
+			}
+			.column img {
+				width: 50px;
+			}
+			#logo {
+				width: 100px;
+			}
+			{{/A5}}
+	</style>
+</head>
+
+<body>
+
+{{#users}}
+
+<div class="size"{{^end}} style="page-break-after: always"{{/end}}>
+	<div class="inline-block">
+    	<img id="logo" src="logo.png"></img>
+    	<p class="baseline one">The digital learning environment for primary schools</p>
+	</div>
+	{{^activationCode}}
+	<h2>Information about my account</h2>
+	{{/activationCode}}
+	{{#activationCode}}
+	<h2>Sign in for the first time in 5 steps</h2>
+	{{/activationCode}}
+    <h3> » This document is for <strong>{{firstName}} {{lastName}}</strong></h3>
+	  {{^isGuestOrPersonnel}}
+    <h4>{{^firstChild}}{{#i18n}}{{profile}}{{/i18n}}{{/firstChild}}{{#firstChild}}The parent of <strong>{{firstName}} {{lastName}}</strong>{{#otherChildren}}, <strong>{{firstName}} {{lastName}}</strong>{{/otherChildren}}{{/firstChild}}{{#firstClass}} in class <strong>{{.}}</strong>{{#otherClasses}}, <strong>{{.}}</strong>{{/otherClasses}}{{/firstClass}}.</h4>
+	  {{/isGuestOrPersonnel}}
+	  {{#isGuestOrPersonnel}}
+    <h4>{{#i18n}}{{profile}}{{/i18n}}.</h4>
+  	{{/isGuestOrPersonnel}}
+    <p>Designed for teachers, school personnel, students, and their families, the virtual learning environment is a secure and easy-to-use digital solution for:</p>
+    <div class="column">
+        <img src="illustrations/Publipostage_Messagerie.png"></img>
+        <p>Streamlining communication between school and home</p>
+    </div>
+    <div class="column">
+        <img src="illustrations/Publipostage_Cahier_Multimedia.png"></img>
+        <p>Creating interactive educational content</p>
+    </div>
+    <div class="column">
+        <img src="illustrations/Publipostage_Blog.png"></img>
+        <p>Promoting the projects you've completed in class</p>
+    </div>
+    {{^activationCode}}
+    <h2> » How do I sign in?</h2>
+    <p>You already have an account in the virtual learning environment. All you have to do
+	is enter your normal username and the password you selected the first time you signed in.
+    <br />As a reminder, your username is:</p>
+    <p class="center red">{{login}}</p>
+    <br />
+    <h2> » Resetting your password in three steps</h2>
+    <ol>
+			<li>If you forget your password, visit <a href="{{host}}://{{hostname}}">{{hostname}}</a> and click on « Forgotten password ».</li>
+			<li>Enter your username, then click « Send ». An email will be sent to the address you provided when you activated your account.</li>
+			<li>Open the email and click on the link to reset your password.</li>
+		</ol>
+    {{/activationCode}}
+    {{#activationCode}}
+    <h2> » Signing in for the first time</h2>
+    <ol>
+			<li>To sign in, visit <a href="{{host}}://{{hostname}}">{{hostname}}</a> and click « Sign in ».</li>
+			<li>Enter your username (and be sure to make note of it so you can sign in again later) and your activation code:
+				<div class="center">
+					<p class="red">Username: {{login}}</p>
+					<p class="red">Activation code: {{activationCode}}</p>
+				</div>
+			</li>
+			<li>Choose a new password with at least 8 characters, <strong>including at least one uppercase letter, one lowercase letter, and a number</strong>.</li>
+			<li>Enter your personal email address so you can receive a reset email in case you forget your password.</li>
+			<li>All that's left is to read and accept the terms and conditions.</li>
+		</ol>
+    {{/activationCode}}
+    <p id="right">Enjoy!</p>
+</div>
+{{/users}}
+</body>
+
+</html>