Coder Social home page Coder Social logo

hdap-demo's Introduction

Directory server setup

The app relies on a DS with the evaluation profile and an HTTPS connection handler listening at https://localhost:8443. In the default password policy, turn off the requirement to authenticate over a secure connection.

For example:

unzip -q ~/.m2/repository/org/forgerock/opendj/opendj-server/7.6.0-SNAPSHOT/opendj-server-7.6.0-SNAPSHOT.zip

export DEPLOYMENT_ID=ASIQ8nH5BypHIB7AmmmJZ5VfCVKZXg5CBVN1bkVDAIT3myJF1rRsipI

./opendj/setup \
 --serverId evaluation-only \
 --deploymentId $DEPLOYMENT_ID \
 --deploymentIdPassword password \
 --rootUserDN uid=admin \
 --rootUserPassword password \
 --monitorUserPassword password \
 --hostname localhost \
 --adminConnectorPort 4444 \
 --ldapPort 1389 \
 --enableStartTls \
 --ldapsPort 1636 \
 --httpsPort 8443 \
 --replicationPort 8989 \
 --bootstrapReplicationServer localhost:8989 \
 --profile ds-evaluation \
 --start \
 --acceptLicense

Validating parameters..... Done
Configuring certificates..... Done
Configuring server..... Done
Configuring profile DS evaluation................. Done
Starting directory server.................. Done

To see basic server status and configuration, you can launch
/path/to/opendj/bin/status

In the DS evaluation profile:

Run tests

  1. Make sure DS is running.
  2. Run the demo app:
    npm run dev
    
  3. Run the tests:
    npm run test
    

(What follows is the original content of this file.)

This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.

❗️ Important Links

💿 Install

Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:

Package Manager Command
yarn yarn install
npm npm install
pnpm pnpm install
bun bun install

After completing the installation, your environment is ready for Vuetify development.

✨ Features

  • 🖼️ Optimized Front-End Stack: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. Vue 3 | Vuetify 3
  • 🗃️ State Management: Integrated with Pinia, the intuitive, modular state management solution for Vue.
  • 🚦 Routing and Layouts: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. Vue Router | vite-plugin-vue-layouts
  • Next-Gen Tooling: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). Vite
  • 🧩 Automated Component Importing: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. unplugin-vue-components

These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.

💡 Usage

This section covers how to start the development server and build your project for production.

Starting the Development Server

To start the development server with hot-reload, run the following command. The server will be accessible at http://localhost:3000:

yarn dev

(Repeat for npm, pnpm, and bun with respective commands.)

Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node v21.3.0 or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.

Building for Production

To build your project for production, use:

yarn build

(Repeat for npm, pnpm, and bun with respective commands.)

Once the build process is completed, your application will be ready for deployment in a production environment.

💪 Support Vuetify Development

This project is built with Vuetify, a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our sponsors and backers. If you are interested in supporting this project, please consider:

📑 License

MIT

Copyright (c) 2016-present Vuetify, LLC

hdap-demo's People

Contributors

markcraig avatar matthew-swift avatar

Watchers

 avatar  avatar Allan Denis avatar

hdap-demo's Issues

Allow and save column selection for search results

As a user, I'd like to be able to choose the columns to display in the search results table, and I'd like the app to remember my choice.

The column names to select could be taken from the attribute type names in actual search results.

UI fails to reset breadcrumbs sometimes

The UI sometimes doesn't reset breadcrumbs, so you can end up with Home / Search / View, for example, although Search and View are not both in the URL path.

To reproduce, do a basic search for test and click the link to the first resource in the results:

image

Limit the number of search results requested

By default, the DS time-limit is 60 seconds and the size-limit is 1000 entries. 1000 entries in a UI with a default page size of 10 means 100 pages, more than a human would be expected to browse through.

Search should limit the number of results to avoid exceeding the size-limit setting. If the number of results exceeds the size-limit, display a message to the user indicating their search exceeded the size-limit. (For extra credit, show the estimated number of results.)

The search matching more than 1000 entries should not display results. Instead, the message should tell the user to refine their search to return fewer entries.

Preserve search when navigating away and back again

As a user I'd like to search, view one of the results, navigate to the previous page in my browser, and find my search terms and results right there again.

If I actively reset the search terms or log out, then the search page should be blank again when I next navigate to it. If my session (JWT) expires, but I haven't actively logged out, it would nice to preserve the search state.

Advanced search

Basic search uses a hard-coded filter and subtree search from the root DN ("").

Advanced search lets you:

  • Write your own filter
  • Set the base path (base DN)
  • Choose the scope
  • Set the fields to return
  • Request operational attributes

Is _countOnly useful in this UI?

Alert the user to authenticate as necessary

  • When attempting to authenticate with an expired JWT, HDAP responds with HTTP 401 and requests HTTP Basic auth, causing the browser to pop up a dialog prompting for username and password. It would be better to notice the expiration, proactively remove the persisted JWT, and alert the user.
  • On HTTP 401 or HTTP 403 responses from HDAP, alert the user.

Add breadcrumbs

It would be nice to have breadcrumbs as an additional navigation option in the HDAP UI.

Examples:

  • Home (path: /)
  • Home / Search (path: /search)
  • Home / View / dc=com/dc=example / ou=people / uid=bjensen (path: /view/dc=com/dc=example/ou=people/uid=bjensen
  • Home / View (path: /view/)

Perhaps this component could show up in the app bar.

Add tests for components

The UI components need automated tests. At present, this means testing:

  • Login
  • Logout
  • Basic search
  • Reading entries (/view/.*)

Advanced search doesn't show hints when the request is broken

It's pretty easy to create a broken hand-written query filter. Unfortunately, the advanced search UI doesn't communicate the hints from HDAP when the request is broken. You must instead go rummaging around in the developer tools:

image

The UI should show the user the response when the request fails.

CC @allandenis38

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.