Version finale

site_proximo/README.md

@@ -1,68 +1,41 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+![banner](https://etud.insa-toulouse.fr/~bamarty/img/logo_proximo)
 
-## Available Scripts
+Projet démarré en Septembre 2020 par Baptiste MARTY, étudiant en 3MIC, ce site web permet aux étudiants d'avoir un accès facile à la gestion du stock du proximo :
 
-In the project directory, you can run:
+* Ajouter / Supprimer des articles
+* Créer / Supprimer des catégories
+* Mettre à jour la base de données de l'application Campus
 
-### `npm start`
+Pour la source du serveur utilisé pour synchroniser les informations, merci de voir [ce dépôt](https://git.etud.insa-toulouse.fr/vergnet/site-proximo).
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
 
-### `npm test`
+## 👨‍💻 Technologies Utilisées
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `npm run build`
+Ce site est développé en HTML/CSS et JavaScript avec React.js (Framework Open Source ).
+Côté Serveur, c'est du PHP avec le framework Laravel.
 
-Builds the app for production to the `build` folder.<br />
+# 🤝 Contributeurs
-It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.<br />
+| ![app-store](https://lh3.googleusercontent.com/ogw/ADGmqu_fXZPzCo8c1Ofn69HT7aJW03ws8nvHlCWrZl_O00w=s83-c-mo) | ![app-store](https://www.google.com/s2/photos/public/AIbEiAIAAABECNqhpZSbrZmo-QEiC3ZjYXJkX3Bob3RvKihkNThlMDlmYjgxMjZhOTcxNDAwZjg3M2IwYTE1MWI2NWQyM2NmMjYwMAHa9FtMjbEwQf0SK8WfjMXS6yvSHQ?sz=48)
-Your app is ready to be deployed!
+| --- | --- |
+| **Baptiste MARTY** | **Florian EHR**
+| Créateur et mainteneur| Améliorations
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+# 👏 Remerciements
 
-### `npm run eject`
+* **Jamal Lakhal** : Le meilleur
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+# 📄 Licence
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+Le site web est **Open Source**.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+# 🔐 Copyright
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
-## Learn More
+## 🗨️ [Des questions ? Viens discuter sur Discord !](https://discord.gg/W8MeTec)
+# 🔗 [Liens Utiles](/vergnet/application-amicale/src/branch/master/doc/LINKS.md)
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+ © Gitea
-
+[français](#) [English](/vergnet/application-amicale/src/branch/master/README.md?lang=en-US) [简体中文](/vergnet/application-amicale/src/branch/master/README.md?lang=zh-CN) [繁體中文（香港）](/vergnet/application-amicale/src/branch/master/README.md?lang=zh-HK) [繁體中文（台灣）](/vergnet/application-amicale/src/branch/master/README.md?lang=zh-TW) [Deutsch](/vergnet/application-amicale/src/branch/master/README.md?lang=de-DE) [Nederlands](/vergnet/application-amicale/src/branch/master/README.md?lang=nl-NL) [latviešu](/vergnet/application-amicale/src/branch/master/README.md?lang=lv-LV) [русский](/vergnet/application-amicale/src/branch/master/README.md?lang=ru-RU) [Українська](/vergnet/application-amicale/src/branch/master/README.md?lang=uk-UA) [日本語](/vergnet/application-amicale/src/branch/master/README.md?lang=ja-JP) [español](/vergnet/application-amicale/src/branch/master/README.md?lang=es-ES) [português do Brasil](/vergnet/application-amicale/src/branch/master/README.md?lang=pt-BR) [polski](/vergnet/application-amicale/src/branch/master/README.md?lang=pl-PL) [български](/vergnet/application-amicale/src/branch/master/README.md?lang=bg-BG) [italiano](/vergnet/application-amicale/src/branch/master/README.md?lang=it-IT) [suomi](/vergnet/application-amicale/src/branch/master/README.md?lang=fi-FI) [Türkçe](/vergnet/application-amicale/src/branch/master/README.md?lang=tr-TR) [čeština](/vergnet/application-amicale/src/branch/master/README.md?lang=cs-CZ) [српски](/vergnet/application-amicale/src/branch/master/README.md?lang=sr-SP) [svenska](/vergnet/application-amicale/src/branch/master/README.md?lang=sv-SE) [한국어](/vergnet/application-amicale/src/branch/master/README.md?lang=ko-KR) [JavaScript licenses](/vendor/librejs.html) [Site web](https://gitea.io)
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `npm run build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

site_proximo/api_proximo/app/Http/Controllers/AuthenticationController.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\User;
+use Illuminate\Support\Str;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use App\Http\Validation\LoginValidation;
+use Illuminate\Support\Facades\Validator;
+
+class AuthenticationController extends Controller
+{
+    public function register(Request $request) {
+        $user = User::create([
+            'identifyer' => $request->input('identifyer'),
+            'password' => bcrypt($request->input('password')),
+            'api_token' => Str::random(60)
+        ]);
+
+        return response()->json($user);
+    }
+
+    public function login(Request $request, LoginValidation $validation) {
+        
+        $validator = Validator::make($request->all(), $validation->rules(), $validation->messages());
+        if($validator->fails()){
+            return response()->json(['errors' => $validator->errors()],401);
+        }
+        
+        if(Auth::attempt([
+            'identifyer' => $request->input('identifyer'),
+            'password' => $request->input('password')])){
+            $user = User::where('identifyer',$request->input('identifyer'))->firstOrFail();
+            return response()->json($user);
+        } else {
+            return response()->json(['errors' => 'bad_pwd'],401);
+        };
+    }
+}

site_proximo/api_proximo/app/Http/Validation/LoginValidation.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Validation;
+
+class LoginValidation {
+
+    public function rules() {
+        return [
+            'identifyer' => ['required'],
+            'password' => ['required']
+        ];
+    }
+
+    public function messages() {
+        return [
+            'identifyer.required' => 'Vous devez spécifier l\'identifiant',
+            'password.required' =>  'Vous devez spécifier le mot de passe'
+        ];
+    }
+
+
+}

site_proximo/api_proximo/app/Models/User.php

@@ -17,9 +17,9 @@ class User extends Authenticatable
      * @var array
      */
     protected $fillable = [
-        'name',
+        'identifyer',
-        'email',
         'password',
+        'api_token'
     ];
 
     /**

site_proximo/api_proximo/database/migrations/2014_10_12_000000_create_users_table.php

@@ -15,10 +15,9 @@ class CreateUsersTable extends Migration
     {
         Schema::create('users', function (Blueprint $table) {
             $table->id();
-            $table->string('name');
+            $table->string('identifyer');
-            $table->string('email')->unique();
-            $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
+            $table->string('api_token')->nullable()->default(null);
             $table->rememberToken();
             $table->timestamps();
         });

site_proximo/api_proximo/routes/api.php

@@ -36,3 +36,9 @@ Route::get('/categories','App\Http\Controllers\CategorieController@index');
 Route::delete('/categories/{category}','App\Http\Controllers\CategorieController@destroy');
 
 Route::put('/categories/{category}','App\Http\Controllers\CategorieController@update');
+
+// Authentication
+
+Route::post('/register','App\Http\Controllers\AuthenticationController@register');
+
+Route::post('/login','App\Http\Controllers\AuthenticationController@login');

site_proximo/api_proximo/storage/logs/.gitignore

@@ -1,2 +0,0 @@
-*
-!.gitignore

site_proximo/package-lock.json

@@ -1541,9 +1541,9 @@
       },
       "dependencies": {
         "csstype": {
-          "version": "2.6.13",
+          "version": "2.6.14",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
-          "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A=="
+          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
         }
       }
     },
@@ -1559,9 +1559,9 @@
       },
       "dependencies": {
         "csstype": {
-          "version": "2.6.13",
+          "version": "2.6.14",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
-          "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A=="
+          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
         }
       }
     },
@@ -6927,6 +6927,14 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "indefinite-observable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
+      "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -8095,81 +8103,82 @@
       }
     },
     "jss": {
-      "version": "10.4.0",
+      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz",
-      "integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+      "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "csstype": "^3.0.2",
+        "indefinite-observable": "^2.0.1",
         "is-in-browser": "^1.1.3",
         "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-camel-case": {
-      "version": "10.4.0",
+      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz",
-      "integrity": "sha512-9oDjsQ/AgdBbMyRjc06Kl3P8lDCSEts2vYZiPZfGAxbGCegqE4RnMob3mDaBby5H9vL9gWmyyImhLRWqIkRUCw==",
+      "integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "hyphenate-style-name": "^1.0.3",
-        "jss": "10.4.0"
+        "jss": "10.5.0"
       }
     },
     "jss-plugin-default-unit": {
-      "version": "10.4.0",
+      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz",
-      "integrity": "sha512-BYJ+Y3RUYiMEgmlcYMLqwbA49DcSWsGgHpVmEEllTC8MK5iJ7++pT9TnKkKBnNZZxTV75ycyFCR5xeLSOzVm4A==",
+      "integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.4.0"
+        "jss": "10.5.0"
       }
     },
     "jss-plugin-global": {
-      "version": "10.4.0",
+      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz",
-      "integrity": "sha512-b8IHMJUmv29cidt3nI4bUI1+Mo5RZE37kqthaFpmxf5K7r2aAegGliAw4hXvA70ca6ckAoXMUl4SN/zxiRcRag==",
+      "integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.4.0"
+        "jss": "10.5.0"
       }
     },
     "jss-plugin-nested": {
-      "version": "10.4.0",
+      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz",
-      "integrity": "sha512-cKgpeHIxAP0ygeWh+drpLbrxFiak6zzJ2toVRi/NmHbpkNaLjTLgePmOz5+67ln3qzJiPdXXJB1tbOyYKAP4Pw==",
+      "integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.4.0",
+        "jss": "10.5.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-props-sort": {
-      "version": "10.4.0",
+      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz",
-      "integrity": "sha512-j/t0R40/2fp+Nzt6GgHeUFnHVY2kPGF5drUVlgkcwYoHCgtBDOhTTsOfdaQFW6sHWfoQYgnGV4CXdjlPiRrzwA==",
+      "integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.4.0"
+        "jss": "10.5.0"
       }
     },
     "jss-plugin-rule-value-function": {
-      "version": "10.4.0",
+      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz",
-      "integrity": "sha512-w8504Cdfu66+0SJoLkr6GUQlEb8keHg8ymtJXdVHWh0YvFxDG2l/nS93SI5Gfx0fV29dO6yUugXnKzDFJxrdFQ==",
+      "integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.4.0",
+        "jss": "10.5.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-vendor-prefixer": {
-      "version": "10.4.0",
+      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz",
-      "integrity": "sha512-DpF+/a+GU8hMh/948sBGnKSNfKkoHg2p9aRFUmyoyxgKjOeH9n74Ht3Yt8lOgdZsuWNJbPrvaa3U4PXKwxVpTQ==",
+      "integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "css-vendor": "^2.0.8",
-        "jss": "10.4.0"
+        "jss": "10.5.0"
       }
     },
     "jsx-ast-utils": {
@@ -12867,6 +12876,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

site_proximo/package.json

@@ -1,5 +1,6 @@
 {
   "name": "site_proximo",
+  "homepage": ".",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

site_proximo/public/.htaccess

@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    RewriteBase /
+    RewriteRule ^index\.html$ - [L]
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteRule . /index.html [L]
+ </IfModule>

site_proximo/src/css/Components/connection.css

@@ -0,0 +1,95 @@
+#identifyerBlock{
+    flex:1;
+    width:50%;
+    display:flex;
+    flex-direction: column;
+}
+
+    #identifyerBlockInput{
+        width:15vw;
+        display:flex;
+        flex-direction:column;
+        color:#878787;
+        font-family: 'Wellfleet', cursive;
+        font-size:1vw;
+    }
+
+        #identifyerBox{
+            color:black;
+            border-radius:0.6vw;
+            padding-left:0.5vw;
+            border: 0.2vw solid #000000;
+            box-sizing: border-box;
+            box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
+        }
+
+        #identifyerBox:focus{
+            outline:none;
+            color:black;
+            border-radius:0.6vw;
+            padding-left:0.5vw;
+            border: 0.2vw solid #057B26;
+            box-sizing: border-box;
+            box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
+        }
+
+    #errorIdentifyerBlock{
+        height:3vw;
+        display:flex;
+        padding-top:0.5vw;
+        padding-left:0.5vw;
+    }
+
+        #errorIdentifyer{
+            color:red;
+            font-family: 'Wellfleet', cursive;
+            font-size:0.75vw;
+        }
+
+#passwordBlock{
+    flex:1;
+    width:50%;
+    display:flex;
+    flex-direction: column;
+}
+
+    #passwordBlockInput{
+        width:15vw;
+        display:flex;
+        flex-direction:column;
+        color:#878787;
+        font-family: 'Wellfleet', cursive;
+        font-size:1vw;
+    }
+
+        #passwordBox{
+            color:black;
+            border-radius:0.6vw;
+            padding-left:0.5vw;
+            border: 0.2vw solid #000000;
+            box-sizing: border-box;
+            box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
+        }
+
+        #passwordBox:focus{
+            outline:none;
+            color:black;
+            border-radius:0.6vw;
+            padding-left:0.5vw;
+            border: 0.2vw solid #057B26;
+            box-sizing: border-box;
+            box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
+        }
+
+    #errorPasswordBlock{
+        height:3vw;
+        display:flex;
+        padding-top:0.5vw;
+        padding-left:0.5vw;
+    }
+
+        #errorPassword{
+            color:red;
+            font-family: 'Wellfleet', cursive;
+            font-size:0.75vw;
+        }

site_proximo/src/css/Components/editarticle.css

@@ -18,7 +18,7 @@
     color:white;
     font-family: 'Wellfleet', cursive;
     font-size:1.5vw;
-    background:#057B26;
+    background-image:linear-gradient(#057B26,#044616);
     border: 0.2vw solid black;
     border-radius: 1.8vw;
     padding:0.5vw 0.7vw 0.5vw 0.7vw
@@ -27,3 +27,11 @@
 #button:focus{
     outline:none;
 }
+
+#button:hover{
+    border-color:white;
+}
+
+#button:active{
+    background-image: linear-gradient(#044616,#057B26);
+}

site_proximo/src/css/Components/header.css

@@ -2,7 +2,8 @@
     color : black;
     text-align: center;
     font-family: 'Wellfleet', cursive;
-    font-size:4vw;
+    font-size : max(4vw,50px);
+    min-height:100px;
     background:linear-gradient(180deg, #FB5F03 0%, #D82903 100%);
     padding-top:0.5%;
     padding-bottom:1%;

site_proximo/src/css/Components/navbar.css

@@ -2,7 +2,7 @@
     color : white;
     text-align: center;
     font-family: 'Wellfleet', cursive;
-    font-size:2.5vw;
+    font-size:max(2.5vw,30px);
     display:flex;
     justify-content: space-between;
 }

site_proximo/src/css/Views/home.css

@@ -27,4 +27,5 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
 }

site_proximo/src/css/Views/stock.css

@@ -30,3 +30,38 @@
       background-color: white;
       border-radius: 20px;
   }
+
+
+#errorRouteBlock{
+    flex:1;
+    height:48vw;
+    display:flex;
+    flex-direction:column;
+    justify-content: center;
+    align-items: center;
+}
+
+    #errorRouteTitle{
+        color:white;
+        font-family: 'Wellfleet', cursive;
+        font-size:3vw;
+    }
+
+    #errorRouteTxt{
+        color:white;
+        font-family: 'Wellfleet', cursive;
+        font-size:2vw;
+    }
+
+    #link{
+        color:rgb(23, 9, 146);
+        font-family: 'Wellfleet', cursive;
+        font-size:2vw;
+    }
+
+    #link:hover{
+        text-decoration: none;
+        color:rgb(66, 113, 243);
+        font-family: 'Wellfleet', cursive;
+        font-size:2vw;
+    }

site_proximo/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {BrowserRouter as Router} from "react-router-dom";
+import {HashRouter as Router} from "react-router-dom";
 import AppRouter from './js/Components/AppRouter';
 
 class App extends React.Component {

site_proximo/src/js/Components/AppRouter.js

@@ -8,8 +8,8 @@ import Home from '../Views/Home';
       return (
         <>
             <Switch>
-                <Route path="/stock" component={Stock}/>
+                <Route exact path="/stock" component={Stock}/>
-                <Route path="/" component={Home}/>
+                <Route exact path="/" component={Home}/>
             </Switch>
         </>
       )

site_proximo/src/js/Components/Connection.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import Icon from '@iconify/react';
+import plusIcon from '@iconify/icons-fa-solid/plus';
+import '../../css/Components/connection.css'
+import axios from 'axios';
+import { Redirect } from 'react-router';
+
+class Connection extends Component {
+
+    constructor(props){
+        super(props)
+        this.state={
+            identifyer:'',
+            password:'',
+            redirect:false,
+            errors:[]
+        }
+    }
+
+    handleIdentifyerChange  = event => {
+        this.setState({identifyer : event.target.value})
+    }
+
+    handlePasswordChange  = event => {
+        this.setState({password : event.target.value})
+    }
+
+    handleSubmit = (event) => {
+        event.preventDefault()
+        console.log(this.state.password);
+
+        let bodyFormData = new FormData();
+        bodyFormData.set('identifyer',this.state.identifyer);
+        bodyFormData.set('password',this.state.password)
+
+        axios.post('http://127.0.0.1:8000/api/login',bodyFormData)
+            .then(res => {
+                sessionStorage.setItem('token',res.data.api_token)
+                this.setState({redirect:true})
+                console.log(res.data.api_token);
+            })
+            .catch(error => {
+                if(error.response.status === 401){
+                    this.setState({errors:error.response.data.errors})
+                } 
+                console.log(error.response);
+            })
+    }
+
+    render() {
+        if (this.state.redirect){
+            return (<Redirect to="/stock"/>)
+        }
+        return (
+            <div id="transp">
+            <div id="formBody">
+                <div id="formHead">
+                    <div id="formHeadTxt">Connexion</div>
+                    <div id="crossClose" onClick={this.props.handleCloseAbove}>
+                        <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '3vw'}} />
+                    </div>
+                </div>
+                <div id="formMainContent">
+                    <form method='POST'  onSubmit={this.handleSubmit}>
+                        <div id="identifyerBlock">
+                            <div id="identifyerBlockInput">
+                                <label htmlFor="identifyerBox">Identifiant</label>
+                                <input id="identifyerBox" onChange={this.handleIdentifyerChange} type="text"/>
+                            </div>
+                            <div id="errorIdentifyerBlock">
+                                <p id="errorIdentifyer">{this.state.errors.identifyer}</p>
+                            </div>
+                        </div>
+                        <div id="passwordBlock">
+                            <div id="passwordBlockInput">
+                                <label htmlFor="passwordBox">Mot de Passe</label>
+                                <input id="passwordBox" onChange={this.handlePasswordChange} type="password"/>
+                            </div>
+                            <div id="errorPasswordBlock">
+                                {this.state.errors === 'bad_pwd'? 
+                                <p id="errorPassword">Mot de passe incorrect</p>
+                                :
+                                <p id="errorPassword">{this.state.errors.password}</p>}
+                            </div>
+                        </div>
+                        <button id="button" type='submit'>Se connecter</button>
+                    </form>
+                </div>
+            </div>
+            </div>
+        );
+    }
+}
+
+export default Connection;

site_proximo/src/js/Components/button.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import '../../css/Components/button.css';
-import {Link} from 'react-router-dom';
 
 export default class Button extends React.Component {
 
@@ -13,8 +12,8 @@ export default class Button extends React.Component {
 
     render() {
       return (
-          <div className="button">
+          <div className="button" onClick={this.props.handleConnection}>
-            <p className="buttonTxt"><Link to={this.props.linkto} className="link">{this.props.label}</Link></p>
+            <p className="buttonTxt">{this.props.label}</p>
           </div>
       );
     }

site_proximo/src/js/Views/Stock.js

@@ -14,12 +14,12 @@ import AppLoader from '../Components/AppLoader';
 import Categories from '../Components/Categories';
 import EditCategory from '../Components/EditCategory';
 import Sort from '../Components/Sort';
+import { Link } from 'react-router-dom';
 
 export default class Stock extends React.Component {
 
   constructor(props){
     super(props)
-    console.log('constructor');
     this.state = {
       onNewArticle:false,
       onEditArticle:false,
@@ -84,7 +84,7 @@ export default class Stock extends React.Component {
     this.setState({search : event.target.value},()=>
     {
       console.log(this.state.search);
-      this.getArticles();
+      this.searchArticles();
     })
   }
 
@@ -142,7 +142,9 @@ export default class Stock extends React.Component {
 
 
     render() {
-      console.log(this.state.sortType);
+      if (!sessionStorage.getItem('token')){
+        return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
+      } else {
       return (
           <div id="stock">
               <Header title='Le Stock'/>
@@ -176,6 +178,6 @@ export default class Stock extends React.Component {
               : null}
               <Footer/>
           </div>
-      );
+      )}
     }
   }

site_proximo/src/js/Views/home.js

@@ -2,19 +2,56 @@ import React from 'react';
 import '../../css/Views/home.css';
 import Header from '../Components/Header';
 import Button from '../Components/Button';
+import Connection from '../Components/Connection';
+import Footer from '../Components/Footer';
+
+class Home extends React.Component {
+
+  constructor(props){
+    super(props)
+    this.state = {
+      onConnection:false
+    }
+  }
+
+  // Gère l'affichage de l'interface de connexion
+  handleConnection = () => {
+    this.setState({onConnection:true})
+  }
+
+  // Gère la femeture de l'interface de connexion
+  handleCloseConnection = () => {
+    this.setState({onConnection:false})
+  }
 
-export default class Home extends React.Component {
     render() {
       return (
           <div className="home">
+              {/* Affiche par dessus la page d'accueil une interface de connexion */}
+              {this.state.onConnection &&
+               /* Appel du composant Connection qui affiche l'interface de connexion
+                Paramètres : 
+                handleCloseAbove : gère la fermeture du composant */
+                <Connection handleCloseAbove={this.handleCloseConnection}/>
+              }
+              {/* Appel du composant Header qui affiche le Header du site
+              Paramètre : title : texte intérieur */}
                 <Header title='Proximo'/>
                 <div className="content">
                   <div className="contentTxt">Bienvenue sur le site de la supérette de l'INSA !</div>
                   <div className="buttonBlock">
-                  <Button linkto="/stock" label="Connexion"/>
+                  {/* Appel du composant Button
+                  Paramètres : 
+                   - handleConnection : gérer l'affichage de l'interface de connexion
+                   - label : texte interne */}
+                    <Button handleConnection={this.handleConnection}  label="Connexion"/>
                   </div>
                 </div>
+                {/* Appel du composant Footer qui affiche le Footer du site */}
+                <Footer/>
           </div>
       );
     }
   }
+
+  export default Home