xrazis
/
ichnaea
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

🔨 Change landing and login 

Add notification on axios error to login view
main
Haris Razis 4 years ago
parent
70e0c71f58
commit
3b91d29424
4 changed files with 126 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      web/src/assets/undraw_authentication_fsn5.svg
  2. 44
      web/src/components/ShapeDividerTop.vue
  3. 51
      web/src/views/Home.vue
  4. 83
      web/src/views/Login.vue

1
web/src/assets/undraw_authentication_fsn5.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

44
web/src/components/ShapeDividerTop.vue
View File

@ -0,0 +1,44 @@
<template>
<div class="custom-shape-divider-top-1609170370">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25" class="shape-fill"></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5" class="shape-fill"></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
class="shape-fill"></path>
</svg>
</div>
</template>
<script>
export default {
name: 'ShapeDividerTop'
}
</script>
<style scoped>
.custom-shape-divider-top-1609170370 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1609170370 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 100px;
transform: rotateY(180deg);
}
.custom-shape-divider-top-1609170370 .shape-fill {
fill: #6C63FF;
}
</style>

51
web/src/views/Home.vue
View File

@ -1,24 +1,51 @@
<template> <template>
<section class="hero is-light is-fullheight"> <ShapeDividerTop/>
<section class="hero is-medium is-default is-bold">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<figure class="image is-5by3"> <div class="columns is-vcentered">
<img src="../assets/undraw_fitness_stats_sht6.svg"> <div class="column">
</figure> <figure class="image is-fullwidth">
<h1 class="title"> <img src="../assets/undraw_fitness_stats_sht6.svg">
Unleash your potential with ichnaea. </figure>
</h1> </div>
<p class="subtitle">Metrics and live monitoring for your athletes. The future is IoT.</p> <div class="column is-5 is-offset-1 landing-caption">
<button class="button is-link is-rounded"> <h1 class="title">
<router-link class="has-text-white" to="/login">Login</router-link> Unleash your potential with <i>ichnaea</i>
</button> </h1>
<p class="subtitle">Metrics and live monitoring for your athletes. <br> The future is IoT.</p>
<router-link class="has-text-white" to="/login">
<button class="button is-info is-rounded">
Login
</button>
</router-link>
</div>
</div>
</div> </div>
</div> </div>
<div class="hero-foot">
<footer class="footer">
<div class="content has-text-centered">
<p>Ichnaea is an IoT solution that collects and analyzes body position data from an athlete in real-time.</p>
<p>Source code can be found on <a href="https://github.com/xrazis/ichnaea" target="_blank">github</a> and <a
href="https://git.swarmlab.io:3000/xrazis/ichnaea" target="_blank">swarmlab</a>.</p>
<p>The thesis document can be found on <a href="" target="_blank">google docs</a>.</p>
</div>
</footer>
</div>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import {Vue} from 'vue-class-component'; import {Options, Vue} from 'vue-class-component';
import ShapeDividerTop from '@/components/ShapeDividerTop.vue';
@Options({
components: {
ShapeDividerTop
}
})
export default class Home extends Vue { export default class Home extends Vue {
} }

83
web/src/views/Login.vue
View File

@ -1,54 +1,57 @@
<template> <template>
<div class="hero is-fullheight"> <section class="hero is-medium">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="columns">
<figure class="image is-5by3"> <div class="column is-4 is-offset-4">
<img src="../assets/undraw_authentication_fsn5.svg"> <h1 class="is-size-1">Login</h1>
</figure> <form @submit.prevent="login">
<h1 class="is-size-1">Login</h1> <div class="field">
<form @submit.prevent="login"> <p class="control has-icons-left has-icons-right">
<div class="field"> <input v-model="username" class="input" placeholder="Username" type="text">
<p class="control has-icons-left has-icons-right"> <span class="icon is-small is-left">
<input v-model="username" class="input" placeholder="Username" type="text"> <i class="fas fa-user"></i>
<span class="icon is-small is-left"> </span>
<i class="fas fa-user"></i> </p>
</span> <span class="icon is-small is-right"> </div>
<i class="fas fa-check"></i></span> <div class="field">
</p> <p class="control has-icons-left">
<input v-model="password" class="input" placeholder="Password" type="password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>
<div class="field">
<p c lass="control">
<button class="button is-info is-rounded is-medium" type="submit">
Login
</button>
</p>
</div>
</form>
<div class="m-4" v-if="msg">
<div class="notification is-danger has-text-centered">
<b>{{ msg }}</b>
</div>
</div> </div>
<div class="field"> </div>
<p class="control has-icons-left">
<input v-model="password" class="input" placeholder="Password" type="password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i></span>
</p>
</div>
<div class="field">
<p class="control">
<button class="button is-success" type="submit">
Login
</button>
</p>
</div>
</form>
</div> </div>
</div> </div>
<div class="hero-foot"> <div class="hero-foot">
<footer class="footer"> <div class="content has-text-centered">
<div class="content has-text-centered"> <p>
<p> <span class="tag is-primary">Tip:</span> You can also register here!
<span class="tag is-primary">Tip:</span> You can also register here! </p>
</p> </div>
</div>
</footer>
</div> </div>
</div> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import {Vue} from 'vue-class-component'; import {Vue} from 'vue-class-component';
export default class Login extends Vue { export default class Login extends Vue {
private msg = '';
private username = ''; private username = '';
private password = ''; private password = '';
@ -57,8 +60,8 @@ export default class Login extends Vue {
this.$store.dispatch('login', user) this.$store.dispatch('login', user)
.then(() => this.$router.push('/dashboard')) .then(() => this.$router.push('/dashboard'))
.catch((err: Error) => { .catch((err: any) => {
console.log(err) this.msg = err.response.data.errors.message || err.message
this.$router.push('/login') this.$router.push('/login')
}) })
} }

Write Preview
Loading…
Cancel
Save