Switch to tailwindcss, start login page
This commit is contained in:
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<v-col cols="12" sm="8" md="6" xl="4">
|
||||
<v-card color="secondary">
|
||||
<v-btn icon to="/" aria-label="Go back">
|
||||
<v-icon color="white">{{ mdiArrowLeft }}</v-icon>
|
||||
</v-btn>
|
||||
<v-card-title class="text-center justify-center py-6">
|
||||
<h1 class="font-weight-bold display-2 white--text">
|
||||
Account
|
||||
</h1>
|
||||
</v-card-title>
|
||||
|
||||
<v-tabs v-model="tab" grow color="accent">
|
||||
<v-tab v-for="tab in tabs" :key="tab">
|
||||
{{ tab }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item v-for="tab in tabs" :key="tab">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<LoginForm v-if="tab === 'Login'"></LoginForm>
|
||||
<RegisterForm v-else></RegisterForm>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mdiArrowLeft } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
options: {
|
||||
auth: 'guest',
|
||||
},
|
||||
data: () => ({
|
||||
mdiArrowLeft,
|
||||
tab: 0,
|
||||
tabs: ['Login', 'Register'],
|
||||
}),
|
||||
mounted() {
|
||||
this.$root.$on('register::success', () => {
|
||||
this.$root.$emit('toast', 'Welcome', 'success')
|
||||
this.tab = 0
|
||||
})
|
||||
},
|
||||
head: () => ({
|
||||
title: 'Account',
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<v-col cols="12">
|
||||
<v-card color="secondary">
|
||||
<v-card-title class="text-center justify-center py-6">
|
||||
<h1 class="font-weight-bold headline white--text">
|
||||
Create a note
|
||||
</h1>
|
||||
<v-spacer />
|
||||
<v-switch v-model="preview"></v-switch>
|
||||
</v-card-title>
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-textarea
|
||||
v-if="!preview"
|
||||
v-model="text"
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
autocorrect="off"
|
||||
label="Text"
|
||||
auto-grow
|
||||
></v-textarea>
|
||||
<client-only v-else>
|
||||
<!-- html is sanitized -->
|
||||
<!-- eslint-disable-next-line -->
|
||||
<div class="html" v-html="html" />
|
||||
</client-only>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import markdown from '~/utils/markdown'
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data: () => ({
|
||||
delimiters: [' ', ','],
|
||||
form: {
|
||||
title: '',
|
||||
tags: [],
|
||||
},
|
||||
text: '',
|
||||
possibleTags: [],
|
||||
conflict: false,
|
||||
preview: false,
|
||||
}),
|
||||
computed: {
|
||||
html() {
|
||||
return markdown(this.text)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$axios.get('/tags').then((e) => (this.possibleTags = e.data))
|
||||
},
|
||||
methods: {
|
||||
createNote() {
|
||||
this.conflict = false
|
||||
this.$axios
|
||||
.post(`/notes/${this.form.title}`, {
|
||||
tags: this.form.tags,
|
||||
})
|
||||
.then((_) => {
|
||||
this.$router.push('/notes')
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.response && e.response.status === 409) {
|
||||
this.conflict = true
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.html h1 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,71 +1,16 @@
|
||||
<template>
|
||||
<v-col cols="12">
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
class="d-flex"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card
|
||||
:color="item.color"
|
||||
dark
|
||||
style="min-height: 350px; width: 100%;"
|
||||
>
|
||||
<v-card-title class="headline">
|
||||
{{ item.title }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle>
|
||||
{{ item.content }}
|
||||
</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn text>See a demo</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-col>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet,
|
||||
asperiores assumenda dolor ea esse eum itaque iure libero magni, nam
|
||||
porro, quas reiciendis repellat soluta sunt! Accusantium eum omnis
|
||||
quasi.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: 'Home',
|
||||
options: {
|
||||
auth: false,
|
||||
},
|
||||
data: () => ({
|
||||
items: [
|
||||
{
|
||||
title: 'Writes your notes in markdown',
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut consectetur debitis harum' +
|
||||
' illum in incidunt maxime modi quae velit? Aspernatur, consequatur error' +
|
||||
' mollitia nesciunt officiis porro ratione sequi voluptas?',
|
||||
color: 'indigo',
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
content: '',
|
||||
color: 'purple',
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
content: '',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
content: '',
|
||||
color: 'teal darken-2',
|
||||
},
|
||||
],
|
||||
}),
|
||||
head: () => ({
|
||||
title: 'Home',
|
||||
}),
|
||||
name: 'Home',
|
||||
}
|
||||
</script>
|
||||
&
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
{{ note.title }}
|
||||
<v-spacer />
|
||||
<TagsGroup :tags="note.tags" />
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<!-- html is sanitized -->
|
||||
<!-- eslint-disable-next-line -->
|
||||
<div v-html="renderedMarkdown"></div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import renderMarkdown from '@/utils/markdown'
|
||||
|
||||
export default {
|
||||
name: 'Note',
|
||||
data: () => ({
|
||||
note: {
|
||||
tags: [],
|
||||
},
|
||||
}),
|
||||
computed: {
|
||||
renderedMarkdown() {
|
||||
return !this.note.content
|
||||
? ''
|
||||
: renderMarkdown(this.note.content).contents
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$axios
|
||||
.$get(`/notes/${this.$route.params.uuid}`)
|
||||
.then((note) => (this.note = note))
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-progress-circular
|
||||
v-if="!isInitialized"
|
||||
:size="100"
|
||||
:width="7"
|
||||
color="purple"
|
||||
indeterminate
|
||||
></v-progress-circular>
|
||||
<v-card v-if="isEmpty">
|
||||
<v-card-text>No notes yet :/</v-card-text>
|
||||
</v-card>
|
||||
<v-row v-else>
|
||||
<v-col
|
||||
v-for="note in notes"
|
||||
:key="note.uuid"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
xl="3"
|
||||
>
|
||||
<NoteCard
|
||||
:uuid="note.uuid"
|
||||
:title="note.title"
|
||||
:updated-at="note.updatedAt"
|
||||
:tags="note.tags"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Notes',
|
||||
data: () => ({
|
||||
loading: true,
|
||||
}),
|
||||
computed: {
|
||||
...mapState('notes', ['notes', 'isInitialized']),
|
||||
...mapGetters('notes', ['isEmpty']),
|
||||
},
|
||||
mounted() {
|
||||
if (!this.isInitialized) this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('notes', ['load']),
|
||||
},
|
||||
head: () => ({
|
||||
title: 'My notes',
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div
|
||||
class="h-screen container mx-auto h-full flex justify-center items-center"
|
||||
>
|
||||
<div class="w-full md:w-1/2 lg:w-1/3">
|
||||
<h1 class="font-semibold text-lg mb-6 text-center">Sign In</h1>
|
||||
<div
|
||||
class="bg-gray-800 border-teal-500 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
|
||||
>
|
||||
<form @submit="userLogin">
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="username"
|
||||
class="font-bold text-grey-darker block mb-2"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
name="username"
|
||||
class="shadow focus:shadow-outline block appearance-none w-full bg-gray-700 border-gray-500 hover:border-gray-500 px-2 py-2 rounded shadow"
|
||||
placeholder="Your Username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="password"
|
||||
class="font-bold text-grey-darker block mb-2"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
name="password"
|
||||
type="password"
|
||||
class="shadow focus:shadow-outline block appearance-none w-full bg-gray-700 border-gray-500 hover:border-gray-500 px-2 py-2 rounded shadow"
|
||||
placeholder="Your Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-teal-500 hover:bg-teal-400 text-white font-bold py-2 px-4 rounded"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-gray-200 text-sm">
|
||||
Don't have an account?
|
||||
<a href="#" class="no-underline text-blue-500 font-bold"
|
||||
>Create an Account</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SignIn',
|
||||
options: {
|
||||
auth: false, // FIXME: auth: 'guest'
|
||||
},
|
||||
data: () => ({
|
||||
form: {
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
}),
|
||||
methods: {
|
||||
userLogin(e) {
|
||||
e.preventDefault()
|
||||
this.$auth
|
||||
.loginWith('local', {
|
||||
data: this.form,
|
||||
})
|
||||
.then(function (response) {})
|
||||
// eslint-disable-next-line handle-callback-err
|
||||
.catch(function (error) {})
|
||||
},
|
||||
},
|
||||
head: () => ({
|
||||
title: 'Sign in',
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user