update

src/config.pug

@@ -0,0 +1,3 @@
+//- var sdn = process.env.SDN || 'http://127.0.0.1:8000'
+- var sdn = process.env.SDN || 'https://test-paris.happy-dev.fr'
+- var cdn = process.env.CDN || 'https://cdn.happy-dev.fr'

src/header.pug

@@ -0,0 +1,17 @@
+#button-toggle
+#logo
+  img(src="/images/logo.png" width=111 height=32)
+
+#search-bar
+  div
+    input#search-input(type='search')
+    i#search-icon.icon-magnifier(aria-hidden='true')
+    i#close-search-icon.icon-close(aria-hidden='true')
+
+#notification
+
+#profile
+  img(src="/images/user.png" width=43 height=43)
+  span
+    | Sophie
+    span.icon-arrow-down

src/page-group-chat.pug

@@ -0,0 +1,2 @@
+#group-chat.chat-view(bind-resources)
+  sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources)

src/page-group-create.pug

@@ -0,0 +1,7 @@
+#group-create
+  sib-form(
+    data-src=`${sdn}/channels/`, 
+    range-owner=`${sdn}/members/`, 
+    widget-members='sib-form-multiple-dropdown', 
+    range-members=`${sdn}/members/`
+  )

src/page-group-edit.pug

@@ -0,0 +1,7 @@
+#group-edit
+  sib-form(
+    range-owner=`${sdn}/members/`,
+    widget-members='sib-form-multiple-dropdown',
+    range-members=`${sdn}/members/`,
+    bind-resources
+  )

src/page-group-profile.pug

@@ -0,0 +1,36 @@
+script.
+  document.addEventListener('WebComponentsReady', function(event) {
+    class HDAppMember extends SIBWidget {
+      get template() {
+        return `
+          <div name="${this.name}">
+            <img src="${this.value.avatar}"/>
+          </div>
+        `;
+      }
+
+      render() {
+        store.get(this.value).then( (value) => {
+          this._value = value;
+          this.innerHTML = this.template;
+        });
+      }
+    }
+    customElements.define("hdapp-member", HDAppMember);
+  });
+
+#group-profile
+  sib-display(
+    data-fields='name, description, owner', 
+    widget-owner='hdapp-member', 
+    bind-resources
+  )
+  h2.section.skills Participants
+  sib-display(
+    id-suffix='members',
+    data-fields='avatar, user',
+    widget-avatar='sib-display-img',
+    widget-user='hdapp-userinfo',
+    bind-resources
+  )
+

src/page-group.pug

@@ -0,0 +1,18 @@
+sib-router#group-router(default-route='group-chat')
+  sib-route(name='group-chat')
+    div Chat
+  sib-route(name='group-profile')
+    div Info
+  sib-route(name='group-edit')
+    div Éditer
+  sib-route(name='group-create')
+    div Nouveau
+#network-views-container
+  #group-chat
+    include page-group-chat.pug
+  #group-profile
+    include page-group-profile.pug
+  #group-edit
+    include page-group-edit.pug
+  #group-create
+    include page-group-create.pug

src/page-groups.pug

@@ -0,0 +1,7 @@
+#groups
+  sib-display#groups-list(
+    data-src=`${sdn}/channels/`, 
+    data-fields='name, description', 
+    search-fields='name, description', 
+    next='group'
+  )

src/page-member.pug

@@ -15,4 +15,3 @@ sib-router#member-router(default-route='member-chat')
       include page-member-profile.pug
     #member-edit
       include page-member-edit.pug
-mucreokyordoriptyis7

src/styles/content.scss

@@ -1,7 +1,6 @@
 // job offers
 #offers-list {
   > div {
-    display: none;
     > sib-display {
       display: block;
       margin: 1em 0;
@@ -11,13 +10,42 @@
       &:nth-child(odd) {
         background-color: $color-white;
       }
-      sib-display-div[name=title]{
+      sib-display-div[name='title'] {
         display: block;
-        @extend h1;
+        @extend h2;
-        background-color: red;
+      }
+      label {
+        display: none;
+      }
+      hdapp-author {
+        ul {
+          @include list-reset();
         }
       }
     }
+  }
+}
+
+// skills
+sib-display-lookuplist[name='skills'] {
+  ul,
+  li {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -0.25em;
+  }
+  li {
+    padding: 0.5em 1em;
+    border: 1px solid;
+    border-radius: 0.25em;
+    margin: 0.25em;
+  }
 }
 
 // chat
@@ -32,7 +60,6 @@
   }
 }
 
-
 .members-list-condensed {
   display: block;
   img {
@@ -53,10 +80,9 @@
   }
 }
 
-
 // member-profile && member
 sib-display#member-info,
-#profiles-list>div>sib-display{
+#profiles-list > div > sib-display {
   display: block;
   position: relative;
   background-color: $color-white;
@@ -92,4 +118,3 @@ sib-display#member-info,
     grid-gap: 1em;
   }
 }
-

src/styles/form.scss

@@ -0,0 +1,35 @@
+//button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
+
+
+sib-form{
+  form{
+    margin: -.5em;
+    >*{
+      margin: .5em;
+    }
+  }
+
+  // text like
+  input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=file]):not([type=hidden]):not([type=image]):not([type=radio]):not([type=range]):not([type=reset]):not([type=submit]){
+    padding: 0.5em;
+    border: none;
+    @extend %shadow;
+  }
+  
+  // button like
+  button,
+  input[type=button],
+  input[type=color],
+  input[type=file],
+  input[type=reset],
+  input[type=submit]{
+    padding: 0.5em 1em;
+    border: none;
+    background-color: $color-yellow;
+    border-radius: 100em;
+  }
+
+  input[type="reset"]{
+    display: none;
+  }
+}

src/styles/index.scss

@@ -9,6 +9,6 @@
 @import 'form';
 @import 'content';
 
-@import 'members';
+// @import 'members';
 @import 'menu';
 

src/styles/members.scss

@@ -0,0 +1,222 @@
+
+// members
+%img-circle {
+  $width: 55%;
+  display: block;
+  position: relative;
+  width: $width;
+  padding-bottom: $width;
+  height: 0;
+  margin: 2em auto;
+  img {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+}
+
+%member {
+  sib-display-img {
+    @extend %img-circle;
+  }
+  display: block;
+  position: relative;
+  background-color: $color-white;
+  @extend %shadow;
+  padding: 0.5em;
+  cursor: pointer;
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: scale3d(0, 0, 1);
+    transition: transform 0.3s ease-out 0s;
+    background: #eac1;
+    content: '';
+    pointer-events: none;
+  }
+
+  &::before {
+    transform-origin: left top;
+  }
+
+  &::after {
+    transform-origin: right bottom;
+
+    background: #ace1;
+  }
+
+  &:hover,
+  &:focus {
+    &::before,
+    &::after {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+}
+
+#profiles-list {
+  display: block;
+  div[name='header'] {
+    border-top: 2em solid $color-grey-light;
+    border-bottom: 1px solid $color-grey-light;
+    padding-bottom: 1em;
+    margin: -0.5em;
+    padding: 0.5em;
+    margin-bottom: 1em;
+    text-align: center;
+  }
+
+  > div {
+    display: grid;
+    margin-top: 1em;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 1em;
+    label {
+      display: none;
+    }
+
+    > sib-display {
+      @extend %member;
+    }
+  }
+
+  hdapp-userinfo {
+    display: block;
+    color: $color-black;
+    font-size: 1.1em;
+    margin: 0.5em;
+    ul,
+    li {
+      display: block;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  }
+
+  div[name='pseudonym'] {
+    font-size: 0.8em;
+    div {
+      display: inline;
+    }
+  }
+}
+
+
+// member
+%detail-section {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+#member-chat {
+  #conversejs {
+    margin: none;
+  }
+}
+#member-info {
+  background-color: $color-white;
+  padding: 1em;
+  @extend %shadow;
+}
+
+#profiles-list,
+#member-info {
+  img {
+    display: block;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  div[name='name'] {
+    @extend %detail-section;
+    padding-top: 10px;
+  }
+
+  div[name='name'],
+  div[name='location'] {
+    display: flex;
+  }
+}
+
+#member-detail {
+  #member-info {
+    sib-display-mailto,
+    sib-display-tel {
+      display: block;
+    }
+
+    a[name='email'],
+    a[name='number'] {
+      &::before {
+        font-family: FontAwesome;
+        padding-right: 4px;
+        color: black;
+      }
+    }
+    a[name='email'] {
+      &::before {
+        content: '\f0e0';
+      }
+    }
+    a[name='number'] {
+      &::before {
+        content: '\f10b';
+        font-size: 22px;
+        padding-left: 3px;
+        padding-right: 7px;
+      }
+    }
+  }
+
+  .section {
+    position: relative;
+
+    h2 {
+      @extend %detail-section;
+      margin-top: 40px;
+    }
+  }
+
+  #member-skills {
+    display: flex;
+    flex-wrap: wrap;
+
+    sib-display {
+      display: block;
+      background-color: $color-black;
+      color: $color-white;
+      border-radius: 100px;
+      padding: 3px 10px;
+      margin-bottom: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+
+@include media('width>phone') {
+  #member-detail {
+    #member-info {
+      sib-display-img {
+        display: block;
+        float: right;
+        width: 300px;
+      }
+    }
+  }
+}
+
+#member-info {
+  @extend %member;
+}

www/.htaccess

@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule \. - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>

www/oidc-client-config.json

@@ -0,0 +1,11 @@
+{
+  "authority": "https://test-paris.happy-dev.fr/openid/",
+  "client_id": "125356",
+  "redirect_uri": "https://staging-app.happy-dev.fr",
+  "response_type": "id_token token",
+  "scope": "openid profile email",
+  "automaticSilentRenew": true,
+  "silent_redirect_uri": "https://staging-app.happy-dev.fr",
+  "loadUserInfo": true
+}
+