UI improvements

ui/.prettierrc.yml

@@ -1,2 +1,3 @@
 tabWidth: 2
 singleQuote: true
+semi: false

ui/src/App.vue

@@ -6,7 +6,7 @@
       hide-overlay
       app
       clipped
-      style="background-color: rgba(37,37,37,0.8);"
+      style="background-color: rgba(37, 37, 37, 0.8)"
       mini-variant
       v-if="this.$store.state.auth.user !== null"
     >
@@ -24,20 +24,31 @@
             </v-list-item-action>
             <v-list-item-content>
               <v-list-item-title>{{ item.name }}</v-list-item-title>
-              <v-list-item-subtitle v-if="item.hasOwnProperty('subtitle')">{{ item.subtitle }}</v-list-item-subtitle>
+              <v-list-item-subtitle v-if="item.hasOwnProperty('subtitle')">{{
+                item.subtitle
+              }}</v-list-item-subtitle>
             </v-list-item-content>
           </v-list-item>
         </v-list-item-group>
       </v-list>
     </v-navigation-drawer>
-
-    <v-app-bar app color="primary" dark clipped-left v-if="this.$store.state.auth.user !== null">
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" v-if="drawer == true">
-        <v-icon>mdi-close</v-icon>
-      </v-app-bar-nav-icon>
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" v-else>
-        <v-icon>mdi-menu</v-icon>
-      </v-app-bar-nav-icon>
+    <v-app-bar
+      app
+      color="primary"
+      dark
+      clipped-left
+      v-if="this.$store.state.auth.user !== null"
+    >
+      <div class="hamburger" style="width: " v-if="this.$vuetify.breakpoint.mdAndDown">
+        <v-app-bar-nav-icon
+          @click.stop="drawer = !drawer"
+          v-if="drawer == true"
+        />
+        <v-app-bar-nav-icon
+          @click.stop="drawer = !drawer"
+          v-else
+        />
+      </div>
       <v-toolbar-title class="ma-0">
         <div>
           <v-img
@@ -50,16 +61,18 @@
             width="120"
             height="42"
             @click="gotoLanding()"
-            style="cursor: pointer;"
+            style="cursor: pointer"
           />
         </div>
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
-      <span style="cursor: pointer; margin-right: 0.125em" v-on:click="$router.push('/account')" class="font-weight-bold">
-        <v-icon class="align-center" size="24">
-          mdi-account-circle
-        </v-icon>
+      <span
+        style="cursor: pointer; margin-right: 0.125em"
+        v-on:click="$router.push('/account')"
+        class="font-weight-bold"
+      >
+        <v-icon class="align-center" size="24"> mdi-account-circle </v-icon>
         {{ this.$store.state.auth.user.profile.preferred_username }}
       </span>
       <v-btn text v-on:click="$router.push('/accounts/logout', () => {})">
@@ -72,21 +85,21 @@
       </v-slide-y-transition>
       <v-footer
         app
-        style="background-color: rgba(22,22,22,0.80)"
+        style="background-color: rgba(22, 22, 22, 0.8)"
         v-if="this.$store.state.auth.user !== null"
       >
         <small>
           &copy; 2021 UCC Networking Society
           <span> &bull; </span>
-          <a
-            target="_blank"
-            href="https://github.com/UCCNetsoc/cloud"
-          >Open Source Software</a>
+          <a target="_blank" href="https://github.com/UCCNetsoc/cloud"
+            >Open Source Software</a
+          >
           <span> &bull; </span>
           <a
             target="_blank"
             href="https://github.com/UCCNetsoc/wiki/blob/master/services/terms-of-service.md"
-          >Terms of Service</a>
+            >Terms of Service</a
+          >
         </small>
         <v-spacer></v-spacer>
         <a href="https://discord.netsoc.co" class="ml-1">
@@ -96,13 +109,17 @@
         <a
           href="https://github.com/UCCNetsoc"
           class="ml-1"
-          style="padding-bottom: 7px; display:block; border-bottom: 2px solid white"
+          style="
+            padding-bottom: 7px;
+            display: block;
+            border-bottom: 2px solid white;
+          "
         >
           <v-img
             width="24"
             height="24"
             src="@/assets/github.svg"
-            style="margin-bottom: -4px; margin-top: 4px;"
+            style="margin-bottom: -4px; margin-top: 4px"
           />
         </a>
         <a href="https://twitter.com/UCCNetsoc" class="ml-1">
@@ -202,12 +219,12 @@ export default Vue.extend({
       i++
     }
 
-    if (this.selectedMenu !== 0) {
-      this.drawer = true
-    } else {
-      // Hide drawer if we're on a non-menu page
-      this.drawer = false
-    }
+    // if (this.selectedMenu !== 0) {
+    //   this.drawer = true
+    // } else {
+    //   // Hide drawer if we're on a non-menu page
+    //   this.drawer = false
+    // }
   }
 })
 </script>

ui/src/components/InstancesList.vue

@@ -582,15 +582,18 @@
           <code>{{ instances[confirmCancel.action.hostname].fqdn }}:42069</code><br/>
           to be sent to port <code>8080</code> inside your instance<br/><br/>
 
-          <b class="warning--text">You should not create mappings to the following internal ports:</b>
+          <b class="warning--text">You are forbidden to create mappings to the following internal ports:</b>
           <ul>
             <li>21 (FTP, use SFTP)</li>
             <li>23 (Telnet, use SSH)</li>
             <li>25 (SMTP, we forbid hosting mail servers)</li>
             <li>53 (DNS, we forbid hosting DNS servers)</li>
             <li>143 (IMAP, we forbid hosting mail servers)</li>
           </ul>
-          <br/>
+
+          <small>As per our <a href='https://wiki.netsoc.co/en/services/terms-of-service'>TOS</a></small>
+
+          <br/><br/>
           Port forwarding rules may take a few minutes to apply
         </p>
         <v-container class="ma-0 pa-0">
@@ -617,12 +620,25 @@
             </v-col>
           </v-row>
         </v-container>
-        <v-btn small @click="confirmCancelRandomizeExternalPort()">
-          <v-icon>
-            mdi-dice-multiple
-          </v-icon>
-          random external port
-        </v-btn>
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <v-btn small @click="confirmCancelRandomizeExternalPort()">
+            <v-icon>
+              mdi-dice-multiple
+            </v-icon>
+            random external port
+          </v-btn>
+          <p
+            style="
+              color: #fffa;
+            "
+          >The port your instance will listen for (e.g. port <code>22</code> for SSH</p>
+        </div>
       </v-form>
       <p v-else-if="confirmCancel.mode == ConfirmCancelMode.RemovePort">
         Are you sure you want to remove the port mapping?
@@ -678,20 +694,34 @@
           :rules='vhostRules'
           :placeholder='$store.state.auth.user.profile.preferred_username+"."+vhostRequirements.service_subdomain.base_domain'
         ></v-text-field>
-        <v-text-field
-          label='HTTP(S) port to reverse proxy'
-          v-model='confirmCancel.action.vHostPort'
-          :rules='portRules'
-          :placeholder='"80"'
-        ></v-text-field>
-        <v-switch
-          v-model='confirmCancel.action.vHostHttps'
-          class="ma-0 pa-0"
-          label="Is the internal service using HTTPS (typically not)?"
-        ></v-switch>
+        <v-expansion-panels
+          v-model="panel"
+          :disabled="disabled"
+          multiple
+        >
+        <v-expansion-panel>
+          <v-expansion-panel-header>Advanced Options</v-expansion-panel-header>
+          <v-expansion-panel-content>
+
+            <v-text-field
+              label='HTTP(S) port to reverse proxy'
+              type="number"
+              v-model='confirmCancel.action.vHostPort'
+              :rules='portRules'
+              :placeholder='"80"'
+            ></v-text-field>
+            <v-switch
+              v-model='confirmCancel.action.vHostHttps'
+              class="ma-0 pa-0"
+              style="display: inline-block"
+              label="Use internal SSL? (if unsure, leave unselected)"
+          ></v-switch>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+        </v-expansion-panels>
       </v-form>
       <p v-else-if="confirmCancel.mode == ConfirmCancelMode.RemoveVirtualHost">
-        Are you sure you want to remove the virtual host?<br/>
+        Are you sure you want to remove the virtual host<br/>
       </p>
       <p v-else-if="confirmCancel.mode == ConfirmCancelMode.RenewActivation">
         Are you sure you want to renew the instance activation?<br>
@@ -1222,6 +1252,7 @@ export default Vue.extend({
       instances,
       loading: true,
       templates,
+      panel: false,
 
       templateIdx,
       vhostRequirements,

ui/src/global.css

@@ -1,3 +1,10 @@
+html { overflow-y: auto }
+
+@media screen and (max-width: 600px) {
+  html {
+    font-size: 18px;
+  }
+}
 /* width */
 ::-webkit-scrollbar {
   width: 8px;

ui/src/views/Account.vue

@@ -1,36 +1,38 @@
 <template>
-  <v-container fluid>
-    <v-row>
-      <v-col cols="12" sm="6">
-        <v-card>
-          <v-card-title>
-            Hi {{ $store.state.auth.user.profile.preferred_username }}!
-          </v-card-title>
-          <v-card-subtitle>
-            UCC Netsoc welcomes you!
-          </v-card-subtitle>
-          <v-card-text class="ma-0 justify-center">
-            Username: <span class="white--text text--lighten-1">{{ $store.state.auth.user.profile.preferred_username }}</span><br/>
-            Email: <span class="white--text text--lighten-1">{{ $store.state.auth.user.profile.email }}</span><br/>
-            <br/>
-            <p>
-              Your account is used for logging into UCC Netsoc web services
+  <v-container fluid style="width: 100%; height: 100%;" class="d-flex flex-column align-center justify-center">
+    <!-- <v-row>
+      <v-col cols="12" sm="6"> -->
+        <v-card :style="this.$vuetify.smAndDown ? 'width: 100%' : 'width: 60%; padding: 2em;'">
+          <div :style="this.$vuetify.smAndDown ? 'width: 100%' : 'width: 60%; margin: auto'">
+            <v-card-title>
+              Hi {{ $store.state.auth.user.profile.preferred_username }}!
+            </v-card-title>
+            <v-card-subtitle>
+              UCC Netsoc welcomes you!
+            </v-card-subtitle>
+            <v-card-text class="ma-0 justify-center">
+              Username: <span class="white--text text--lighten-1">{{ $store.state.auth.user.profile.preferred_username }}</span><br/>
+              Email: <span class="white--text text--lighten-1">{{ $store.state.auth.user.profile.email }}</span><br/>
               <br/>
-              Please remember to keep the <b>Terms of Use</b> and its <b>Acceptable Use Policy</b> in mind as you share server hardware with our other users.
-            </p>
-            <v-btn color="warning" class="mx-1" @click="passwordReset.visible=true">
-              Reset Password
-            </v-btn>
-            <v-btn color="primary" class="mx-1" @click="gdprRequest.visible=true">
-              Data Request
-            </v-btn>
-            <v-btn color="red" class="mx-1" @click="deleteAccount.visible=true">
-              Delete Account
-            </v-btn>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
+              <p>
+                Your account is used for logging into UCC Netsoc web services
+                <br/>
+                Please remember to keep the <b>Terms of Use</b> and its <b>Acceptable Use Policy</b> in mind as you share server hardware with our other users.
+              </p>
+              <v-btn color="warning" class="mx-1" @click="passwordReset.visible=true">
+                Reset Password
+              </v-btn>
+              <v-btn color="primary" class="mx-1" @click="gdprRequest.visible=true">
+                Data Request
+              </v-btn>
+              <v-btn color="red" class="mx-1" @click="deleteAccount.visible=true">
+                Delete Account
+              </v-btn>
+            </v-card-text>
+          </div>
+          </v-card>
+      <!-- </v-col>
+    </v-row> -->
     <password-reset-dialog :visible="passwordReset.visible" @successful="passwordReset.visible=false" @cancelled="passwordReset.visible=false"/>
     <g-d-p-r-dialog :visible="gdprRequest.visible" @successful="gdprRequest.visible=false" @cancelled="gdprRequest.visible=false"/>
     <delete-account-dialog :visible="deleteAccount.visible" @successful="deleteAccount.visible=false"/>

ui/src/views/Instances.vue

@@ -3,7 +3,7 @@
     <v-row>
       <v-col cols="12" sm="12">
         <v-card>
-          <v-container fluid class="d-flex flex-xs-wrap flex-sm-wrap flex-md-nowrap py-2">
+          <v-container fluid :class=" this.$vuetify.breakpoint.smAndDown ? '' : 'd-flex flex-xs-wrap flex-sm-wrap flex-md-nowrap py-2'">
             <v-card flat>
               <v-card-title>
                 Instances

ui/src/views/Landing.vue

@@ -21,7 +21,7 @@
     </v-row>
     <v-row v-if="!visible" class="justify-center ma-0 pa-0" fill-height style="width: 100%">
       <v-col v-for="item in menu" cols="12" xl="1" md="2" sm="2" xs="12" class="ma-2 pa-0" v-bind:key="item.name" @click="$router.push(item.route, ()=>{})">
-        <v-card class="text-center service" flat>
+        <v-card class="text-center service" text>
           <v-card-text class="justify-center" style="padding-left: 0; padding-right: 0">
             <v-icon class="align-center" size="48">{{ item.icon }}</v-icon>
           </v-card-text>

ui/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "strict": true,
+    "strict": false,
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",