louiiuol / jar-it

🤭 Turn those nasty habits on occasion to support associations you care about! 👐

Web developer fullstack TS, passioned by UX design 🎨

🚀 Confirmed Web developer that loves to design and develop all sort of web projects ! Mainly working on Javascript and Typescript, I like to discover in depth the new features of my favorite framework: angular. I'm probably solving problems on codewars or designing various UI on codepen 💡

Main languages & frameworks 🕹

---

⬇️ Check my repositories below ⬇️

jar-it's Issues

[JAR-07] Profile

Display user profile & update informations

AS Maria , basic user
I WANT TO view my profile
SO THAT I CAN visualize or update user's information

Functional specifications (VIEWS)

Form rules:

Field	Placeholder	Pattern	Required	Constraints
username	username	alpha-numeric	✓	size(6-12) - unique
email	[email protected]	email	✓	size(?-60) - unique - email
birth date	min majority date	Date	✓	must be adult
avatar	"unknown" picture	icon-picker	✓	must be contains in avatars' list
password	*******	alpha-numeric	✓	size(6-20) StrongPassword*
confirm password	*******	alpha-numeric	✓	"password" must match
usage terms	unchecked	slider-toggle	✓	must be checked

StrongPassword*: the input must contains at leat 1 upper & 1 lower character, and 1 digit

Acceptance criteria

• Reset button will reset input value to their inital values
• Update button must update user's informations* if they have changed
• Close user's account*
• If no errors occurred, updated values will be replaced in the display
• If some errors occurred, the form is reset to previous values

*must be confirmed by a password re-typing

CI Test Node.js not working

Describe the bug

Tests are not working because karma configuration is not set to work in CI environement => plugins are required

To Reproduce

Simply see last action launched here: https://github.com/louiiuol/swear-tin/runs/678816070?check_suite_focus=true

Expected behavior

Tests should be running as they would in local environnement

Actions needed

karma.conf.js must be update with Github modules
=> Cause problems on local environnement
=> Research needed to fix tests in both env

[US] Display Jar as "Active"

Display Jar as "Active"

Context

THE USER IS on a specific jar's view

---

User Story

AS Lucas , member of the jar

I WANT TO access Jar's "active" view

SO THAT I CAN visualize the evolution of the jar

---

Functional specifications (VIEWS)

The card will display multiple blocks described below:

Jar Settings

This block is composed of:

• remaining days
• association addressee
• current jar balance

Confess

This block is composed of:

• text introducing confession part: "What did you sworn about ?"
• simple button "confess"

History

This block is composed of:

• Timeline of swears confessed in the Jar

Members

This block is composed of:

• List of members with the length of their confessions and their current balance.

[JAR-12] Create new Jar

Jar Creation form

AS Lucas , Manager (logged user)
I WANT TO create new Jar
SO THAT I CAN motivate my team to stop swearing

Functional specifications (FORM)

Creating a Jar is a bit complex, so a multi-part form is required. It will be split into 4 sections:

General Informations

This section will resume Jar's title and description

Field	Placeholder	Pattern	Requirements
title	" Clean Workspace "	alphanumeric	size(1-20)
description	" Why this place ? "	alphanumeric	max(250)

Settings

This section will resume Jar's settings

Field	Placeholder	Pattern	Requirements
reference cost	1	numeric	size(0,1-2)
max amount	50	numeric	size(10-100)
end date	now() + 2 weeks	date	date(1week-2month)
association	" choose your association "	select	exist in association list

Members

This section will resume Jar's members & their privileges

Field	Placeholder	Pattern	Requirements
members	-	array of User	creator must be present

Confirmation

This section will resume Jar's settings and members chosen

Field	Placeholder	Pattern	Requirements
agree	unchecked	checkbox	checked

Acceptance Criteria

• Forms will be wrapped in single modal
• "x" icon button will close modal when clicked
• If some inputs are invalid, or the confirmation checkbox is not checked, the CREATE button will be disable
• If no errors occurred, the user will be redirected to their dashboard, with new Jar added
• If some errors occurred, notification will resume error messages

[JAR-08] Admin Board

Admin management board

AS Lucas, admin of the website
I WANT TO access my admin-board
SO THAT I CAN manage the application

Functional specifications (VIEWS)

This page will be the entry point for the entire website management. It will be composed of one simple card with sections managing & monitoring different aspects the website: users, jars, associations ..

Acceptance Criteria

• After clicking on the "admin board" link in the navbar's dropdown, user will be redirected to '/admin' and the admin management board will diplay
• The access to this board must be restricted to admin only

[JAR-13] Display User's Jars preview

Display User's Jars preview

Context

THE USER IS on his dashboard

---

User Story

AS Lucas , basic user

I WANT TO visualize all Jars which I'm member

SO THAT I CANsee their progressions, and open details on a specific one

---

Functional specifications (VIEWS)

The "Jar board" will be composed of 2 main sections:

Filters

This block is composed of:

• Filters to display Jars according to specific conditions (author, start_date, amount)
• a button (on the right) to open a modal to create new Jar

Jars view

This block is composed of:

• Cards, which represent a JarPreview, displayed in flex rows.

[JAR-03] Register

Register new account

AS Maria, basic user
I WANT TO register a new account
SO THAT I CAN create an account and access my dashboard view

Functional specifications (FORM)

After discovering the features of the projet, Maria clicked on the link "doesn't have an account yet ?" on LOGIN section. This form must allow every new coming users to be able to easily create their own account and start using application.

Form rules:

Field	Placeholder	Pattern	Required	Constraints
username	username	alpha-numeric	✓	size(6-12) - unique
email	[email protected]	email	✓	size(?-60) - unique - email
birth date	min majority date	Date	✓	must be adult
avatar	"unknown" picture	icon-picker	✓	must be contains in avatars' list
password	*******	alpha-numeric	✓	size(6-20) StrongPassword*
confirm password	*******	alpha-numeric	✓	"password" must match
usage terms	unchecked	slider-toggle	✓	must be checked

StrongPassword*: the input must contains at leat 1 upper & 1 lower character, and 1 digit

Acceptance criteria

• the submit button will be disable until all fields are valid
• The spinner loader must appear during HTTP transfers to indicate the attempt of creation.
• If an error occurred, the inputs highlight in red and the error message will show in a notification explaining which input is wrong.
• If no errors occurred, the user is redirected to dashboard view without further confirmation

[JAR-05] Navbar & Footer

Sticky responsive navbar

AS Maria, basic_user,
I WANT TO see a navbar that enable me to access my quick links
SO THAT I CAN have easier navigation on the app

Functional specifications (VIEWS)

The navbar is composed of 2 main elements: the logo & the user's avatar

• Logo will stick to the left of the screen.
• the user's menu, shown only when logged, will stick to the right
• navigation menu will remains fixed on the top of the user's display
• On mobile, no responsive is needed, expect perhaps resizing images.

Logo

Simple JarIt's logo redirecting to the dashboard view.

User menu (only for logged in users)

• User's avatar clickable which toggles the following links:

• Dashboard

• User profile

• Admin Board (if the user is admin)

• Disconnect (log out & redirect to homepage)

• Dropdown title will remind the username of the logged user

[US] Display Jar as "Created"

Display Jar as "Created"

Context

THE USER IS on his swear jar

---

User Story

AS Lucas , admin of the jar

I WANT TO update Settings & members

SO THAT I CAN customize tthe jar according to my needs

---

Functional specifications (VIEWS)

When the Jar has been created, it is available with a specific view.

Global informations

This block is composed of:

• remaining days
• swears available
• members length
• association addressee

Activate Jar

This block is composed of:

• Text explaining the state of the Jar
• Button to activate the Jar

Update members

This block is composed of:

• large input with current members as value. User can add members thanks to the autocomplete
• Button to update members

---

Functional specifications (FORM)

Loading task

[...]

Success

If no errors occurred, [...]

Error

If some errors occurred, [...]

Form rules (update Settings)

Field	Placeholder	Pattern	Requirements
title	current jar's title	text	required

[JAR-09] Create new Association

Create new association (as Admin only)

AS Louis, main admin
I WANT TO create easily new association
SO THAT I CAN populate my database directly from the user interface

Functional specifications (VIEW)

Form rules

Field	Placeholder	Pattern	Requirements
NAME	" association name "	text	required - max(40) - unique
CODE	" association unique code "	letter	required - max(5) - unique
DESCRIPTION	" Provide a description "	text	max(255)
LINK	" Provide a donation link "	url	required

Acceptance Criteria

• Association code & name must be unique
• If no errors occurred, the modal will close, and the created association is added to 'association-office' component view table
• If some errors occurred, the modal will stay open, and the snack bar will show all errors returned by API

Upgrade Test Coverage for UI and API

Renaming project

Description

This is not a bug, but a naming recomandation for the project following some reactions to e.tin name which doesn't appears to be clear enough.

• In order to fix this ambiguity, the project will be renamed as Jar it

• TAll references to the swearing box will be named as jar to keep consistency.

Exception Handler not triggered correctly

[JAR-06] Dashboard

Display user's dashboard

AS Maria , basic user
I WANT TO access dashboard
SO THAT I CAN visualize my jars OR create a new one

Functional specifications (VIEWS)

This section will evolve: this is the root start for every user functionalities that will be brought later on.

Acceptance Criteria

• Clickable "+" icon will open a modal to create new jar
• on mobile, this button will be displayed on bottom of screen
• Main board must contain logged user's jars previews

[JAR-10] Display Associations

Association Office

AS Louis, main admin
I WANT TO visualize all association
SO THAT I CAN eventually update /delete association or just check their informations

Functional specifications (VIEWS)

Associations will be displayed through a data table:

Acceptance Criteria

• Clickable "+" icon will open modal to create new association
• Table headers will be the following: ID | NAME | CODE | DESCRIPTION | LINK | EDIT | DELETE
• data can be sorted by clicking on headers
• paginator will customize size of displayed associations (5-10-25-50)
• The last 2 columns will display 'edit' and 'delete' button as icons
• clicking on 'link' icon will open new tab with association website
• clicking on 'delete' will remove the association from database and list

Handdle errors with proper message text

Project Skeleton

Project Skeleton

Describes both API and UI technical Stack:

API

Dependencies

• spring starter web
• spring security oauth2
• cache (hibernate)
• devtools
• jpa
• jUnit
• ModelMapper/Jackson

Init Process

Beans

• Implement BCryptPasswordEncoder()
• Implement corsFilter()
• Implement modelMapper()
• Define scanBasePackages

Basic Config

• Define application.properties
• Define data.sql
• Define schema.sql
• Implement logback-spring.xml
• Implement ControllerAdvice()

WEB

Dependencies

"@angular/animations": "~9.1.0",

"@angular/cdk": "^9.2.0",

"@angular/common": "~9.1.0",

"@angular/compiler": "~9.1.0",

"@angular/core": "~9.1.0",

"@angular/forms": "~9.1.0",

"@angular/material": "^9.2.0",

"@angular/platform-browser": "~9.1.0",

"@angular/platform-browser-dynamic": "~9.1.0",

"@angular/router": "~9.1.0",

"@angular/service-worker": "~9.1.0",

"ng2-cookies": "^1.0.12",

"rxjs": "~6.5.4",

"tslib": "^1.10.0",

"zone.js": "~0.10.2"

Settings

• update angular router
• update jasmine
• update karma
• update protractor

[JAR-01] Starting point

Authentication & Authorization

A secured application is requested, so will be the following features:

Server API

• Stateless connection between API and users
• user registration and authentication
• JWT token & OAuth Environment

• Add class AuthorizationServerConfig
• Add class RessourceServerConfig
• Add class WebSecurityConfig
• Add class SecurityHelper
• Add class UserDetails

Web Application

• token stored in cookies
• Management of users views and permissions

• Add ng2-cookiemodule
• Implement JWT Services and Interceptors
• Implement AuthGards

[JAR-04] Login

Log in

AS Maria, basic user
I WANT TO log into my account
SO THAT I CAN use features provided by the app

Functional specifications (FORM)

This form enables users to log into their account quickly.

Form rules:

Label	Placeholder	Pattern	Requirements
username	"username"	alpha-numeric	username exist
password	"**********"	alpha-numeric	password match

Acceptance Cirteria

• A clickable 'eye' icon will toggle input visiblity (*** / clear password)
• the submit button will be disable until all fields are valid
• If no errors occurred, the user will be redirected to the dashboard
• If the username is unknown or the password is invalid, a notification will be displayed with the message: "These credentials doesn't seems right ... please check them again !"
• If a problem occured on the server side, another notification will be displayed: "Seems like server is down, try again later ..."

[JAR-02] Homepage

Display Homepage

AS Maria, basic user
I WANT TO access the Homepage
SO THAT I CAN learn more about this site and register OR simply login

Functional specifications (VIEWS)

The view is composed of 2 main blocks:
On mobile those two sections will be above each other but will display side by side on a desktop display, as describes in the following wireframes:

Presentation

• headtitle:
• "The first electronic Swear Tin !" ('electronic' must be colored pink to highlight it)
• subtitles:
• "Turn those nasty habits on opportunities to support associations you care about"
• "Create a peacefull and friendly environment around you"
• "Challenge yourself and the others to be aware of your daily swears"

Login/ Register

• 2 conditional forms: login & register.
• By default, the login form is displayed.
• If the user clicks on "You don't have an account yet?", view toggles on the registration form.