added image upload input to register form | added some error messaging

fluxsocial · Dec 12, 2019 · 28d3d61 · 28d3d61
1 parent 8ce5386
commit 28d3d61
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 29 deletions.
diff --git a/ui-src/css/style.css b/ui-src/css/style.css
@@ -538,25 +538,6 @@ body {
   height: 100vh;
   width: 100vw; }
 
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: inherit; }
-
-html {
-  font-size: 62.5%; }
-
-body {
-  font-family: 'Avenir', 'Raleway', sans-serif;
-  box-sizing: border-box;
-  font-weight: 400;
-  line-height: 1.6;
-  overflow-x: hidden;
-  outline: none;
-  letter-spacing: .5px; }
-
 .register {
   display: flex;
   flex-flow: row nowrap;
@@ -694,6 +675,43 @@ body {
     .register__form .form-group input:not(:valid):not(:focus) + label {
       animation-name: shake-shake;
       animation-duration: .3s; }
+  .register__form .file-upload {
+    outline: 2px dashed #eee;
+    -moz-outline-radius: 5px;
+    min-height: 150px;
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    margin-top: 66px; }
+    .register__form .file-upload-header {
+      position: absolute;
+      top: -40px; }
+      .register__form .file-upload-header p {
+        font-size: 16px;
+        line-height: 16px;
+        letter-spacing: -0.45px;
+        margin: 0;
+        color: #777;
+        opacity: 1; }
+    .register__form .file-upload #profile-picture {
+      opacity: 0;
+      width: 100%;
+      height: 150px;
+      position: absolute;
+      cursor: pointer;
+      padding: 0; }
+    .register__form .file-upload label {
+      font-size: 1.2rem;
+      text-align: center;
+      width: 100%;
+      color: #333;
+      cursor: pointer;
+      transform: none !important; }
+      .register__form .file-upload label .image-name {
+        font-weight: 900;
+        color: #333; }
+    .register__form .file-upload:hover {
+      outline: 2px dashed #333; }
 
 @keyframes shake-shake {
   0% {

diff --git a/ui-src/src/components/User/Register/Register.scss b/ui-src/src/components/User/Register/Register.scss
@@ -1,5 +1,3 @@
-@import '../../../../sass/base';
-
 .register{
     display: flex;
     flex-flow: row nowrap;
@@ -154,6 +152,57 @@
         }
     }
 
+    &__form .file-upload{
+        outline: 2px dashed $junto-grey-2;
+        -moz-outline-radius: 5px;
+        min-height: 150px;
+        position: relative;
+        cursor: pointer;
+        padding:0;
+        margin-top: 66px;
+
+        &-header{
+            position: absolute;
+            top: -40px;
+
+            p{
+                font-size: 16px;
+                line-height: 16px;
+                letter-spacing: -0.45px;
+                margin: 0;
+                color: #777;
+                opacity: 1;
+            }
+        }
+
+        #profile-picture{
+            opacity: 0;
+            width: 100%;
+            height: 150px;
+            position: absolute;
+            cursor: pointer;
+            padding: 0;
+        }
+
+        label{
+            font-size: 1.2rem;
+            text-align: center;
+            width: 100%;
+            color:$junto-grey;
+            cursor: pointer;
+            transform: none !important;
+
+            .image-name{
+                font-weight: 900;
+                color: $junto-grey;
+            }
+        }
+
+        &:hover{
+            outline: 2px dashed $junto-grey;
+        }
+    }
+
     $displacement:  3px; 
     @keyframes shake-shake {
         0% { transform: translateX(-$displacement);}

diff --git a/ui-src/src/components/User/Register/Register.vue b/ui-src/src/components/User/Register/Register.vue
@@ -3,7 +3,7 @@
     <div class="register__content">
       <div class="register__left"></div>
 
-      <form @submit.prevent class="register__form">
+      <form class="register__form" @submit.prevent enctype="multipart/form-data">
         <div class="register__form__child">
           <h3>Welcome to <span>Junto</span></h3>
           <p>Register here! You will be automagically logged in when you return.</p>
@@ -39,25 +39,29 @@
             />
             <label for="username">Username:</label>
           </div>
-          <div class="form-group">
+          <div class="form-group file-upload">
+            <div class="file-upload-header">
+              <p>Upload a profile picture</p>
+            </div>
             <input
               id="profile-picture"
-              v-model="userData.profile_picture"
-              type="text"
+              @change="processFile($event)"
+              type="file"
+              accept="image/*"
               class="form-control"
               placeholder="Upload a profile picture"
             />
-            <label for="profile-picture">Upload a profile picture</label>
+            <label id="profile-picture-label" for="profile-picture">Drag your image here <br> or click to browse</label>
           </div>
           <div class="form-group">
             <textarea
               id="bio"
               v-model="userData.bio"
               type="text"
               class="form-control"
-              placeholder="Write something about yourself"
+              placeholder="Write something for your bio"
             />
-            <label for="bio">Write something about yourself:</label>
+            <label for="bio">Write something for your bio:</label>
           </div>
         </div>
         <div class="register__submit register__form__child">
@@ -88,6 +92,22 @@ export default {
   methods: {
     registerHttp(event) {
       registerUser(this, this.userData);
+      console.log(this.userData);
+    },
+    processFile(event){
+      if(!event.target.files[0] || event.target.files[0].type.startsWith('image/') == false ){
+        this.$notify({
+          type: "error",
+          group: "main",
+          title: "Incorrect image format",
+          text: "Accepted formats: jpg, jpeg, png, svg",
+          duration: 3000
+        });
+      }else{
+        console.log(event);
+        event.target.labels[0].innerHTML = 'Uploaded image: <span class="image-name">' + event.target.files[0].name + '</span>';
+        this.userData.profile_picture = event.target.files[0];  //userData.profile_picture expects a string.
+      } 
     }
   }
 };

diff --git a/ui-src/src/components/User/Register/RegisterHttp.js b/ui-src/src/components/User/Register/RegisterHttp.js
@@ -24,7 +24,7 @@ function registerUser(template, userData) {
           type: "error",
           group: "main",
           title: "There was an error creating the account. Error is: " + result,
-          duration: 1000
+          duration: 3000
         });
       }
     }