This repository contains a Vue.js application that demonstrates a simple form submission and management system. The application is built using Vue 2, Vue Router, and Bootstrap Vue. The user can create, edit, and view entries with a title, text, and date. The date can be selected using a datepicker by clicking the calendar icon in the input field.
- Login page with hardcoded username and password validation
- Storage of login data in the browser's localStorage
- Details page, which can only be accessed when the user is logged in
- Form component for creating and editing entries with:
- Title (max. 100 characters)
- Text (max. 300 characters)
- Character count displayed as x/300 for the text field
- Date field with datepicker for easy date selection
- Save button
- List of form entries with title and date, displayed below the form component
- Edit button for each entry, allowing the user to load and edit the entry in the form component
- Automatic update of the corresponding entry in the list when an entry is edited and saved in the form component
- New entries created in the form component are added to the list
- The list of entries is not persisted and will reset when the page is reloaded
To set up the project, follow these steps:
- Clone the repository:
git clone https://github.com/Demidarus/VueProbeAufgabeRyze
- Navigate to the project directory:
cd VueProbeAufgabeRyze
- Install the dependencies:
yarn install
- Start the development server:
yarn serve
- Access the application in your browser at http://localhost:8080.
-
Log in using the hardcoded username and password (e.g., username:
user, password:password). -
Once logged in, you will be redirected to the Details page.
-
Use the form component at the top of the page to create a new entry by filling in the Title, Text, and Date fields, and then click the Save button.
-
The new entry will be added to the list below the form component.
-
To edit an existing entry, click the Edit button next to the entry in the list. The entry data will be loaded into the form component.
-
Make the desired changes and click the Save button. The entry in the list will be updated, and the form component will be cleared.
-
To log out, click the Logout button in the top right corner. You will be redirected to the Login page.
If you'd like to contribute to this project, please feel free to fork the repository, create a new branch for your feature or bugfix, and submit a pull request.
This project is released under the MIT License. See the LICENSE file for details.
yarn install
yarn serve
yarn build
yarn lint