me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

styling for login and register

Browse source
This commit is contained in:
Andrew Gundersen 2021-02-11 09:28:53 -06:00
commit e193badb13
4 changed files with 101 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/background/run.ts
View file

@ -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.

4
src/router.ts
View file

@ -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 },

34
src/views/login.vue
View file

@ -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 -->
<button class="button" type="submit">Login</button>
<!-- submit button; position: fixed -->
<button class="button" @click="submit">Submit</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>

80
src/views/register.vue
View file

@ -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>