From a4dbe4868810c0b7778d1dda952d2441e9501564 Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Thu, 23 Apr 2020 23:20:08 +0200
Subject: [PATCH] Message component

---
 package.json                      |  2 ++
 static/components/HelloWorld2.vue | 21 ------------
 static/components/Message.vue     | 57 +++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 21 deletions(-)
 delete mode 100644 static/components/HelloWorld2.vue
 create mode 100644 static/components/Message.vue

diff --git a/package.json b/package.json
index 6ebbb82e..6476431a 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bootstrap": "^4.4.1",
+    "bootstrap-vue": "^2.12.0",
     "core-js": "^3.6.4",
     "vue": "^2.6.11"
   },
diff --git a/static/components/HelloWorld2.vue b/static/components/HelloWorld2.vue
deleted file mode 100644
index 6e663501..00000000
--- a/static/components/HelloWorld2.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div class="hello">
-    <h3>
-      One Hello World wasn't enough :p
-    </h3>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld"
-};
-</script>
-
-<!-- Add "scoped" attribute to limit SCSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-  background-color: #ff0000;
-}
-</style>
\ No newline at end of file
diff --git a/static/components/Message.vue b/static/components/Message.vue
new file mode 100644
index 00000000..2d22f50a
--- /dev/null
+++ b/static/components/Message.vue
@@ -0,0 +1,57 @@
+<!--
+An alert message using Django or Bootstrap message levels
+
+props:
+  variant: debug, info, success, warning or error
+
+"debug" is mapped to Boostrap secondary color.
+"error" is mapped to Boostrap danger color.
+-->
+
+<template>
+  <b-alert
+    :variant="variant"
+    dismissible
+    show
+    fade
+  >
+    <slot></slot>
+  </b-alert>
+</template>
+
+<!--
+Many modern browsers implement an optimization for <style> tags either cloned
+from a common node or that have identical text, to allow them to share a single
+backing stylesheet. With this optimization the performance of external and
+internal styles should be similar.
+From https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
+
+So it is not a problem to import all Boostrap here.
+-->
+<style lang="sass">
+@import '~bootstrap'
+@import '~bootstrap-vue'
+</style>
+
+<script>
+import Vue from "vue";
+import { BAlert } from "bootstrap-vue";
+Vue.component("b-alert", BAlert);
+
+export default {
+  name: "Message",
+  props: ["tags"],
+  computed: {
+    variant: function() {
+      switch (this.tags) {
+        case "error":
+          return "danger";
+        case "debug":
+          return "secondary";
+        default:
+          return this.tags;
+      }
+    }
+  }
+};
+</script>