rmt-06-florence-fox · normndakbr · Dec 12, 2020 · Dec 12, 2020
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}
diff --git a/.firebase/hosting..cache b/.firebase/hosting..cache
@@ -0,0 +1,112 @@
+babel.config.js,1607588890136,ff306fb578b8764a0a46dda13e6d9a6da094ed1b8bac84afdb062d2d3e2bfb3b
+index.html,1607776122007,c7e178ff406973da6ad87d7be210db56891ea49e4b69874468ff2aad896dabe9
+README.md,1607588939294,6be7baea516a8666793a4630abaff366f1d3eef7dba5f2d770a45f8b289b303c
+vue.config.js,1607636843605,50ef9ff8bdef178b08c76593315b5c2d5759e7b4af0d52b54fe9699338b542a0
+.git/COMMIT_EDITMSG,1607765813566,6b66049a28f829c715140cbd83ec23c725c4156ee8ea1c7a1a1bfb79762a6847
+.git/config,1607327012553,359056f7b3508f2abe3e51fdb65abd96f7c76f5364f80e37b673056eaf74641f
+.git/description,1607327009803,82f2436d331ddc1123e2c797669bec173d77c86477f087e1134ca09d91a0d852
+.git/HEAD,1607327012539,23960fa2316fb1cd093c7920df1e9c864ee8c2d784908f7372cd5da920fc3d48
+.git/index,1607765813013,d96d9c0e61600a2872bfa042c4698019bee91e4532fc307d126e4c46f066fcf2
+.git/packed-refs,1607327012483,55d8d64a58ccd4ff08ab9c722be3e00444d072307f951012c3dc8c63e0ddd0a3
+.git/hooks/applypatch-msg.sample,1607327009804,159513c8ea7e79b52b19383e22c9b658a2d945432119c08295b7a7e0bb3a1784
+package.json,1607639153352,da9f2b4ddd1080fac0d72ca14650ad85f18a646fcdb280231ba743101691e801
+.git/hooks/applypatch-msg,1607588883142,342892e96f25f96d46af645c643504829e0f71d10236554cec2baafd66988d31
+.git/hooks/commit-msg.sample,1607327009805,e57048340ae7ab73a9981e08e0dc33ac4c9ce12fbb1d4e36f0088b48bfb45dd3
+.git/hooks/commit-msg,1607588883148,73f4d78f0cb4aa63022ba563680c3006846e4bd08bc6064963d1e43297e65505
+.git/hooks/post-applypatch,1607588883145,49df7fa9ae188a34a551fd4f05787d5c284931d06713af6289ad2f8a30ade64c
+.git/hooks/post-commit,1607588883150,49534f2ccc7a2c8cb1f8ea6401761cc93a53940b93ee69331675c617405844c3
+.git/hooks/post-checkout,1607588883152,8c3f3795488b3ef481d0d293d338ba829ed272495806f25914d095718b0d99d4
+.git/hooks/post-receive,1607588883161,cda04565f8403670a0ca1efc070253d687f9340eb604f0743a2dde130797ea31
+.git/hooks/post-rewrite,1607588883165,e9a60952a3b12fa8ff489f1e5277be4410cd9d3f0fa6e6d6b96b26dab17ed7ae
+.git/hooks/post-update,1607588883162,6f149d598767650c2ee77db8a8e8e66055733b40bc9e4a88bc7126a491480fe8
+.git/hooks/post-update.sample,1607327009806,186590add780eec85c8e17f7b2726a6450113db3d709f49ed731aecf3b81465a
+.git/hooks/pre-applypatch.sample,1607327009807,93353290a9b7afc06d5e6788dcbaeac204cb675a5d36fa2fd37d9564804e50f0
+.git/hooks/pre-auto-gc,1607588883164,b79f046a60a284f9bc49f967637c4a53a97d128b08dcac882bf46e8eb86d1569
+.git/hooks/pre-commit,1607588883146,d493d480f89ce910fb762fc37198c1ef06743ea4fb345b7b8939ad5f203f9b51
+.git/hooks/post-merge,1607588883152,fa408f59929e8a1f2e61661a80f0cbf5474b9f58548ad1863a5cbfab7103c2e2
+.git/hooks/pre-merge-commit.sample,1607327009810,f6ec777f95c3a2703f5a60b43f0450811ac294a6aca051922651c74d910a718f
+.git/hooks/pre-push,1607588883154,7a5be73e7bab3003bfe77a6e340865bb09b3b87a0f98dbee491dce5d4e196252
+.git/hooks/pre-commit.sample,1607327009808,0f1b8bcd57419856b52e2fea5965a5c47b98844f63f553f03f672f08e91f9ac3
+.git/hooks/pre-applypatch,1607588883144,ff5dc96c0eb214b484a5be7920a7750a555475dc22e017fcb592ea0c0f1f103d
+.git/hooks/pre-rebase,1607588883151,4b16f7f7b85798c068925752b9eb35b3d16760ca0c6a06874e2b9f97eca0fb3d
+.git/hooks/pre-push.sample,1607327009811,94f231ca5270a6be6faab8dc4eec8da663bb83cc11cad441b806a7661792d04e
+.git/hooks/pre-receive.sample,1607327009816,925ccbe4b2d5692094cb38a1daace52763f91e55ca85f133abff4b811a229f80
+.git/hooks/pre-rebase.sample,1607327009813,9d8f25c53691dbf1d631c984ff20abcd073efba327b1aee045cca769c3dd73f1
+.git/hooks/prepare-commit-msg.sample,1607327009817,3eff30b4f023ca3b2fa331a45fd227f6857177f773418a54bc0a513c5332f0f3
+.git/hooks/push-to-checkout,1607588883163,797bada9d0f3e4baa7b446f0e5a6771783eb5887cdd54bf32c259136cff82d43
+.git/hooks/fsmonitor-watchman.sample,1607327009806,a1d7cf483df6f75410516c4603a0b65163ceea3bd7e851102edfe16c80511050
+.git/hooks/update,1607588883159,9e557ae3553c075b0ee3877f8a16af2f517e1f3e3e92d692b71d3c8594c725ff
+.git/hooks/update.sample,1607327009818,6d0597dfc2b6e9df7ceb915b0ece70ec05baacccaf0edee2953c217629f2277b
+.git/info/exclude,1607327009820,77e7e1ad67e1708c9434f9f596056e24819c6111399ce06bbddb35133f598f61
+.git/logs/HEAD,1607765813972,d5cb9afa8687d926bd52985f79e20ba85171f3c989b13ac4a08398c0f4a0ac7c
+.git/logs/refs/heads/main,1607765813973,d5cb9afa8687d926bd52985f79e20ba85171f3c989b13ac4a08398c0f4a0ac7c
+.git/logs/refs/remotes/origin/HEAD,1607327012538,2ca313d8896ad8402a55f13fb61ba97e94e2528db7b7d7495dc5afc592f56669
+.git/logs/refs/remotes/origin/main,1607765830310,312578e6acd6fafef7a8a90d00b40c744829b728d60212acde0c453bb583a419
+.git/objects/09/c04919953b2d58df7ad9c3a0308446ed23c836,1607765771004,c8bcceac6aa3969d5066a53d74a06a391e1e7d357005340f388119fe5b99bc14
+.git/objects/0c/414eb6448367a3416aac5e449b89522502c515,1607327012351,93cb46db977121a6035d18d2fd5a3752bd67160a9bf8547584ad7a1c0ced2d10
+.git/hooks/pre-receive,1607588883156,f19f4e9ec0baf149c0252299bfc3fa4e23d81d3eb4e753597d2800665c6fcd56
+.git/hooks/sendemail-validate,1607588883166,bb19089ff624d188707dd26013559427a9079bb4686c8eb8df4ee657d3249c9e
+.git/hooks/prepare-commit-msg,1607588883147,bc7ecb17a5ce753e09f051a2a0c240cb13b6a160577b2fb458db08c19b7caca7
+.git/objects/0d/6e750348e9427ec508ae754f9a82c2906a8eb9,1607327012284,fd82b49e943f63fd5cc40ace0ded15781b905927912eb645831f21994325f692
+.git/objects/1a/ae3daad483e8eb43628956f734ec0c8a7d672f,1607765812141,4c32a71966f8beedf6d09825f65be7cf757cb5e4b9c19c48dd97a111ec4af9ed
+.git/objects/21/4388fe43cdfd7ce1c29cd3e401541ded620dba,1607765768875,fdb6d01ed2f89e8ac720059505b84ce81729473788d433843ad811c2579511c3
+.git/objects/2c/6a7fa5a82e05ebc3c37faa5777e605cab0a875,1607765769053,f4480ff52b8636080c93d5e24fb561d60ef0b981d8457771bac94afeb44e01c3
+.git/objects/33/0d3c51fdd6b87cd6d26bf590ca94a83db7201a,1607765771058,23fd66874b34dd96c374d23abe2dc6194e783426ed082347c5022c63641c507d
+.git/objects/3f/a28070de24f2055171ca2e20543881cb7fdf1c,1607765770760,e18b4f6031fc3f52f848d45dd5d7cfa4fcd241b4fc59059b40b22614e7ce4ef2
+.git/objects/40/3adbc1e527906a4aa59558cd582c20bcd1d738,1607765769121,f60e65023a827f78dad60a1365c01c6deed9e3092350964a3555f519d559662c
+.git/objects/46/38dc2c0c0600f2ac2c6833aab4cef73bfaa61e,1607765770946,1f8b8987e5aa2cbb4108673adff65904416b0ed1419325a3e0623b1a1fdaf835
+.git/objects/47/7dcd669ec26b3a0c252cda471c503dc7d550bd,1607765769762,2a980b3d524066d1928f1aff68c3c41cdc47100f6b097d3876da4fb500ae4e68
+.git/objects/5d/bd325dcb3f7282c54775af723bcba72f8ee30a,1607765812958,1fd5c90780d2cf6d270c47391af1fbb91f98225a0c7a40b700fdc242128b0d35
+.git/objects/62/e98631a10015c0c3236a1d41242e93a546b366,1607765812510,7f9fdacdd89f2be050d14dfa1068d2254d0caf0b9524b6ad296109d0760924ff
+.git/objects/70/53c49a045c91bd8b3015c1cf3d1f6da21660d8,1607765768954,b507acfb46a841d92923c4c4c1207f77f00eae7ff80081a1cf955ba663c8edca
+.git/objects/71/b03caaceb69f534e51e24c0284d68ebe63801e,1607765770364,73834e855dc0a7d77787de6c826727c5ffb1de893fc4c93ced9dde638bf82381
+.git/objects/7b/f2a6504399e05bd40c02c640417749cc241bf3,1607765812898,9cb2dac42279abdf4f03126d01d0a8833fee80816b36c13862a84e013300b65f
+.git/objects/8e/0ffa59ff50fd6609922ebe84ff65b998c52747,1607765812682,aae0cb0fd51028995d7b4b2d6bbaa1d5a0e5838dabefe22474a9282e9f201de5
+.git/objects/8c/26d6d066ed9d16be6ac5c77b667412f9f83a30,1607765770826,2dea7cb587d5f8f98a99fcff65916a229b2971ba4c03f84e7b89994152cd2e87
+.git/objects/96/0c1d7cf9c4876a4af3636a686ed3a31b1e2600,1607765812626,98379c0b21890881cca70a31f006e7038c59534fbbd06fe2e7fce10af6ef5dea
+.git/objects/56/3968264b584f1253196d2c76d5605b832b4108,1607765769561,02eb678f19ddc2b0704e31cb233c92e98ae6b0ce52d8efde5f99ac3ed98f8073
+.git/objects/9b/b5a4c00f606193781e93884610393a014a0b77,1607765770284,8f57f84137387eed70a2a78cb9dd9366a67137f37f23a725cdb9272e595035b8
+.git/objects/b3/328013604a5f8d37330b554428c91ba6982cd1,1607765812732,a31ef2aadc96912477712e7cc5c237d497cdb53919ffaa1d5826b6ca962eb410
+.git/objects/bb/39212277fda2a7e6571ec5db0ab4ab87e01a5a,1607327012150,798f6d34cd42837d9d779776e798685c0836bfaa3f175a2c11f9abe99289cb77
+.git/objects/c9/fa5595d34386ae9f093844a98145bf6668bbaa,1607765768782,052839f84d412442a0a830d0ae6c32ee90df5b4ae9fdeac161c40d12132fb06d
+.git/objects/9e/39a75bf6d0c16fcd5125172bfd3147d04111b1,1607765769675,20b9f27cad3b4db04360cefe31517db31abfff3b98649b7f64c7f8a44c4421df
+.git/objects/d3/dc3e365c43b60453ef8f2db053569c276e30a8,1607765769813,cc162cef2d890e36632d9f600d7eca1bd5f93dfb5512857730ff9ae1e86b8f95
+.git/objects/d8/9bdea8f7cd8a0ad0c155a47e424e88d3606b88,1607765812566,31c4eafbaf2a0972020d16ffda17056872b1e647efe61cea8919a5a7d68d6295
+.git/objects/d7/588607e2ce42aec18bf75b5a48fec5e6f9b581,1607765770644,05aa14ca7dd26644870eba313609f03163b1974d9159d69eb47c05748cdac11e
+.git/objects/de/405aaa2c694fa8cd2c92e1b6673e673cc27732,1607765770882,0e66cae98a5c65bf4816f9bf1fa5d49603e24352a283e7d528b86621bc3e8027
+.git/objects/df/36fcfb72584e00488330b560ebcf34a41c64c2,1607765769620,0c89f525b1f856d86c3f6f1e02beddd965295ab32c969aa7705f6924b8972d0f
+.git/objects/e9/558405fdcc02f12d757acb308e02937a7444f1,1607765769332,afbbacb261fb6c16852012076acff77ad44962b8fdc9c07a37cfe226975b57c5
+.git/objects/e3/b72b62c2083488c596fb7891bfb14dc1b563c4,1607765813904,bbe614573a2a91d954f9d7fbda323626b5dd1fecd56bce09691b7334b9235369
+.git/objects/ee/b690992aa07c05198aa9de03f7ff252bfdb4de,1607765770500,094d5856753a174b3f588598d6f09e03c1b8410792bff3d1cbfa257ab21f4d50
+.git/objects/f2/5345696713d1bf0ab7b359da6ec17acf417b2d,1607765770561,333aae5e0ee0d4b004127c963afb45c080e0a77978617ab53c46a3e9eb8b451f
+.git/objects/ac/76f3648de5abb3eb02a3566ea0c7a4a9465902,1607765770712,64d761ab4219d193eb2f2e79919c7948fda691d41cb87c585454592e8a3ef3e1
+.git/objects/fc/2a24dab98539fe90005a7518be879c96101ff9,1607765770441,be59b48573bc91c12c324ef1383992a73e7fe2b37580f7e56b7552572761311f
+.git/refs/heads/main,1607765813972,8bfad82f695e2686d2cd89b99c711fdadd9cf5dd606331b3f161485349c11ce5
+.git/refs/remotes/origin/HEAD,1607327012538,309067256ef321c6851b59e293ca58f7ccae3509e768e9597fd3348d34570b32
+.git/refs/remotes/origin/main,1607765830307,8bfad82f695e2686d2cd89b99c711fdadd9cf5dd606331b3f161485349c11ce5
+.git/objects/f3/d2503fc2a44b5053b0837ebea6e87a2d339a43,1607765769987,165658363cd627e3d73fccda7738121fafb0cdc3b21a6052c11b17b63fb16671
+public/index.html,1607710612587,df582ca6a6339967934310281365a8fbb7a261330ff18e1124e5940fa35667a1
+public/favicon.ico,1607588890148,d5451f0f0f0bcbcd433bbdf4f6e7e5d89d8ecce2650649e969ccb5e5cd499ab2
+public/haro.ico,1607639852470,e0b4619dc6e739eee02f24aa22634e8e4d5153a590c778e51418e77e11c09fb0
+.git/objects/30/82379ccf687ed18064d9993bc2dd660530c57d,1607765770066,5baf5af7da9274014010a19df8bcce315eabfb599b523a5125e5305c2cc167d5
+.git/objects/38/a9fbcae6adf4ee9c90a06f74598b041d591506,1607765770195,a0ac43aaa2deb3d1f32cbae926e329c40260bc539af65b417190d6cb5ded4637
+src/main.js,1607588890152,60c13ea7f8b4c92bb5b9719c96c64a6f143b584b349344760ee02f14e065106a
+src/App.vue,1607710776109,0814d437d2d93dc46eab5d423b89a65304d6fc0af27424106d76be0e5b9e8d0b
+src/assets/Logo.jpg,1607639320467,8077dc59b441543dae07338447ffa3aea682145aec331560f62771c155f996b6
+src/assets/logo.png,1607588890152,438ff076c76bd2573eb20ffa0804462a1334b7d28aa49d1b55a84d7345269938
+src/components/EditForm.vue,1607702206722,a3b1b50b43429c0be02083ed731ed47eb64fff07fc1c59748bb6b792bfd0ca4c
+src/components/AddForm.vue,1607696317725,dd7a2f5eb2ab0a300cb55c5fbb67f12cf92fe69e0e9b7d5f6a451c0263361477
+.git/objects/9c/a28109f4d6e8430bb7f65cb4bbede02e7e98ea,1607765769882,1829fb6511bf22771aa311d825462f3f5eb1ffc061d4638b7fe5cbbce2549480
+src/components/ProductCard.vue,1607755839097,6736caeaf6540af8b86096ba781bf4e43fbf3e967e12d49237557d661993c57d
+src/views/About.vue,1607588890154,eae065bf84a35697575b4ad22ccc2ead7e5dde24e69e48bb442b2b05435897c0
+src/views/AddProduct.vue,1607694417082,c6efa86a392e3e6a13400295ee1f826f92b2631288c5d6cdf1342175d8710443
+src/views/EditProduct.vue,1607697462960,b88d41aca1de80c45ee37c5e658fa370f39b16b095b3062fb0da1857f655e9c4
+src/router/index.js,1607697530795,156cc8124dd8204c43e502a81c1b25676b23edf3f2698b5229bc0c3352fb6fee
+src/views/Login.vue,1607641463627,a703d96a97c94462bc99fe71265fbbfb5ba0275b0f367b20f2a28c14e6938607
+src/views/Home.vue,1607696128144,b16acb35f5aff8884933e79e95118d2c66ad7304afcbbdc7a284fd0dfc97a75d
+src/components/LoginForm.vue,1607710945503,c3625348a11f8178cb7caeae830c96804bb97938fc122c0e7bfc2dc63c6b7966
+src/store/index.js,1607705323651,d33f22a6bf17412c79551b05a6426c450687b079bb802661de6fc195ba372ad1
+.git/objects/bf/cdd5fe1956a0926c75781d09c4c68d1e5ef9c2,1607765769445,327dce8d8d5090d8d5855e7e63199a88358971651e797c7fd2f52b492a31f299
+package-lock.json,1607639154068,36f6420e9008d6a4144eeb9b9864aa28143086a216e69d4ffc72ef2e745534c9
+src/assets/logo3.png,1607642211040,615aafbc32da40d5d440d4ec9dc758f74f13c4ec6dd895114fddaf7298115e33
+src/assets/logo2.png,1607640260371,db66f3c42c0883fe4d10efb76bc92a6c8af46807ec577a59946c74bce42e1d00
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "gun-pla-cms"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1 +1,24 @@
-# ecommerce_client_cms
+# ecommerce_client_cms-2
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": ".",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Welcome to Firebase Hosting</title>
+
+    <!-- update the version number as needed -->
+    <script defer src="/__/firebase/8.2.0/firebase-app.js"></script>
+    <!-- include only the Firebase features as you need -->
+    <script defer src="/__/firebase/8.2.0/firebase-auth.js"></script>
+    <script defer src="/__/firebase/8.2.0/firebase-database.js"></script>
+    <script defer src="/__/firebase/8.2.0/firebase-firestore.js"></script>
+    <script defer src="/__/firebase/8.2.0/firebase-functions.js"></script>
+    <script defer src="/__/firebase/8.2.0/firebase-messaging.js"></script>
+    <script defer src="/__/firebase/8.2.0/firebase-storage.js"></script>
+    <script defer src="/__/firebase/8.2.0/firebase-analytics.js"></script>
+    <script defer src="/__/firebase/8.2.0/firebase-remote-config.js"></script>
+    <script defer src="/__/firebase/8.2.0/firebase-performance.js"></script>
+    <!-- 
+      initialize the SDK after all desired features are loaded, set useEmulator to false
+      to avoid connecting the SDK to running emulators.
+    -->
+    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>Welcome</h2>
+      <h1>Firebase Hosting Setup Complete</h1>
+      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
+      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
+    </div>
+    <p id="load">Firebase SDK Loading&hellip;</p>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const loadEl = document.querySelector('#load');
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+        // // The Firebase SDK is initialized and available here!
+        //
+        // firebase.auth().onAuthStateChanged(user => { });
+        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
+        // firebase.firestore().doc('/foo/bar').get().then(() => { });
+        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
+        // firebase.messaging().requestPermission().then(() => { });
+        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
+        // firebase.analytics(); // call to activate
+        // firebase.analytics().logEvent('tutorial_completed');
+        // firebase.performance(); // call to activate
+        //
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+
+        try {
+          let app = firebase.app();
+          let features = [
+            'auth', 
+            'database', 
+            'firestore',
+            'functions',
+            'messaging', 
+            'storage', 
+            'analytics', 
+            'remoteConfig',
+            'performance',
+          ].filter(feature => typeof app[feature] === 'function');
+          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
+        } catch (e) {
+          console.error(e);
+          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "ecommerce_client_cms-2",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "author": "",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "main": "index.js",
+  "dependencies": {
+    "axios": "^0.21.0",
+    "bootstrap": "^4.5.3",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.6.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "_id": "ecommerce_client_cms-2@1.0.0",
+  "bugs": {
+    "url": "https://github.com/normndakbr/ecommerce_client_cms-2/issues"
+  },
+  "homepage": "https://github.com/normndakbr/ecommerce_client_cms-2#readme",
+  "keywords": [],
+  "license": "ISC",
+  "readme": "ERROR: No README data found!",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/normndakbr/ecommerce_client_cms-2.git"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/haro.ico b/public/haro.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="haro.ico">
+  <!-- BOOTSTRAP -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+  <!-- END BOOTSTRAP -->
+
+  <!-- GOOGLE FONTS -->
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
+  <!-- END GOOGLE FONTS -->
+  <title>Gun.Pla</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+      Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,44 @@
+<template>
+  <div id="app">
+    <div id="nav" v-if="isLogin == true">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+      <router-link to="/login">Login</router-link>
+    </div>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  computed: {
+    isLogin() {
+      return this.$store.state.isLogin
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Ubuntu', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/src/assets/Logo.jpg b/src/assets/Logo.jpg
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo2.png b/src/assets/logo2.png
diff --git a/src/assets/logo3.png b/src/assets/logo3.png
diff --git a/src/components/AddForm.vue b/src/components/AddForm.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <form @submit.prevent="addProduct">
+      <div class="mb-3">
+        <label class="form-label">Product Name</label>
+        <input v-model="newProduct.name" type="text" class="form-control" />
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Image URL</label>
+        <input v-model="newProduct.image_url" type="text" class="form-control" />
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Price</label>
+        <input v-model="newProduct.price" type="number" class="form-control" />
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Stock</label>
+        <input v-model="newProduct.stock" type="number" class="form-control" />
+      </div>
+      <button type="submit" class="btn btn-primary">Add</button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'AddForm',
+    data() {
+        return {
+            newProduct: {
+                name: '',
+                image_url: '',
+                price: '',
+                stock: ''
+            }
+        }
+    },
+    methods: {
+        addProduct() {
+            const payload = {
+                name: this.newProduct.name,
+                image_url: this.newProduct.image_url,
+                price: this.newProduct.price,
+                stock: this.newProduct.stock
+            }
+            this.$store.dispatch("addProduct", payload);
+
+        }
+    }
+};
+</script>
+
+<style>
+</style>
diff --git a/src/components/EditForm.vue b/src/components/EditForm.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="container">
+    <form @submit.prevent="editProduct">
+      <div class="mb-3">
+        <label class="form-label">Product Name</label>
+        <input v-model="newProductData.name" type="text" class="form-control" />
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Image URL</label>
+        <input v-model="newProductData.image_url" type="text" class="form-control" />
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Price</label>
+        <input v-model="newProductData.price" type="number" class="form-control" />
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Stock</label>
+        <input v-model="newProductData.stock" type="number" class="form-control" />
+      </div>
+      <button type="submit" class="btn btn-primary">Confirm</button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'EditForm',
+    // computed: {
+    //     productData () {
+    //         return this.$store.state.product;
+    //     }
+    // },
+    data() {
+        return {
+            newProductData: {
+                id: this.$store.state.product.id,
+                name: this.$store.state.product.name,
+                image_url: this.$store.state.product.image_url,
+                price: this.$store.state.product.price,
+                stock: this.$store.state.product.stock
+            }
+        }
+    },
+    methods: {
+        editProduct() {
+            const payload = {
+                id: this.newProductData.id,
+                name: this.newProductData.name,
+                image_url: this.newProductData.image_url,
+                price: this.newProductData.price,
+                stock: this.newProductData.stock
+            }
+            this.$store.dispatch("editProduct", payload);
+        }
+    }
+};
+</script>
+
+<style>
+</style>
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="login-form container mt-5">
+    <div class="row justify-content-center">
+      <div class="col-4 p-3 mt-5 shadow rounded">
+        <h1 class="mt-2" style="margin-bottom: 20px; font-weight: bold;">Identify Yourself!</h1>
+        <img
+            class="m-10"
+            src="../assets/logo3.png"
+        />
+        <form @submit.prevent="login" id="login-form">
+          <div class="form-group">
+            <i class="fa fa-user icon"></i>
+            <input
+              v-model="payload.email"
+              type="email"
+              class="form-control"
+              id="login-email"
+              aria-describedby="emailHelp"
+              placeholder="Email"
+              autocomplete="false"
+            />
+          </div>
+          <div class="form-group">
+            <i class="fa fa-key icon"></i>
+            <input
+              v-model="payload.password"
+              type="password"
+              class="form-control"
+              id="exampleInputPassword1"
+              placeholder="Password"
+              autocomplete="false"
+            />
+          </div>
+          <button type="submit" class="btn btn-success mt-4">Login</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'LoginForm',
+    data() {
+        return {
+            payload: {
+                email: '',
+                password: ''
+            }
+        }
+    },
+    methods: {
+        login() {
+            const payload = {
+                email: this.payload.email,
+                password: this.payload.password
+            }
+            this.$store.dispatch('login', payload);
+        }
+    }
+};
+</script>
+
+<style>
+</style>
diff --git a/src/components/ProductCard.vue b/src/components/ProductCard.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="product-card">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm">
+          <div class="card" style="width: 18rem">
+            <img :src="products.image_url" class="product-image card-img-top" />
+            <div class="card-body">
+              <h5 class="card-title">
+                <strong>{{ products.name }}</strong>
+              </h5>
+              <p class="card-text">Price : Rp. {{ products.price }}</p>
+              <p class="card-text">Stock : {{ products.stock }}</p>
+              <p class="card-text">ID : {{ products.id }}</p>
+            </div>
+            <div class="card-body">
+              <button @click="jumpToEditProduct(products.id)">
+                Edit
+              </button>
+              <button
+                @click.prevent="deleteProduct(products.id)"
+                class="delete-btn"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'ProductCard',
+    props: ['products'],
+    methods: {
+      jumpToEditProduct(payload) {
+        this.$store.commit('SET_PRODUCT', this.products)
+        this.$router.push({ name: 'EditProduct', params: {id: payload} })
+      },
+      deleteProduct(payload) {
+        this.$store.dispatch('deleteProduct', payload)
+      }
+    }
+};
+</script>
+
+<style>
+.product-card{
+  margin: 10px;
+}
+
+.product-image{
+  padding: 10px;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,42 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+import Login from '../views/Login.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login
+  },
+  {
+    path: '/addproduct',
+    name: 'AddProduct',
+    component: () => import('../views/AddProduct.vue')
+  },
+  {
+    path: '/editproduct/:id',
+    name: 'EditProduct',
+    component: () => import('../views/EditProduct.vue')
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: () => import('../views/About.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,147 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from 'axios'
+import router from '../router'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    products: [],
+    product: [],
+    banners: [],
+    //banner: [],
+    isLogin: false
+  },
+  mutations: { 
+    SET_PRODUCTS(state, productsData) {
+      state.products = productsData
+    },
+    SET_PRODUCT(state, productData) {
+      state.product = productData
+    },
+    SET_LOGINSTATUS(state, loginStatus) {
+      state.isLogin = loginStatus
+    },
+    ADD_NEWPRODUCT(state, newProduct) {
+      state.products.push(newProduct);
+    }
+  },
+  actions: {
+    login(context, payload){
+      axios({
+        method: 'POST',
+        url: 'http://localhost:3000/login',
+        data: {
+          email: payload.email,
+          password: payload.password
+        }
+      })
+      .then(({data}) => {
+        const access_token = data.access_token
+        const role = data.role
+        localStorage.setItem('access_token', access_token)
+        localStorage.setItem('role', role)
+        context.commit('SET_LOGINSTATUS', true);
+        router.push({ name: 'Dashboard' })
+      })
+      .catch(error => {
+        console.log("Error From Login", error);
+      })
+    },
+    fetchProducts(context, payload) {
+      axios({
+        method: 'GET',
+        url: 'http://localhost:3000/products',
+        headers: {
+          access_token: localStorage.getItem('access_token')
+        }
+      })
+      .then(({data}) => {
+        console.log(data);
+        context.commit('SET_PRODUCTS', data)
+      })
+      .catch(error => {
+        console.log(error);
+      })
+    },
+    addProduct(context, payload) {
+      const access_token = localStorage.getItem('access_token')
+      const role = localStorage.getItem('role')
+
+      axios({
+        method: 'POST',
+        url: 'http://localhost:3000/products',
+        headers: {
+          access_token: access_token,
+          role: role
+        },
+        data: {
+          name: payload.name,
+          image_url: payload.image_url,
+          price: payload.price,
+          stock: payload.stock
+        }
+      })
+      .then(({data}) => {
+        console.log("New Product Added!");
+        context.commit('ADD_NEWPRODUCT', data);
+        router.push({ name: 'Home' });
+      })
+      .catch(error => {
+        console.log("New Product Failed!");
+        console.log(error);
+      })
+    },
+    editProduct(context, payload) {
+      const productId = payload.id;
+      const access_token = localStorage.getItem('access_token');
+      const role = localStorage.getItem('role');
+
+      axios({
+        method: 'PUT',
+        url: `http://localhost:3000/products/${productId}`,
+        headers: {
+          access_token: access_token,
+          role: role
+        },
+        data: {
+          name: payload.name,
+          image_url: payload.image_url,
+          price: payload.price,
+          stock: payload.stock
+        }
+      })
+      .then(({data}) => {
+        const index = context.state.products.findIndex((el) => el.id === productId);
+        context.state.products[index] = data;
+        router.push({ name: 'Home' })
+      })
+      .catch(error => {
+        console.log(error);
+      })
+    },
+    deleteProduct(context, payload) {
+      const access_token = localStorage.getItem('access_token');
+      const role = localStorage.getItem('role');
+
+      axios({
+        method: 'DELETE',
+        url: `http://localhost:3000/products/${payload}`,
+        headers: {
+          access_token: access_token,
+          role: role
+        }
+      })
+      .then(() => {
+        const index = context.state.products.findIndex((el) => el.id === payload);
+        context.state.products.splice(index, 1);
+      })
+      .catch(error => {
+        console.log(error);
+      })
+    }
+  },
+  modules: {
+  }
+})
diff --git a/src/views/About.vue b/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/src/views/AddProduct.vue b/src/views/AddProduct.vue
@@ -0,0 +1,18 @@
+<template>
+    <AddForm/>
+</template>
+
+<script>
+import AddForm from "@/components/AddForm.vue";
+
+export default {
+    name: 'AddProduct',
+    components: {
+        AddForm
+    }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/EditProduct.vue b/src/views/EditProduct.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="container">
+        <EditForm/>
+    </div>
+</template>
+
+<script>
+import EditForm from '@/components/EditForm.vue'
+
+export default {
+    name: 'EditProduct',
+    components: {
+        EditForm
+    }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="home">
+    <div class="page-title">Welcome Home</div>
+    <button @click="jumpToAddProduct" type="button" class="btn btn-success">Add New Product</button>
+    <div class="container">
+      <ProductCard
+        v-for="product in products"
+        :key="product.id"
+        :products="product"
+      ></ProductCard>
+    </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import ProductCard from "@/components/ProductCard.vue";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      pageName: ''
+    }
+  },
+  components: {
+    ProductCard
+  },
+  created() {
+    this.$store.dispatch("fetchProducts");
+  },
+  computed: {
+    products () {
+      return this.$store.state.products;
+    }
+  },
+  methods: {
+    jumpToAddProduct() {
+      this.$router.push({ name: 'AddProduct' })
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+}
+</style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="login">
+    <LoginForm/>
+  </div>
+</template>
+
+<script>
+import LoginForm from '@/components/LoginForm.vue'
+
+export default {
+  name: 'Login',
+  components: {
+    LoginForm
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    lintOnSave: true
+}