Make CreateSmiles functional, basic implementation of ManageSmiles

8 files changed, 262 insertions, 104 deletions

diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
index 8ab29b2..2eedc83 100644
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -14,15 +14,20 @@ export default {
         return {
             items: [
                 {
-                    label:'Home',
-                    icon:'pi pi-fw pi-home',
-                    to:'/'
+                    label: 'Home',
+                    icon: 'pi pi-fw pi-home',
+                    to: '/'
                 },
                 {
-                    label:'New Smile',
-                    icon:'pi pi-fw pi-user-plus',
-                    to:'/new'
+                    label: 'Create Smiles',
+                    icon: 'pi pi-fw pi-user-plus',
+                    to: '/create'
                 },
+                {
+                    label: 'huh',
+                    icon: 'pi pi-fw pi-user-plus',
+                    to: '/5a1PNZAMafXGGEFU17xcRX3bx6wyebeK/lNtEBCOd5yLlXT5enRQoh4ai4q3vcg7F'
+                }
             ]
         }
     }
diff --git a/client/src/main.js b/client/src/main.js
index 76a71b3..03f0e65 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -11,6 +11,8 @@ import Button from 'primevue/button';
 import Card from 'primevue/card';
 import Toast from 'primevue/toast';
 import ProgressBar from 'primevue/progressbar';
+import Message from 'primevue/message';
+import FileUpload from 'primevue/fileupload';
 
 import 'primevue/resources/themes/lara-dark-blue/theme.css';
 import 'primevue/resources/primevue.min.css';
@@ -28,6 +30,8 @@ app.component('InputText', InputText);
 app.component('Button', Button);
 app.component('Card', Card);
 app.component('Toast', Toast);
+app.component('Message', Message);
 app.component('ProgressBar', ProgressBar);
+app.component('FileUpload', FileUpload);
 
 app.mount('#app');
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 123941b..a2f52ac 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -1,9 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
 import Home from '../views/Home.vue';
-import NewSmile from '../views/NewSmile.vue';
+import CreateSmiles from '../views/CreateSmiles.vue';
 import GetSmile from '../views/GetSmile.vue';
-import UploadSmile from '../views/UploadSmile.vue';
+import ManageSmiles from '../views/ManageSmiles.vue';
 
 const routes = [
     {
@@ -12,23 +12,23 @@ const routes = [
         component: Home
     },
     {
-        path: '/new',
-        name: 'New Smile',
+        path: '/create',
+        name: 'CreateSmiles',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         // component: () => import(/* webpackChunkName: "about" */ '../views/NewSmile.vue')
-        component: NewSmile
+        component: CreateSmiles
     },
     {
         path: '/:id',
-        name: 'Get Smile',
+        name: 'GetSmile',
         component: GetSmile
     },
     {
         path: '/:id/:auth',
-        name: 'Upload Smile',
-        component: UploadSmile
+        name: 'ManageSmiles',
+        component: ManageSmiles
     }
 ];
 
diff --git a/client/src/views/CreateSmiles.vue b/client/src/views/CreateSmiles.vue
new file mode 100644
index 0000000..7c285f0
--- /dev/null
+++ b/client/src/views/CreateSmiles.vue
@@ -0,0 +1,141 @@
+<template>
+<div class="new-smile">
+  <p id="subtitle">Create Smiles :)</p>
+
+  <div class="card">
+    <Message v-if="smileCreated" severity="success">Smile Created.</Message>
+    <div class="grid">
+      <div class="col-12 md:col-6">
+        <div v-if="smileCreated">
+          <ul>
+            <li>Click to copy the links.</li>
+            <li>Share the <strong>public</strong> link with your friends.</li>
+            <li>Keep the <strong>private</strong> link for yourself.</li>
+          </ul>
+        </div>
+        <div v-else>
+          <p>
+            Filling this form will create a new "Smile Collection" for
+            you, you can add your smiles to the collection using
+            the <strong>private</strong> and your friends can view them
+            using the <strong>public</strong> link.
+          </p>
+        </div>
+      </div>
+      <div class="col-12 md:col-6 flex align-items-center
+                  justify-content-center">
+        <div v-if="smileCreated" class="smile-links">
+          <div class="grid">
+            <div class="col-12 lg:col-6">
+              <h5>Public</h5>
+              <span class="p-input-icon-left">
+                <i class="pi pi-share-alt" />
+                <InputText @click="copyPublic" v-model="id"
+                           type="text" placeholder="ID" readonly />
+              </span>
+            </div>
+            <div class="col-12 lg:col-6">
+              <h5>Private</h5>
+              <span class="p-input-icon-left">
+                <i class="pi pi-lock" />
+                <InputText @click="copyPrivate" v-model="auth"
+                           type="text" placeholder="Auth" readonly />
+              </span>
+            </div>
+          </div>
+        </div>
+        <div v-else class="p-inputgroup">
+          <InputText v-model="name" placeholder="Name" />
+          <Button @click="createSmile"
+                  icon="pi pi-user-plus" label="Create"
+                  class="p-button-success" />
+        </div>
+      </div>
+    </div>
+    <div v-if="smileCreated" style="text-align: center;">
+      <router-link :to="{ name: `ManageSmiles`, params: { id: `${id}`, auth: `${auth}` } }">
+        <Button label="Upload Smiles"  icon="pi pi-upload" />
+      </router-link>
+    </div>
+    <ProgressBar v-if="showProgress" mode="indeterminate" style="height: .4em;" />
+  </div>
+
+  <Toast />
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name: '',
+            showProgress: false,
+            id: '',
+            auth: '',
+        }
+    },
+    methods: {
+        copyPublic() {
+            navigator.clipboard.writeText(this.publicLink());
+            this.$toast.add({severity: 'success', icon: 'pi-user-plus',
+                             summary: 'Copied Public link to clipboard',
+                             life: 2000});
+        },
+        copyPrivate() {
+            navigator.clipboard.writeText(this.privateLink());
+            this.$toast.add({severity: 'success',
+                             summary: 'Copied Private link to clipboard',
+                             life: 2000});
+        },
+        publicLink() {
+            return window.location.href.replace('/create', '') + '/' + this.id;
+        },
+        privateLink() {
+            return window.location.href.replace('/create', '') + '/' + this.id + '/' + this.auth;
+        },
+        createSmile() {
+            if (this.name === '') {
+                this.$toast.add({severity: 'warn', summary: 'Invalid Name',
+                                 detail: 'Empty', life: 2000});
+                return;
+            }
+
+            const data = { name: this.name };
+            const toast = this.$toast;
+
+            this.showProgress = true;
+            fetch('http://localhost:9090/create', {
+                method: 'POST',
+                cache: 'no-cache',
+                headers: { 'Content-Type': 'application/json' },
+                referrerPolicy: 'no-referrer',
+                body: JSON.stringify(data)
+            }).then(response => {
+                if (!response.ok)
+                    throw new Error('HTTP error, status = ' + response.status);
+                return response.json();
+            }).then(res => {
+                this.id = res.id;
+                this.auth = res.auth;
+            }).catch(function(error) {
+                console.log(error)
+                toast.add({severity: 'error', summary: 'Service error', detail: error});
+            }).finally(() => {
+                this.showProgress = false;
+            });
+            // <<<< -- fat arrows mess with polymode formatting.
+        }
+    },
+    computed: {
+        smileCreated() {
+            return this.id.length > 0 && this.auth.length > 0;
+        },
+    }
+}
+</script>
+
+<style scoped>
+.new-smile li {
+    line-height: 1.6;
+}
+</style>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 880c380..50952b0 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -19,8 +19,8 @@
       </div>
       <div class="col-12 md:col-4 lg:col-6 flex align-items-center
                   justify-content-center">
-        <router-link to="/new">
-          <Button label="New Smile" icon="pi pi-user-plus" iconPos="left" />
+        <router-link to="/create">
+          <Button label="Create Smiles" icon="pi pi-user-plus" />
         </router-link>
       </div>
     </div>
diff --git a/client/src/views/ManageSmiles.vue b/client/src/views/ManageSmiles.vue
new file mode 100644
index 0000000..9a535b7
--- /dev/null
+++ b/client/src/views/ManageSmiles.vue
@@ -0,0 +1,96 @@
+<template>
+<div class="manage-smile">
+  <p id="subtitle">Manage Smiles :)</p>
+  <ProgressBar v-if="showLoading" mode="indeterminate" style="height: .4em;" />
+
+  <div v-if="!verified && !showLoading" style="text-align: center;">
+    <Button @click="verify" label="Try Again"
+            class="p-button-outlined  p-button-info p-button-lg" icon="pi pi-refresh" />
+  </div>
+
+  <div v-if="verified" class="card">
+    <div class="grid">
+      <div class="col-12 md:col-6">
+        <div class="col-12">
+          <span class="p-input-icon-left">
+            <i class="pi pi-user" />
+            <InputText v-model="name" type="text" readonly />
+          </span>
+        </div>
+        <div class="col-12">
+          <span class="p-input-icon-left">
+            <i class="pi pi-share-alt" />
+            <InputText @click="copyPublic" v-model="id" type="text" readonly />
+          </span>
+        </div>
+      </div>
+      <div class="col-12 md:col-6">
+        <FileUpload name="demo[]" url="/upload" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
+          <template #empty>
+            <p>Drag and drop files to here to upload.</p>
+          </template>
+        </FileUpload>
+      </div>
+    </div>
+  </div>
+
+  <Toast />
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name: '',
+            verified: false,
+            showLoading: true,
+            id: this.$route.params.id,
+            auth: this.$route.params.auth,
+        }
+    },
+    methods: {
+        copyPublic() {
+            navigator.clipboard.writeText(this.publicLink());
+            this.$toast.add({severity: 'success', icon: 'pi-user-plus',
+                             summary: 'Copied Public link to clipboard',
+                             life: 2000});
+        },
+        publicLink() {
+            let link = window.location.href.split('/').slice(0, -2);
+            link.push(this.id);
+            return link.join('/');
+        },
+        verify() {
+            const data = { id: this.id, auth: this.auth };
+            const toast = this.$toast;
+
+            this.showLoading = true;
+            fetch('http://localhost:9090/verify', {
+                method: 'POST',
+                cache: 'no-cache',
+                headers: { 'Content-Type': 'application/json' },
+                referrerPolicy: 'no-referrer',
+                body: JSON.stringify(data)
+            }).then(response => {
+                if (!response.ok)
+                    throw new Error('HTTP error, status = ' + response.status);
+                return response.json();
+            }).then(res => {
+                this.name = res.name;
+                console.log(res);
+                this.verified = true;
+            }).catch(error => {
+                console.log(error)
+                toast.add({severity: 'error', summary: 'Service error', detail: error});
+            }).finally(() => {
+                this.showLoading = false;
+                // <<<< -- fat arrows mess with polymode formatting.
+            });
+        },
+    },
+    beforeMount() {
+        this.verify();
+    },
+}
+</script>
diff --git a/client/src/views/NewSmile.vue b/client/src/views/NewSmile.vue
deleted file mode 100644
index f721d50..0000000
--- a/client/src/views/NewSmile.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-<div class="new-smile">
-  <p id="subtitle">Create a new Smile :)</p>
-
-  <div class="card">
-    <div class="grid">
-      <div class="col-12 md:col-6">
-        <p>
-          Filling this form will create a new "Smile Collection" for
-          you, you can add your smiles to the collection using
-          the <strong>private</strong> and your friends can view them
-          using the <strong>public</strong> link.
-        </p>
-      </div>
-      <div class="col-12 md:col-6 flex align-items-center justify-content-center">
-        <div class="p-inputgroup">
-          <InputText v-model="name" placeholder="Name" />
-          <Button @click="createSmile"
-                  icon="pi pi-user-plus" label="Create" class="p-button-success" />
-        </div>
-      </div>
-    </div>
-    <ProgressBar v-if="showProgress" mode="indeterminate" style="height: .4em;" />
-  </div>
-
-  <Toast />
-</div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            name: '',
-            showProgress: false
-        }
-    },
-    methods: {
-        createSmile() {
-            if (this.name === '') {
-                this.$toast.add({severity:'warn', summary: 'Invalid Name',
-                                 detail:'Empty', life: 2000});
-                return;
-            }
-            this.showProgress = true;
-            console.log('Name', this.name);
-
-            // const options = {
-            //     method: 'POST',
-            //     body: JSON.stringify( {
-            //         param1: "d",
-            //         param2: "d"
-            //     } )
-            // };
-
-            fetch('flowers.jpg')
-                .then(function(response) {
-                    if (!response.ok) {
-                        throw new Error('HTTP error, status = ' + response.status);
-                    }
-                    console.log(response);
-                    return response.blob();
-
-                })
-                .then(function(myBlob) {
-                    console.log(myBlob)
-                })
-                .catch(function(error) {
-                    console.log(error)
-                });
-
-            // fetch( '/path/', options )
-            //     .then( response => response.json() )
-            //     .then( response => {
-            //         console.log(response);
-            //         // Do something with response.
-            //     } );
-        }
-    }
-    }
-</script>
diff --git a/client/src/views/UploadSmile.vue b/client/src/views/UploadSmile.vue
deleted file mode 100644
index 67e1dd9..0000000
--- a/client/src/views/UploadSmile.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-<div class="upload-smile">
-  <p id="subtitle">Upload a Smile :)</p>
-
-  <Toast />
-</div>
-</template>