aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web/pw-server/src/routes/__layout.svelte21
-rw-r--r--web/pw-server/src/routes/index.svelte2
-rw-r--r--web/pw-server/src/routes/login.svelte29
-rw-r--r--web/pw-server/src/routes/register.svelte57
-rw-r--r--web/pw-server/src/styles/account_forms.scss52
-rw-r--r--web/pw-server/src/styles/variables.scss1
6 files changed, 79 insertions, 83 deletions
diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte
index 250cdef..c22591e 100644
--- a/web/pw-server/src/routes/__layout.svelte
+++ b/web/pw-server/src/routes/__layout.svelte
@@ -1,4 +1,6 @@
<script lang="ts">
+ import NavbarUserSection from "$lib/components/navbar/NavbarUserSection.svelte";
+
import "./style.css";
</script>
@@ -7,16 +9,13 @@
<div class="navbar-main">
<a href="/">PlanetWars</a>
</div>
- <div class="navbar-user">
- <a class="navbar-href" href="login">Sign in</a>
- <a class="navbar-href" href="register">Sign up</a>
- </div>
+ <NavbarUserSection />
</div>
<slot />
</div>
<style lang="scss">
- @import "../lib/variables.scss";
+ @import "src/styles/variables.scss";
.outer-container {
width: 100vw;
@@ -35,14 +34,6 @@
padding: 0 15px;
}
- .navbar-user a {
- font-size: 18px;
- color: #eee;
- font-family: Helvetica, sans-serif;
- padding: 4px 8px;
- text-decoration: none;
- }
-
.navbar-main {
margin: auto 0;
}
@@ -52,8 +43,4 @@
color: #eee;
text-decoration: none;
}
-
- .navbar-user {
- margin: auto 0;
- }
</style>
diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index dcc40ca..984910e 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -182,7 +182,7 @@
</div>
<style lang="scss">
- @import "../lib/variables.scss";
+ @import "src/styles/variables.scss";
.container {
display: flex;
diff --git a/web/pw-server/src/routes/login.svelte b/web/pw-server/src/routes/login.svelte
index da3fc83..9ff0378 100644
--- a/web/pw-server/src/routes/login.svelte
+++ b/web/pw-server/src/routes/login.svelte
@@ -35,14 +35,21 @@
}
</script>
-{#if loggedIn()}
- you are logged in
-{/if}
-
-<form on:submit|preventDefault={login}>
- <label for="username">Username</label>
- <input name="username" bind:value={username} />
- <label for="password">Password</label>
- <input type="password" name="password" bind:value={password} />
- <button type="submit">Log in</button>
-</form>
+
+<div class="page-card">
+ <div class="page-card-content">
+ <h1 class="page-card-header">Sign in</h1>
+ <form class="account-form" on:submit|preventDefault={login}>
+ <label for="username">Username</label>
+ <input name="username" bind:value={username} />
+ <label for="password">Password</label>
+ <input type="password" name="password" bind:value={password} />
+ <button type="submit">Submit</button>
+ </form>
+ </div>
+</div>
+
+
+<style lang="scss">
+ @import "src/styles/account_forms.scss";
+</style> \ No newline at end of file
diff --git a/web/pw-server/src/routes/register.svelte b/web/pw-server/src/routes/register.svelte
index 1b0b84a..51cc106 100644
--- a/web/pw-server/src/routes/register.svelte
+++ b/web/pw-server/src/routes/register.svelte
@@ -31,67 +31,16 @@
<div class="page-card">
<div class="page-card-content">
<h1 class="page-card-header">Create account</h1>
- <form class="register-form" on:submit|preventDefault={onSubmit}>
+ <form class="account-form" on:submit|preventDefault={onSubmit}>
<label for="username">Username</label>
<input name="username" bind:value={username} />
<label for="password">Password</label>
<input type="password" name="password" bind:value={password} />
- <button type="submit">Sign up</button>
+ <button type="submit">Submit</button>
</form>
</div>
</div>
<style lang="scss">
- .page-card {
- margin: 50px auto;
- width: 40%;
- max-width: 600px;
- border: 1px solid #b5b5b5;
- box-sizing: border-box;
- border-radius: 0px;
- }
-
- .page-card-content {
- margin: 20px 50px;
- }
-
- .page-card-header {
- padding-top: .5em;
- padding-bottom: 1em;
- text-align: center;
- }
-
- .register-form {
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- font-size: 18px;
- }
-
- .register-form label {
- margin: 10px 5px;
- font-weight: 500;
- }
-
- .register-form input {
- margin: 10px 5px;
- font-size: 1rem;
- // height: 2.5em;
- display: block;
- border-radius: 4px;
- border: 1px solid #b5b5b5;
- padding: .75rem 1rem;
- }
-
- .register-form button {
- background-color: lightgreen;
- padding: 8px 16px;
- border-radius: 8px;
- border: 0;
- font-size: 18pt;
- display: block;
- margin: 10px auto;
- margin-top: 16px;
-
- }
+ @import "src/styles/account_forms.scss";
</style> \ No newline at end of file
diff --git a/web/pw-server/src/styles/account_forms.scss b/web/pw-server/src/styles/account_forms.scss
new file mode 100644
index 0000000..36cc96b
--- /dev/null
+++ b/web/pw-server/src/styles/account_forms.scss
@@ -0,0 +1,52 @@
+.page-card {
+ margin: 50px auto;
+ width: 40%;
+ max-width: 600px;
+ border: 1px solid #b5b5b5;
+ box-sizing: border-box;
+ border-radius: 0px;
+}
+
+.page-card-content {
+ margin: 20px 50px;
+}
+
+.page-card-header {
+ padding-top: 0.5em;
+ padding-bottom: 1em;
+ text-align: center;
+}
+
+.account-form {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ font-size: 18px;
+}
+
+.account-form label {
+ margin: 10px 5px;
+ font-weight: 500;
+}
+
+.account-form input {
+ margin: 10px 5px;
+ font-size: 1rem;
+ // height: 2.5em;
+ display: block;
+ border-radius: 4px;
+ border: 1px solid #b5b5b5;
+ padding: 0.75rem 1rem;
+}
+
+.account-form button {
+ background-color: lightgreen;
+ padding: 8px 16px;
+ border-radius: 8px;
+ border: 0;
+ font-size: 18pt;
+ display: block;
+ margin: 10px auto;
+ margin-top: 16px;
+ cursor: pointer;
+}
diff --git a/web/pw-server/src/styles/variables.scss b/web/pw-server/src/styles/variables.scss
new file mode 100644
index 0000000..257a67e
--- /dev/null
+++ b/web/pw-server/src/styles/variables.scss
@@ -0,0 +1 @@
+$bg-color: rgb(41, 41, 41);