Merge pull request #15 from marwanehcine/add_expired_password_alert_m…

…essage Adding alert message for user when password will expire
georchestra · Dec 21, 2023 · 75d16b6 · 75d16b6
2 parents 81df576 + 09427e2
commit 75d16b6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -12,47 +12,34 @@ To include it in an existing application:
 
 1. add a `script` tag pointing to the JS file:
 
-  ```html
-  <script src="https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js"></script>
-  ```
+```html
+<script src="https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js"></script>
+```
 
 2. include the header component:
 
-  ```html
-  <geor-header></geor-header>
-  ```
+```html
+<geor-header></geor-header>
+```
 
 Note: unlike with iframes there is no need to specify a height, the component will decide of its own size and "push" the content around accordingly.
 
 Iframe can still be set with defining `legacy-url` attribute, style can also be set with `legacy-style` attribute :
-  ```html
-  <geor-header legacy-url="myheader.com" legacy-style="width: 100%"></geor-header>
-  ```
-
-Attributes available :
 
-| Attribute     | Description                                                                                          | Example                                                                   | For host | For legacy |
-|---------------|------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------|----------|-----------|
-| lang          | Used to force header language (default value : en)                                                   | `<geor-header lang='de'>`                                                 | v        |           |
-| active-app    | Use this attribute to set the active class in menu                                                   | `<geor-header active-app='console'>`                                      | v        | v         |
-| logo-url      | Use this attribute to set the logo for the new header (not legacy one).                              | `<geor-header logo-url='https://linktomylogo.com'>`                       | v        |           |
-| legacy-header | Use this attribute to enable the legacy header `iframe` tag. Needs `legacy-url`.                     | `<geor-header legacy-header='true' legacy-url="/header/">`                |          | v         |
-| legacy-url    | Legacy URL: if set, activates iframe with src attribute pointing to this URL. Needs `legacy-header`. | `<geor-header legacy-header='true' legacy-url="/header/"></geor-header>`  |          | v         |
-| style         | adds this style to iframe or host tag (if legacy url is not used)                                    | `<geor-header legacy-url="myheader.com" style="width: 100%"></geor-header>` | v        | v         |
-| stylesheet    | allow to add stylesheet for new header                                                               | `<geor-header stylesheet="myfile.css"></geor-header>`   | v        |           |
-
-3. Optional : Override default colors with `stylesheet` attribute : 
-
-```css
-header {
-    --georchestra-primary: #124885;
-    --georchestra-secondary: #83532b;
-    --georchestra-primary-light: #12488540;
-    --georchestra-secondary-light: #83532b40;
-  }
+```html
+<geor-header legacy-url="myheader.com" legacy-style="width: 100%"></geor-header>
 ```
 
-Note: It's important to target the `header` tag here to override the css variables, because of the shadow DOM. 
+Attributes available :
+
+| Attribute     | Description                                                                                          | Example                                                                     | For host | For legacy |
+| ------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------- | ---------- |
+| lang          | Used to force header language (default value : en)                                                   | `<geor-header lang='de'>`                                                   | v        |            |
+| active-app    | Use this attribute to set the active class in menu                                                   | `<geor-header active-app='console'>`                                        | v        | v          |
+| logo-url      | Use this attribute to set the logo for the new header (not legacy one).                              | `<geor-header logo-url='https://linktomylogo.com'>`                         | v        |            |
+| legacy-header | Use this attribute to enable the legacy header `iframe` tag. Needs `legacy-url`.                     | `<geor-header legacy-header='true' legacy-url="/header/">`                  |          | v          |
+| legacy-url    | Legacy URL: if set, activates iframe with src attribute pointing to this URL. Needs `legacy-header`. | `<geor-header legacy-header='true' legacy-url="/header/"></geor-header>`    |          | v          |
+| style         | adds this style to iframe or host tag (if legacy url is not used)                                    | `<geor-header legacy-url="myheader.com" style="width: 100%"></geor-header>` | v        | v          |
 
 ## Development
 

diff --git a/src/auth.ts b/src/auth.ts
@@ -16,12 +16,16 @@ interface WhoAmIResponse {
   GeorchestraUser: {
     roles: KNOWN_ROLES[]
     username: string
+    ldapWarn: boolean
+    ldapRemainingDays: string
   }
 }
 
 export interface User {
   username: string
   anonymous: boolean
+  warned: boolean
+  remainingDays: string
   adminRoles: AdminRoles | null
 }
 
@@ -41,6 +45,8 @@ export async function getUserDetails(): Promise<User> {
       const roles = user.roles
       return {
         username: user.username,
+        warned: user.ldapWarn,
+        remainingDays: user.ldapRemainingDays,
         anonymous: roles.indexOf('ROLE_ANONYMOUS') > -1,
         adminRoles: getAdminRoles(roles),
       }

diff --git a/src/header.ce.vue b/src/header.ce.vue
@@ -31,6 +31,8 @@ const state = reactive({
 
 const isAnonymous = computed(() => !state.user || state.user.anonymous)
 const isAdmin = computed(() => state.user?.adminRoles?.admin)
+const isWarned = computed(() => state.user?.warned)
+const remainingDays = computed(() => state.user?.remainingDays)
 const adminRoles = computed(() => state.user?.adminRoles)
 
 const loginUrl = computed(() => {
@@ -50,8 +52,7 @@ onMounted(() => {
     'eng'
   getUserDetails().then(user => {
     state.user = user
-
-    if (user?.adminRoles?.superUser) {
+    if (user?.adminRoles?.admin) {
       getPlatformInfos().then(
         platformInfos => (state.platformInfos = platformInfos)
       )
@@ -170,6 +171,13 @@ onMounted(() => {
               </li>
             </ul>
           </div>
+          <span class="text-gray-400 text-xs" v-if="isWarned">
+            {{ t('remaining_days_msg_part1') }} {{ remainingDays }}
+            {{ t('remaining_days_msg_part2') }}
+            <a href="console/account/changePassword">{{
+              t('remaining_days_msg_part3')
+            }}</a></span
+          >
         </nav>
       </div>
       <div></div>