styling for login and register

diff --git a/src/background/run.ts b/src/background/run.ts
index 3726438c24fff3ff68ddd80abb89663814527e2f..fb237da37288a842170035c55deb66c0461b1c96 100644 (file)
--- a/src/background/run.ts
+++ b/src/background/run.ts
@@ -45,7 +45,7 @@ export async function main() {
     if (!win) win = await createWindow({
         width: 350,
         height: 525,
-        resizable: false
+        resizable: true
     });
 
     // Instantiate socket session with crimata-platorm.

diff --git a/src/router.ts b/src/router.ts
index f8aa2bf886fb86a1deb3fb77ab22fe5af2a02eca..5f7dd7e2c416f2fa036a1708963c354792c242ef 100644 (file)
--- a/src/router.ts
+++ b/src/router.ts
@@ -16,13 +16,13 @@ const routes: Array<RouteRecordRaw> = [
     meta: { requiresAuth: true },
   },
   {
-    path: "/login",
+    path: "/register",
     name: "login",
     component: () => import("@/views/login.vue"),
     meta: { requiresAuth: false },
   },
   {
-    path: "/register",
+    path: "/login",
     name: "register",
     component: () => import("@/views/register.vue"),
     meta: { requiresAuth: false },

diff --git a/src/views/login.vue b/src/views/login.vue
index f24316d8c97676409c73106716f018efe059a6b7..be10aee6068d3c9aa824da7b799f795557b577dc 100644 (file)
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,7 +1,9 @@
 <template>
   <form id="login" @submit.prevent="submit">
     <!-- login title -->
-    <div id="loginTitle">Crimata Messenger</div>
+    <div id="loginTitle">
+      <div>Login</div>
+    </div>
 
     <!-- username and password forms -->
     <div id="loginBox">
@@ -12,11 +14,14 @@
       <input class="input" type="password" v-model="password" placeholder="Password" />
     </div>
 
-    <input type="checkbox" id="checkbox" v-model="rememberMe" />
-    <label for="checkbox">Remember Me</label>
+<!--     <input type="checkbox" id="checkbox" v-model="rememberMe" />
+    <label for="checkbox">Remember Me</label> -->
+
+    <!-- submit button; position: fixed -->
+    <button class="button" @click="submit">Submit</button>
 
-    <!-- submit button -->
-    <button class="button" type="submit">Login</button>
+    <!-- back to login button: position: fixed  -->
+    <button class="button2" @click="submit">Create an account</button>  
   </form>
 </template>
 
@@ -81,6 +86,13 @@ export default defineComponent({
   background-color: #e6e6e6;
 }
 
+#loginTitle {
+  min-width: 181px;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: left;
+}
+
 #loginBox {
   display: flex;
   flex-direction: column;
@@ -100,6 +112,8 @@ export default defineComponent({
 }
 
 .button {
+  position: fixed;
+  margin-top: 141px;
   background-color: #58C4FD;
   border: none;
   color: white;
@@ -108,4 +122,14 @@ export default defineComponent({
   border-radius: 20px;
   font-weight: bold;
 }
+
+.button2 {
+  position: fixed;
+  margin-top: 225px;
+  border: none;
+  background-color: #e6e6e6;
+  text-decoration: none;
+  color: #58C4FD;
+  font-weight: bold;
+}
 </style>

diff --git a/src/views/register.vue b/src/views/register.vue
index ba54bef5bcb2bcb170b0b056735c8ce2a6139ff7..185dbfa368d6c522862df72b0e0ba2055c5492de 100644 (file)
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -1,10 +1,12 @@
 <template>
-  <div id="login">
+  <div id="register">
     <!-- login title -->
-    <div id="loginTitle">Register</div>
+    <div id="registerTitle">
+      <div>Register</div>
+    </div>
 
     <!-- username and password forms -->
-    <div id="loginBox">
+    <div id="registerBox">
       <!-- username -->
       <input class="input" type="text" v-model="email" placeholder="email" />
 
@@ -12,17 +14,14 @@
       <input class="input" type="password" v-model="password" placeholder="Password" />
 
       <!-- firstName -->
-      <input class="input" type="text" v-model="firstName" placeholder="First name" />
-
-      <!-- lastName -->
-      <input class="input" type="text" v-model="lastName" placeholder="Last name" />
-
-      <input type="checkbox" id="checkbox" v-model="rememberMe" />
-      <label for="checkbox">Remember Me</label>
+      <input class="input" type="text" v-model="password2" placeholder="Re-enter password" />
     </div>
 
-    <!-- submit button -->
+    <!-- submit button; position: fixed -->
     <button class="button" @click="submit">Submit</button>
+
+    <!-- back to login button: position: fixed  -->
+    <button class="button2" @click="submit">Back to login</button>
   </div>
 </template>
 
@@ -86,3 +85,62 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+#register {
+  width: 350px;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #e6e6e6;
+}
+
+#registerTitle {
+  min-width: 181px;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: left;
+}
+
+#registerBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.input {
+  background-color: #B9B9B9;
+  border: none;
+  color: white;
+  padding: 16px;
+  text-decoration: none;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+.button {
+  position: fixed;
+  margin-top: 165px;
+  background-color: #58C4FD;
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-decoration: none;
+  border-radius: 20px;
+  font-weight: bold;
+}
+
+.button2 {
+  position: fixed;
+  margin-top: 225px;
+  border: none;
+  background-color: #e6e6e6;
+  text-decoration: none;
+  color: #58C4FD;
+  font-weight: bold;
+}
+</style>