From 8381c62fd88e495d82cf2fe98f18f0077ec00a71 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 25 May 2020 16:28:03 +0100
Subject: [PATCH] feat(setup flow): added registration form

---
 frontend/src/AppSetup.vue                    |  2 +-
 frontend/src/components/RegistrationForm.vue | 38 +++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/src/AppSetup.vue b/frontend/src/AppSetup.vue
index b74efe4f5..fa17be781 100644
--- a/frontend/src/AppSetup.vue
+++ b/frontend/src/AppSetup.vue
@@ -4,7 +4,7 @@
       <v-container align="center" mt-10>
         <v-row wrap justify='center'>
           <v-col sm='12' md='12' class='text-center'>
-            <h1 class='display-2 font-weight-light'>Welcome to your new Speckle Server!</h1>
+            <h1 class='display-2 font-weight-light mb-5'>Welcome to your new Speckle Server!</h1>
             <p class='subheading'>There's a bit of housekeeping to do first before we're ready to roll.</p>
           </v-col>
           <v-col cols='12' sm='12' md='12'>
diff --git a/frontend/src/components/RegistrationForm.vue b/frontend/src/components/RegistrationForm.vue
index f58abd770..dae1a23fe 100644
--- a/frontend/src/components/RegistrationForm.vue
+++ b/frontend/src/components/RegistrationForm.vue
@@ -2,14 +2,16 @@
   <v-container>
     <v-row align='center' justify='center'>
       <v-col xs='12' md='6'>
-        <v-form>
-          <p>Registering a first admin user will allow you to manage this Speckle Server.</p>
-          <v-text-field label='First Name' required></v-text-field>
-          <v-text-field label='Last Name' required></v-text-field>
-          <v-text-field label='Email' required type='email'></v-text-field>
-          <v-text-field label='Password' required type='password'></v-text-field>
-          <v-text-field label='Confirm Password' required type='password'></v-text-field>
-          <v-btn>Submit</v-btn>
+        <v-form ref="form" v-model="valid">
+          <v-alert type="info" :icon='false' text>
+            Since you have deployed this server, you need to register first. This will grant you admin rights and allow you to manage this server.
+          </v-alert>
+          <v-text-field label='First Name' v-model="firstName" required :rules="nameRules"></v-text-field>
+          <v-text-field label='Last Name' v-model="lastName" required :rules="nameRules"></v-text-field>
+          <v-text-field label='Email' v-model="email" required type='email' :rules="emailRules"></v-text-field>
+          <v-text-field label='Password' v-model="password" required type='password'></v-text-field>
+          <v-text-field label='Confirm Password' v-model="confirmPassword" required type='password'></v-text-field>
+          <v-btn @click="submit">Submit</v-btn>
         </v-form>
       </v-col>
     </v-row>
@@ -17,8 +19,26 @@
 </template>
 <script>
 export default {
+  methods: {
+    submit( ) {
+      let test = this.$refs.form.validate( )
+      if( !test ) return
+      
+    }
+  },
   data: ( ) => ( {
-
+    valid: true,
+    firstName: '',
+    lastName: '',
+    nameRules: [
+      v => !!v || 'Name is required',
+      v => ( v && v.length <= 10 ) || 'Name must be less than 10 characters',
+    ],
+    email: '',
+    emailRules: [
+      v => !!v || 'E-mail is required',
+      v => /.+@.+\..+/.test( v ) || 'E-mail must be valid',
+    ],
   } )
 }
 </script>
\ No newline at end of file