### Utility Function to Get Cookie Value

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/scribejava-oauth2/src/main/resources/static/index.html

A helper JavaScript function designed to extract the value of a specific cookie by its name from the document's cookie string. This is particularly useful for retrieving security tokens like XSRF-TOKEN required for authenticated requests.

```javascript
function getCookie(name) {
  var v = document.cookie.match('(^|;) ?' + name + '=(\\[^;\\]\*)(;|$)');
  return v ? v\\[2\\] : null;
}
```

--------------------------------

### Apply Basic Page Styling (CSS)

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/spring-security-oauth2/src/main/resources/static/index.html

This CSS snippet defines basic styles for the page body, setting a 50px margin, and for anchor tags, making them block-level elements with a line-height of 40px to improve the layout of navigation links.

```CSS
body { margin: 50px 50px; } a { display: block; line-height: 40px; }
```

--------------------------------

### Basic CSS Styling for Page Layout

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/scribejava-oauth2/src/main/resources/static/index.html

Provides basic CSS rules to style the body margin and link display for better readability on the login page, ensuring elements are block-level and have consistent line height.

```css
body { margin: 50px 50px; } a { display: block; line-height: 40px; }
```

--------------------------------

### Fetch User Data and Update UI with JavaScript

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/scribejava-oauth2/src/main/resources/static/index.html

Fetches user data from the '/user' endpoint using the Fetch API. It parses the JSON response to extract the username and dynamically updates the page's UI, hiding the login section and showing the welcome message. Includes robust error handling for network or server issues.

```javascript
fetch('/user')
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Something went wrong');
    }
  })
  .then((responseJson) => {
    document.getElementById('name').innerText = responseJson.username;
    document.getElementById('login').style.display = 'none';
    document.getElementById('welcome').style.display = 'block';
  })
  .catch((error) => {
    console.error('Error: ', error);
  });
```

--------------------------------

### JavaScript Dynamic Copyright Year

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/springboot-mockmvc-hsql/src/main/resources/templates/stocklist.html

A small JavaScript snippet embedded in HTML to dynamically display the current year for a copyright notice. This ensures the copyright year is always up-to-date without manual intervention.

```JavaScript
document.write(new Date().getFullYear())
```

--------------------------------

### Fetch Authenticated User Data (JavaScript)

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/spring-security-oauth2/src/main/resources/static/index.html

This JavaScript code fetches user information from the '/user' endpoint. Upon a successful response, it parses the JSON data, updates the 'name' element, hides the 'login' section, and displays the 'welcome' section. It includes error handling for network issues or server errors.

```JavaScript
fetch('/user')
.then(response => {
    if (response.ok) {
        return response.json();
    } else {
        throw new Error('Something went wrong');
    }
})
.then(data => {
    document.getElementById('name').innerText = data.name;
    document.getElementById('login').style.display = 'none';
    document.getElementById('welcome').style.display = 'block';
})
.catch((error) => {
    console.error('Error: ', error);
});
```

--------------------------------

### Perform User Logout with XSRF Token (JavaScript)

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/spring-security-oauth2/src/main/resources/static/index.html

This JavaScript function initiates a user logout by sending a POST request to the '/logout' endpoint. It includes the 'X-XSRF-TOKEN' header, retrieved using the `getCookie` helper function, to ensure security. On successful logout, it updates the UI to show the login section and hide the welcome message. Error handling is included.

```JavaScript
function logout() {
    fetch('/logout', {
        method: 'POST',
        headers: {
            'X-XSRF-TOKEN': getCookie('XSRF-TOKEN')
        }
    })
    .then((response) => {
        if (response.ok) {
            document.getElementById('login').style.display = 'block';
            document.getElementById('welcome').style.display = 'none';
        } else {
            throw new Error('Something went wrong');
        }
    })
    .catch((error) => {
        console.error('Error: ', error);
    });
}
```

--------------------------------

### Vue.js Sortable Stock List Table Component

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/springboot-mockmvc-hsql/src/main/resources/templates/stocklist.html

This HTML snippet demonstrates a Vue.js component for rendering a sortable and filterable table. It uses `v-for` to iterate over data, `@click` for sorting, and dynamic class binding for active columns and sort arrows. The table structure is designed to display stock information.

```HTML
<table> <thead> <tr> <th v-for="key in columns" @click="sortBy(key)" :class="{ active: sortKey == key }"> {{ key | capitalize }} <span class="arrow" :class="sortOrders\[key\] > 0 ? 'asc' : 'dsc'"> </span> </th> </tr> </thead> <tbody> <tr v-for="entry in filteredData"> <td v-for="key in columns"> {{entry\[key\]}} </td> </tr> </tbody> </table>
```

--------------------------------

### Perform User Logout with JavaScript

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/scribejava-oauth2/src/main/resources/static/index.html

Implements a client-side logout function that sends a POST request to the '/logout' endpoint. It includes the XSRF-TOKEN in the headers for security. Upon successful logout, the UI is updated to revert to the login state, hiding the welcome message. Error handling is included for failed logout attempts.

```javascript
function logout() {
  fetch('/logout', {
    method: 'POST',
    headers: {
      'X-XSRF-TOKEN': getCookie('XSRF-TOKEN')
    }
  })
  .then((response) => {
    if (response.ok) {
      document.getElementById('login').style.display = 'block';
      document.getElementById('welcome').style.display = 'none';
    } else {
      throw new Error('Something went wrong');
    }
  })
  .catch((error) => {
    console.error('Error: ', error);
  });
}
```

--------------------------------

### Displaying Remaining Items Count with Pluralization in VueJS Template

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/springboot-todomvc-mysql-vuejs/src/main/resources/templates/todo.html

This snippet demonstrates displaying a count of remaining items and applying a pluralization filter using VueJS templating.

```VueJS
{{ remaining | pluralize }}
```

--------------------------------

### Retrieve Cookie Value by Name (JavaScript)

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/spring-security-oauth2/src/main/resources/static/index.html

This JavaScript helper function extracts the value of a specific cookie by its name from `document.cookie`. It uses a regular expression to match the cookie name and return its corresponding value, or null if not found. This function is essential for retrieving tokens like XSRF-TOKEN for secure requests.

```JavaScript
function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=(\[^;\]\*)(;|$)');
    return v ? v[2] : null;
}
```

--------------------------------

### Displaying Todo Item Title in VueJS Template

Source: https://github.com/hellokoding/hellokoding-courses/blob/master/springboot-examples/springboot-todomvc-mysql-vuejs/src/main/resources/templates/todo.html

This snippet shows how to display the title of a todo item using VueJS data binding syntax within a template.

```VueJS
{{ todo.title }}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.