Skip to content

Commit

Permalink
Merge pull request #92 from jkklapp/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
jkklapp authored Jun 10, 2022
2 parents ca964ec + c322033 commit 486723e
Show file tree
Hide file tree
Showing 18 changed files with 522 additions and 146 deletions.
21 changes: 4 additions & 17 deletions frontend/src/components/Dashboard/Post.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,7 @@
></small
>
</div>
<div v-if="!id && isPosting" class="xs:w-90 w-100 place-items-center">
<div class="lds-ring-small align-text-top">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<Loading v-if="!id && isPosting" small class-names="mb-[5px]" />
</div>
<div>
<span class="message">{{ message }}</span>
Expand Down Expand Up @@ -47,26 +40,20 @@
: 'fill-gray-300 dark:fill-gray-400 w-5 h-5'
"
/></a>
<div
v-show="likingPost == id"
class="mb-[5px] lds-ring-small align-text-bottom"
>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<Loading v-show="likingPost == id" small class-names="mb-[5px]" />
</div>
</div>
</template>
<script>
import LightBulb from '../misc/icons/LightBulb';
import Loading from '../misc/Loading';
import moment from 'moment';
import { mapGetters } from 'vuex';
export default {
components: {
LightBulb,
Loading,
},
props: {
userName: {
Expand Down
11 changes: 4 additions & 7 deletions frontend/src/components/Dashboard/Posts.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,20 @@
</button>
</div>
</div>
<div v-if="isLoading" class="flex justify-center items-center">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flex justify-center items-center">
<Loading v-if="isLoading" />
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import Post from './Post';
import Loading from '../misc/Loading';
export default {
components: {
Post,
Loading,
},
computed: {
...mapGetters({
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Login.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('Login', () => {
it('is enabled', () => {
const wrapper = mountComponent();

const link = wrapper.find('a');
const link = wrapper.find('.forgot-password-link');

expect(link.exists()).toBe(true);
});
Expand Down
30 changes: 9 additions & 21 deletions frontend/src/components/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@
/>
</div>
</div>
<div class="flex place-items-stretch">
<div
class="flex flex-wrap place-items-center sm:place-items-stretch"
>
<button
type="submit"
:disabled="!form.email || !form.password"
Expand All @@ -66,15 +68,15 @@
>
Login
</button>
<div class="mb-2 md:mx-14"></div>
<div class="mt-2">
<a
<div class="mb-2 sm:mx-auto md:mx-16"></div>
<div class="mt-2 mx-auto sm:mx-0 forgot-password-link">
<router-link
class="text-gray-700 dark:text-gray-300 align-bottom"
href="#"
@click.prevent="forgotPassword"
to="/reset-password"
>
<small>Forgot password?</small>
</a>
</router-link>
</div>
</div>
</form>
Expand All @@ -86,10 +88,7 @@

<script>
import { getAuth } from '../auth';
import {
signInWithEmailAndPassword,
sendPasswordResetEmail,
} from 'firebase/auth';
import { signInWithEmailAndPassword } from 'firebase/auth';
import Email from './misc/icons/Email.vue';
import Password from './misc/icons/Password.vue';
Expand Down Expand Up @@ -121,17 +120,6 @@ export default {
console.log(err);
});
},
async forgotPassword() {
try {
await sendPasswordResetEmail(getAuth(), this.form.email);
} catch {
// empty
} finally {
this.$root.$toast.success(
'An email has been sent to your email address with instructions to reset your password.',
);
}
},
},
};
</script>
2 changes: 2 additions & 0 deletions frontend/src/components/NavBar/ThemeToggle.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default {
} else {
themeToggleDarkIcon && themeToggleDarkIcon.classList.remove('hidden');
}
this.$store.dispatch('setTheme', localStorage.getItem('color-theme'));
},
methods: {
toggleTheme() {
Expand Down Expand Up @@ -82,6 +83,7 @@ export default {
localStorage.setItem('color-theme', 'dark');
}
}
this.$store.dispatch('setTheme', localStorage.getItem('color-theme'));
},
},
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NavBar/UserMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
>
<a
href="#"
class="block py-2 pr-4 pl-3 text-white md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"
class="block py-2 pr-4 pl-3 text-gray-900 dark:text-white md:bg-transparent md:text-blue-700 md:p-0"
>
Sign out
</a>
Expand Down
30 changes: 10 additions & 20 deletions frontend/src/components/Register.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,11 @@
>This username already exists</span
>
<div class="m-auto"></div>
<div
<Loading
v-show="isCheckingName"
class="loading-spinner xs:w-90 w-100"
>
<div class="lds-ring-small align-text-top">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
small
class-names="xs:w-90 w-100"
/>
</div>
</div>
<div class="mb-6">
Expand Down Expand Up @@ -87,17 +81,11 @@
>This email already exists</span
>
<div class="m-auto"></div>
<div
<Loading
v-show="isCheckingName"
class="loading-spinner xs:w-90 w-100"
>
<div class="lds-ring-small align-text-top">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
small
class-names="xs:w-90 w-100"
/>
</div>
</div>
<div class="mb-6">
Expand Down Expand Up @@ -198,12 +186,14 @@ import {
} from 'firebase/auth';
import Email from './misc/icons/Email.vue';
import Password from './misc/icons/Password.vue';
import Loading from './misc/Loading.vue';
import { mapGetters } from 'vuex';
export default {
components: {
Email,
Password,
Loading,
},
data() {
return {
Expand Down
46 changes: 46 additions & 0 deletions frontend/src/components/ResetPassword.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { mount } from '@vue/test-utils';
import ResetPassword from './ResetPassword.vue';

const mountComponent = () =>
mount(ResetPassword, {
global: {
stubs: ['router-link'],
},
});

describe('ResetPassword', () => {
describe('Email field', () => {
describe('when entering "test@test.com"', () => {
it('sets the input value to "test@test.com', async () => {
const wrapper = mountComponent();

const input = wrapper.find('input[type="email"]');

await input.setValue('test@test.com');

expect(input.element.value).toBe('test@test.com');
});
});
});
describe('Submit button', () => {
it('is disabled by default', () => {
const wrapper = mountComponent();

const button = wrapper.find('button[type="submit"]');

expect(button.element.disabled).toBe(true);
});
describe('when entering a valid email and a password', () => {
it('is enabled', async () => {
const wrapper = mountComponent();

const input = wrapper.find('input[type="email"]');

await input.setValue('test@test.com');

const button = wrapper.find('button');
expect(button.element.disabled).toBe(false);
});
});
});
});
90 changes: 90 additions & 0 deletions frontend/src/components/ResetPassword.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<template>
<div>
<div class="grid md:place-items-center">
<div>
<h1 class="text-6xl text-center mt-12 md:mt-32 mb-4 md:mb-2">
<span class="text-gray-700 dark:text-gray-100">
<span class="font-bold">{{ appName }}</span>
</span>
</h1>
<div
class="bg-gray-200 dark:bg-gray-500 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 md:rounded-lg"
>
<form>
<div class="mb-6">
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Your email</label
>
<div class="relative">
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<Email />
</div>
<input
id="email"
v-model="form.email"
type="email"
value
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="me@email.com"
required
autofocus
/>
</div>
</div>

<div class="text-center place-items-center">
<button
type="submit"
:disabled="!form.email"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 disabled:opacity-50 disabled:cursor-not-allowed"
@click.prevent="submit"
>
Reset password
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>

<script>
import { getAuth } from '../auth';
import { sendPasswordResetEmail } from 'firebase/auth';
import Email from './misc/icons/Email.vue';
export default {
components: {
Email,
},
data() {
return {
form: {
email: '',
},
error: null,
};
},
computed: {
appName: () => process.env.VUE_APP_NAME,
},
methods: {
async submit() {
try {
await sendPasswordResetEmail(getAuth(), this.form.email);
} catch {
// empty
} finally {
this.$root.$toast.success(
'An email has been sent to your email address with instructions to reset your password.',
);
}
},
},
};
</script>
Loading

0 comments on commit 486723e

Please sign in to comment.