bold-fox-2018 · adiaskaputra · Mar 11, 2019 · Mar 12, 2019 · Mar 12, 2019 · Mar 12, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+server/node_modules
+server/zNote.txt
+server/.env
+server/credentials.json
+server/keyfile.json
diff --git a/README.md b/README.md
@@ -1 +1,22 @@
-# mini-wp
+# mini-wp
+API Documentation yang meliputi :  URLs, HTTP method,  request,  response (success dan error case)
+
+## Todo Article
+**Note:**  *  *is required*
+
+HTTP  | Route | headers |form-data | Description | Success | Error
+------|-------|--------|-----|--------------|---------|------
+GET     | <span style='color:#00cec9'> /articles     </span>   | token |                                        | <span style='color:#00cec9'> Get all Articles (Authenticate User Only) </span>   | Array of Objects <br> [ { _id, title, content, createdAt, image, userID } ]         | Object <br> { message }
+POST    | <span style='color:#00cec9'> /articles     </span>   | token | *title, *content, *image, *createdAt     | <span style='color:#00cec9'>  Create a Article (Authenticate User Only) </span>  | A new Article <br> Object {  _id, title, content, createdAt, image, userID }      | Object <br> { message }
+DELETE  | <span style='color:#00cec9'> /articles/:id </span>   | token |                                        | <span style='color:#00cec9'> Delete a Article (Authenticate User Only)   </span> | Info deleted Article <br> Object { n, ok, deletedCount }                            | Object <br> { message }
+PUT     | <span style='color:#00cec9'> /articles/:id </span>   | token | *title, *content, *image, *createdAt     | <span style='color:#00cec9'> Update a Article (Authenticate User Only) </span>   | A updated Article <br> Object {  _id, title, content, createdAt, image, userID }  | Object <br> { message }
+
+<br>
+
+## User Route
+
+HTTP | ROUTE | body | Description | Success | Error
+-----|-------|------|-------------|---------|------
+POST    | <span style='color:#00cec9'>/users/register </span>   |   *email, *password  | <span style='color:#00cec9'> Register User   </span>                   | Object <br> { message, token } | Object <br> { message }
+POST    | <span style='color:#00cec9'>/users/login </span>      |   *email, *password  | <span style='color:#00cec9'> Login User   </span>                      | Object <br> { message, token } | Object <br> { message }
+POST    | <span style='color:#00cec9'>/users/loginGoogle</span> |   *email             | <span style='color:#00cec9'> Login / Register User Via Google   </span>| Object <br> { message, token } | Object <br> { message }
diff --git a/client/asset/components/contentEditArticle.js b/client/asset/components/contentEditArticle.js
@@ -0,0 +1,20 @@
+Vue.component('edit-article', {
+    props: ['article'],
+    components: {
+        wysiwyg: vueWysiwyg.default.component,
+    },
+    methods: {
+        updateArticle() {
+            this.$emit('user-edit-article')
+        }
+    },
+    template: `
+    <div class="post-article">
+        <form v-on:submit.prevent="updateArticle()">
+          <input class="btn btn-info" type="submit" value="Update" />
+          <input v-model="article.title" class="form-control" type="text" placeholder="Enter title" />
+          <wysiwyg class="wysiwyg" v-model="article.content" />
+        </form>
+    </div>
+    `
+})
diff --git a/client/asset/components/contentListArticle.js b/client/asset/components/contentListArticle.js
@@ -0,0 +1,43 @@
+Vue.component('list-article', {
+    props: ['articles', 'article'],
+    methods: {
+        edit(payload) {
+            this.$emit('user-edit', payload);
+        },
+        deleteArticle(payload) {
+            this.$emit('user-delete', payload);
+        }
+    },
+    template: `
+    <div>
+      <div class="card" v-for="(item, index) in articles">
+        <img class="card-img-top" :src="item.image"  alt="Card image cap">
+        <div class="card-header">
+        {{item.title}}
+        </div>
+        <div class="card-body">
+            <span class="created">
+                {{ item.createdAt }}
+            </span>
+            <span class="action">
+                <a @click.prevent="deleteArticle(item._id); article.indexArticle=index;"
+                  href="#">
+                <i class="fas fa-trash"></i>
+                </a>
+                <a @click="edit({
+                  page: 'edit_article',
+                  indexArticle: index,
+                  id: item._id,  
+                  title: item.title,    
+                  content: item.content})"
+                 href="#">
+                <i class="fas fa-pen-square"></i>
+                </a>
+            </span>
+            <br>
+            <span class="text" v-html="item.content"></span>
+        </div>
+      </div>
+    </div>
+    `
+})
diff --git a/client/asset/components/contentPostArticle.js b/client/asset/components/contentPostArticle.js
@@ -0,0 +1,24 @@
+Vue.component('post-article', {
+    props: ['article'],
+    methods: {
+        handleFileUpload() {
+            this.article.image = this.$refs.file.files[0];
+        },
+        createArticle() {
+            this.$emit('user-post-article')
+        },
+    },
+    components: {
+        wysiwyg: vueWysiwyg.default.component,
+    },
+    template: `
+    <div class="post-article">
+    <form v-on:submit="createArticle">
+      <input class="btn btn-info" type="submit" value="Post" />
+      <input type="file" @change="handleFileUpload" class="mt-3" id="file" ref="file"></input>
+      <input v-model="article.title" class="form-control" type="text" placeholder="Title" />
+      <wysiwyg class="wysiwyg" v-model="article.content" />
+    </form>
+  </div>
+    `
+})
diff --git a/client/asset/components/header.js b/client/asset/components/header.js
@@ -0,0 +1,40 @@
+Vue.component('component-header', {
+  methods: {
+    listArticle() {
+      this.$emit('nav-page', 'list_article')
+    },
+    postArticle() {
+      this.$emit('nav-page', 'post_article')
+    },
+    logout(){
+      this.$emit('logout')
+    }
+  },
+  template: `
+  <div id="header">
+  <nav class="d-flex justify-content-between">
+    <div id="logo">
+      <a href="#"><i class="fab fa-wordpress-simple logo"></i></a>
+    </div>
+    <div id="links" class="d-flex  align-items-center">
+      <ul>
+        <li @click="listArticle">
+          <a href="#"> List Article</a>
+        </li>
+        <li @click="postArticle" >  
+          <a href="#"> Post Article</a>
+        </li>
+      </ul>
+        <li @click="logout">
+          <a href="#">L O G O U T</a>
+        </li>
+      </div>
+      <div id="icons" class="d-flex  align-items-center">
+        <a href="#" @click="postArticle"><i class="far fa-edit"></i></a>
+        <a href="#"><i class="far fa-bell"></i></a>
+        <a href="#"> <i class="fa fa-user"></i></a>
+      </div>
+    </nav>
+  </div>
+    `
+})
diff --git a/client/asset/components/landingPage.js b/client/asset/components/landingPage.js
@@ -0,0 +1,32 @@
+Vue.component('landing-page', {
+  props: ['user'],
+  methods: {
+    login() {
+      this.$emit('user-login')
+    },
+    register() {
+      this.$emit('user-register')
+    },
+  },
+  template: `
+    <div  class="landingPage d-flex justify-content-center align-items-center">
+    <div  class="form-login">
+      <form>
+        <input v-model="user.email" type="text" class="form-control" placeholder="Enter email" />
+        <input v-model="user.password" type="password" class="form-control" placeholder="Enter password" />
+        <br>
+        <button @click.prevent="login()" class="btn btn-info" style="float: left;">
+          L O G I N
+        </button>
+        <button @click.prevent="register()" class="btn btn-warning" style="float: left;">
+          R E G I S T E R
+        </button>
+        <br><br>
+        <!-- G O O G L E -->
+        <div id="my-signin2"></div>
+        </form>
+    </div>
+  </div>
+
+    `
+})
diff --git a/client/asset/components/sidebar.js b/client/asset/components/sidebar.js
@@ -0,0 +1,88 @@
+Vue.component('component-sidebar',{
+    template:`
+    <div id="sidebar" class="col-sm-2">
+          <!-- S I D E B A R  1 -->
+          <ul>
+            <a href="#">
+              <li>
+                <i class="fa fa-laptop"></i>
+                <span class="nav-text">View Site</span>
+              </li>
+            </a>
+            <a href="#">
+              <li>
+                <i class="fas fa-chart-bar"></i>
+                <span class="nav-text">Stats</span>
+              </li>
+            </a>
+            <a href="#">
+              <li>
+                <i class="fas fa-people-carry"></i>
+                <span class="nav-text">Activity</span>
+              </li>
+            </a>
+            <a href="#">
+              <li>
+                <i class="fas fa-diagnoses"></i>
+                <span class="nav-text">Plan</span>
+              </li>
+            </a>
+          </ul>
+          <!-- S I D E B A R  2 -->
+          <span>Manage</span>
+          <ul>
+            <a href="#">
+              <li>
+                <i class="fas fa-file-alt"></i>
+                <span class="nav-text">Site Pages</span>
+              </li>
+            </a>
+            <a href="#">
+              <li>
+                <i class="fas fa-rss-square"></i>
+                <span class="nav-text">Blog Posts</span>
+              </li>
+            </a>
+            <a href="#">
+              <li>
+                <i class="fas fa-keyboard"></i>
+                <span class="nav-text">Media</span>
+              </li>
+            </a>
+            <a href="#">
+              <li>
+                <i class="fas fa-comments"></i>
+                <span class="nav-text">Comments</span>
+              </li>
+            </a>
+            <a href="#">
+              <li>
+                <i class="fas fa-comment-alt"></i>
+                <span class="nav-text">Feedback</span>
+              </li>
+            </a>
+            <a href="#"></a>
+            <li>
+              <i class="fas fa-plug"></i>
+              <span class="nav-text">Plugins</span>
+            </li>
+            <a href="#">
+              <li>
+                <i class="fas fa-file-import"></i>
+                <span class="nav-text">Imports</span>
+              </li>
+            </a>
+          </ul>
+          <!-- S I D E B A R  3 -->
+          <span>Personalize</span>
+          <ul id="navigation3">
+            <a href="#">
+              <li>
+                <i class="fas fa-tools"></i>
+                <span class="nav-text">Customize</span>
+              </li>
+            </a>
+          </ul>
+        </div>
+    `
+})
diff --git a/client/asset/css/content.css b/client/asset/css/content.css
@@ -0,0 +1,103 @@
+#content .separator {
+    color: #2f3640;
+    font-size: 25px;
+}
+
+/* S E A R C H | B O A R D  1*/
+
+#content .search {
+    position: relative;
+    background-color: white;
+    border: solid 1px #d1ccc0;
+}
+
+#content .search .published, #content .search .draft {
+    padding: 2% 2% 2% 2%;
+}
+
+#content .search .published {
+    border-bottom: solid 2px #cd6133;
+}
+
+#content .fa-search {
+    position: absolute;
+    right: 0px;
+    padding: 2%;
+    font-size: 27px;
+    /* background-color: red; */
+}
+
+/* I M G   B O A R D  2 */
+
+#content .notif {
+    padding: 0px 2%;
+    text-align: left;
+    position: relative;
+    margin: 2% 0%;
+    background-color: white;
+    border: solid 1px #d1ccc0;
+}
+
+#content .notif .fa-ellipsis-h {
+    position: absolute;
+    right: 0px;
+    float: right;
+    font-size: 25px;
+    margin: 1.5% 1%;
+}
+
+#content .notif img {
+    min-width: 40px;
+    min-height: 40px;
+    max-width: 100px;
+    max-height: 1000px;
+}
+
+#content .notif .medium {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+#content .notif .x-small {
+    font-size: 9px;
+}
+
+/* L I S T  ARTICLE*/
+
+#content .card {
+    margin-bottom: 5px;
+    border: solid 1px #2E5489;
+}
+
+#content .card-header {
+    background-color: #2E5489;
+    font-size: 19px;
+    color: white;
+}
+
+#content .card-footer {
+    background-color: #2E5489;
+    font-size: 19px;
+    padding: 0px;
+}
+
+#content .action .fas {
+    color: #2A2A2A;
+    font-size: 20px;
+}
+
+#content .text {
+    padding: 10px;
+}
+
+/* P O S T ARTICLE */
+
+#content .post-article {
+    margin-top: 3%;
+    text-align: left;
+}
+
+#content .post-article .btn {
+    float: right;
+    margin: 1%;
+}