From 7e75aba8244080517ad2da8e08c5d49ae7870a74 Mon Sep 17 00:00:00 2001
From: ncastejon <castejon.nicolas@gmail.com>
Date: Fri, 3 May 2019 14:27:54 +0200
Subject: [PATCH] Convert wiki posts to .md files
---
beta-deployment => beta-deployment.md | 0
gitflow-ci-cd.md | 56 +++++++
sass-recommandation.md | 51 ++++++
vscode-settings.md | 33 ++++
webapp-auth.md | 232 ++++++++++++++++++++++++++
5 files changed, 372 insertions(+)
rename beta-deployment => beta-deployment.md (100%)
create mode 100644 gitflow-ci-cd.md
create mode 100644 sass-recommandation.md
create mode 100644 vscode-settings.md
create mode 100644 webapp-auth.md
diff --git a/beta-deployment b/beta-deployment.md
similarity index 100%
rename from beta-deployment
rename to beta-deployment.md
diff --git a/gitflow-ci-cd.md b/gitflow-ci-cd.md
new file mode 100644
index 0000000..1700478
--- /dev/null
+++ b/gitflow-ci-cd.md
@@ -0,0 +1,56 @@
+## Initialize a projet
+
+* Create a new projet in gitlab a take note of its url
+
+### Protecting the master branch
+On the gitlab page of your project go to *Settings/Repository* in the *Protected Branches* section.
+
+Select the **Master** branch and set *allow to merge* to **Masters** and *allow to push* to **No one**
+
+This will prevent anyone to push on the master branch, the only way to add code to the branch will be using merge requests.
+
+### Setting the development branch
+* Retrieve the project on your computer, open a command line and execute.
+```
+git clone <your-project-url>
+```
+
+* Create the development branch
+```
+git checkout -b development
+```
+
+* Init your Angular, Nest or any other project and then any time you want to commit changes
+```
+git add .
+git commit -m "Commit changes"
+git push origin development
+```
+
+## Start developments
+For any other development you should/must create branch from the development branch.
+
+First make sure to be on the *development* branch, you can use to see your current branch:
+```
+git branch
+```
+### Working on a feature
+In our team organisation we are using IceScrum to keep track of our User Stories (US). Each US is identified by a number. In order to easily identify the commit that includes the US a branch name for a feature should be has a following *feature-\<number of the User Story\>-\<title_of_the_user_story\>*.
+
+You can create the branch executing:
+```
+git checkout -b feature-<number of the User Story>-<title_of_the_user_story>
+```
+
+### Working on a bug fix
+Each bugfix branch should be named as the following *bugfix-\<title_of_the_bugfix\>*.
+
+You can create the branch executing:
+```
+git checkout -b feature-<number of the User Story>-<title_of_the_user_story>
+```
+
+
+**add tag**
+git tag -a 1.0.0 -m "complementary message"
+```
\ No newline at end of file
diff --git a/sass-recommandation.md b/sass-recommandation.md
new file mode 100644
index 0000000..05a2cc2
--- /dev/null
+++ b/sass-recommandation.md
@@ -0,0 +1,51 @@
+# Good practices CSS/SASS
+
+## Naming convention
+Many exist, but we should look for [SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)
+
+## Code formatting
+Two tools are usually used for having a clean and nice organized code across all the applicaiton:
+* a style linter: here the suggestion is [stylelint](https://stylelint.io/)
+* a code formatter: for example [Prettier](https://prettier.io/)
+
+From here we can set some rules inside the IDE to keep the code clean: *format on save* setting, or a *pre-commit hook* that validates the code.
+The main issue here is that sometime is difficult to put settings between the linter and the formatter that work together.
+
+## Responsiveness
+
+#### Use REM instead pixel
+One popular technique (there is a lot of discussion about it. The choice is yours):
+
+It's all about changing the `font-size` for the html element to 62.5%.
+```css
+html {
+ font-size: 62.5%
+}
+```
+The reason is that the default `font-size` for browser is usually `16px`. It means now inside your application `1rem` will be equal to 10px. This will help for the readability and maintainability of your code.
+
+#### For mobile
+* Increase the `font-size` on mobile
+* Decrease or remove the paddings and margins
+
+## REM vs EM spacing
+It has to be considered case by case. But *in general*:
+* `rem` is more applied for **horizontal spacing**
+* `em` is more applied for **vertical spacing**
+
+## Random things about SVG
+* when you create a SVG, make it from the most small version you will use inside the website
+* one tool to optimize your SVGs: [SVGOMG](https://jakearchibald.github.io/svgomg/)
+* if your SVG has some blurry, probably your paths are not enough specifics
+
+## Some questions
+* animation on `height:auto` element:
+You are screwed :) . There is no miracle solution. Here you can find on this [CSS Tricks article](https://css-tricks.com/using-css-transitions-auto-dimensions/)
+
+* multiline text ellipsis:
+here it's even worse. there is no suitable solution !
+
+* `display:flex`: is it possible to use it everywhere ?
+This has changed the way to use CSS, so no hesitation. The Flex main bugs are listed in this [Github page](https://github.com/philipwalton/flexbugs) if you find yourself with some issues.
+
+*
\ No newline at end of file
diff --git a/vscode-settings.md b/vscode-settings.md
new file mode 100644
index 0000000..24c8bd3
--- /dev/null
+++ b/vscode-settings.md
@@ -0,0 +1,33 @@
+## User settings
+To add in the **settings.json** of Vscode IDE:
+
+```
+{
+ "editor.snippetSuggestions": "top",
+ "editor.tabSize": 2,
+ "editor.formatOnSave": true,
+ "diffEditor.ignoreTrimWhitespace": false,
+ "window.zoomLevel": 0,
+ "gitlens.advanced.messages": {
+ "suppressShowKeyBindingsNotice": true
+ },
+ "breadcrumbs.enabled": true,
+ "workbench.settings.editor": "json",
+ "typescript.updateImportsOnFileMove.enabled": "always",
+ "css.validate": false,
+ "less.validate": false,
+ "scss.validate": false,
+ "stylelint.enable": true,
+}
+```
+
+## Some important plugins to install
+* stylelint
+* Beautify
+* TSLint
+* Angular Language Service
+
+## Beautify (formatter) & stylelint (linter) settings
+The rules of these are inside 2 files at the root of the project: .stylelintrc and .jsbeautifyrc.
+
+
diff --git a/webapp-auth.md b/webapp-auth.md
new file mode 100644
index 0000000..b6175cb
--- /dev/null
+++ b/webapp-auth.md
@@ -0,0 +1,232 @@
+The aim of the diagram is not to document each endpoint (this is the role of the swagger provided by the services).
+
+It's goal is to have a global vision of the exchanges made between the Angular App (front) and the services, and among the services themselves for each functionality related to the authentication and the authorization.
+
+```plantuml
+
+!define BLACK #333745
+!define RED #d5232a
+!define GREEN #37A77C
+
+' Base Setting
+skinparam BackgroundColor transparent
+
+skinparam Sequence {
+ ArrowThickness 1
+ ArrowColor RED
+ LifeLineBorderColor GREEN
+ ParticipantBorderThickness 1
+}
+skinparam Participant {
+ BackgroundColor #FFFFFF
+ BorderColor BLACK
+ FontColor BLACK
+}
+
+skinparam note {
+ BackgroundColor #FFFFFF
+ BorderColor BLACK
+ FontColor BLACK
+}
+
+participant "Front" as front
+participant "Authentication Service" as auth
+participant "Middleware Legacy Auth" as middle
+participant "Legacy Auth (Neogeo)" as django
+participant "Email Service" as email
+participant "Kong" as kong
+participant "OIDC Server" as oidc
+
+group Authentication with OIDC providers
+ group Login
+ front -> auth : <b>GET</b> /login/:identityProvider
+ note over auth: Set redis key/value with Provider as value
+ front <-- auth : [302] redirection to the appropriate url
+ end
+
+ group Exchange token against JWT
+ front -> auth : <b>GET</b> /token
+ note over auth: Get redis value corresponding to the OIDC Provider
+ auth -> oidc : <b>POST</b> /token_endpoint
+ auth <-- oidc : { id_token, access_token }
+ auth -> oidc : <b>GET</b> /userInfo_endpoint
+ auth <-- oidc : { userInfo }
+ auth -> kong : <b>PUT</b> /consumers/:email
+ auth <-- kong : Ok
+ auth -> kong : <b>GET or POST</b> /consumers/:email/jwt (POST if no creadetials exist for this user)
+ auth <-- kong : { credentials }
+ front <-- auth: { token: jwt }
+ end
+
+ group Logout
+ front -> auth : <b>GET</b> /logout
+ front <-- auth : [302] redirection to the appropriate url
+ end
+end
+
+group Authentication with Django Server
+ group Get Public Key
+ front -> middle : <b>GET</b> /publicKey
+ front <-- middle : { publicKey }
+ end
+
+ group Legacy login
+ front -> auth : <b>POST</b> /login/legacy
+ auth -> middle : <b>POST</b> /user/login
+ middle -> django : <b>POST</b> /get_user/
+ middle <-- django : { userInfo }
+ middle --> auth : { userInfo with encrypted password as authzKey}
+ auth -> kong : <b>PUT</b> /consumers/:email
+ auth <-- kong : Ok
+ auth -> kong : <b>GET or POST</b> /consumers/:email/jwt (POST if no creadetials exist for this user)
+ auth <-- kong : { credentials }
+ front <-- auth : { token: jwt }
+ end
+
+ group Password forgotten
+ front -> middle : <b>POST</b> /passwordForgotten
+ note over middle: Set token in Redis with ttl 24h.
+ middle -> email : <b>POST</b> /email/send (body contains the link to the reset password form)
+ middle <-- email : void
+ front <-- middle : void
+ end
+
+ group Verify Password reset token validity
+ front -> middle : <b>GET</b> /isPasswordResetTokenValid
+ note over middle: Look for token in Redis.
+ front <-- middle : boolean
+ end
+
+ group Password reset
+ front -> middle : <b>PUT</b> /user/resetPassword
+ note over middle: Look for token in Redis.
+ middle -> django : <b>POST</b> /update_user_password/
+ middle <-- django
+ note over middle: Delete token from Redis.
+ front <-- auth : void
+ end
+
+ group Password update
+ front -> middle : <b>PUT</b> /user/updatePassword
+ middle -> django : <b>GET</b> /get_user/
+ middle <-- django : Ok
+ middle -> django : <b>PUT</b> /update_user_password/
+ middle <-- django : Ok
+ front <-- middle : void
+ end
+
+ group User update
+ front -> auth : <b>PUT</b> /user/update
+ auth -> middle : <b>PUT</b> /user/update
+ middle -> django : <b>POST</b> /update_user/
+ middle <-- django : Ok
+ middle -> django : <b>POST</b> /get_user/
+ middle <-- django : { userInfo }
+ auth <-- middle : { userInfo with encrypted password as authzKey}
+ auth -> kong : <b>PUT</b> /consumers/:email
+ auth <-- kong : Ok
+ auth -> kong : <b>GET or POST</b> /consumers/:email/jwt (POST if no creadetials exist for this user)
+ auth <-- kong : { credentials }
+ front <-- auth : { token: jwt }
+ end
+
+ group User Info
+ front -> auth : <b>GET</b> /user
+ auth -> middle : <b>GET</b> /user
+ middle -> django : <b>POST</b> /get_user/
+ middle <-- django : { userInfo }
+ auth <-- middle : { userInfo }
+ front <-- auth : { userInfo }
+ end
+
+ group User creation
+ front -> middle : <b>POST</b> /user
+ note over middle : Set token in redis with ttl 24h
+ middle -> email : email : <b>POST</b> /email/send (body contains account validation link)
+ middle <-- email : void
+ front <-- middle : void
+ end
+
+ group Validate User creation
+ front -> middle : <b>POST</b> /user/validateAccount
+ note over middle : Validate token existance in redis
+ middle -> django : <b>POST</b> /add_user/
+ middle <-- django : Ok
+ note over middle : Remove token from redis
+ front <-- middle : void
+ end
+
+ group User account deletion
+ front -> middle : <b>DELETE</b> /user
+ middle -> django : <b>POST</b> /delete_user/
+ middle <-- django : Ok
+ front <-- middle : void
+ end
+end
+
+group Authorization with Django server
+ group List User resources
+ front -> middle : <b>POST</b> /user/resources
+ middle -> django : <b>POST</b> /get_user_service/
+ middle <-- django : { rawRessources }
+ front <-- middle : { Ressources }
+ end
+
+ group Add User access to resource
+ front -> middle : <b>POST</b> user/resources/add
+ middle -> django : <b>GET</b> /get_services/ (only needed to add names in email)
+ middle <-- django : { datasets }
+ middle -> django : <b>GET</b> /get_modes/ (only needed to add names in email)
+ middle <-- django : { services }
+ loop n times (n different datasets requested)
+ middle -> django : <b>POST</b> /add_user_service/
+ middle <-- django : Ok
+ end
+ middle -> email : <b>POST</b> /email/send (Admin + User email)
+ middle <-- email : void
+ front <-- middle: { successfullyRequested, unsuccessfullyRequested }
+ end
+
+ group Renew User access to resource
+ front -> middle : <b>POST</b> user/resources/renew
+ middle -> django : <b>POST</b> /get_user_service/ (check if access as already been validated)
+ middle <-- django : { user Ressources }
+ middle -> django : <b>GET</b> /get_services/ (only needed to add names in email)
+ middle <-- django : { datasets }
+ middle -> django : <b>GET</b> /get_modes/ (only needed to add names in email)
+ middle <-- django : { services }
+ middle -> email : <b>POST</b> /email/send (Admin + User email)
+ middle <-- email : void
+ front <-- middle: { successfullyRenewalRequested, unsuccessfullyRenewalRequested }
+ end
+
+ group Delete User access to resource
+ front -> middle : <b>POST</b> user/resources/delete
+ middle -> django : <b>GET</b> /get_services/ (only needed to add names in email)
+ middle <-- django : { datasets }
+ middle -> django : <b>GET</b> /get_modes/ (only needed to add names in email)
+ middle <-- django : { services }
+ loop n times (n different datasets to be deleted)
+ middle -> django : <b>POST</b> /del_user_service/
+ middle <-- django : Ok
+ end
+ middle -> email : <b>POST</b> /email/send (Admin + User email)
+ middle <-- email : void
+ front <-- middle: { successfullyDeleted, unsuccessfullyDeleted }
+ end
+
+ group List of services (modes)
+ front -> middle : <b>GET</b> /services
+ middle -> django : <b>GET</b> /get_modes/
+ middle <-- django : { rawServices }
+ front <-- middle : { services }
+ end
+
+ group List of restricted access datasets
+ front -> middle : <b>GET</b> /restrictedAccessDatasets
+ middle -> django : <b>GET</b> /get_services/
+ middle <-- django : { datasets }
+ front <-- middle : { datsets with "RESTRICTED" access}
+ end
+end
+```
\ No newline at end of file
--
GitLab