Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] Add mellow react #114

Merged
merged 81 commits into from
Sep 20, 2024
Merged
Changes from 1 commit
Commits
Show all changes
81 commits
Select commit Hold shift + click to select a range
8d09b97
chore(mellow-react): update dependencies
DominusKelvin Sep 18, 2024
66937f7
feat(mellow-react): add routes
DominusKelvin Sep 18, 2024
41dee08
feat(mellow-react): add actions
DominusKelvin Sep 18, 2024
9d250e5
feat(mellow-react): add helpers
DominusKelvin Sep 18, 2024
73bb85c
feat(mellow-react): add custom hook
DominusKelvin Sep 18, 2024
51555ab
feat(mellow-react): add sails mail
DominusKelvin Sep 18, 2024
83b5004
feat(mellow-react): add mail config
DominusKelvin Sep 18, 2024
cb83079
feat(mellow-vue): use integer id
DominusKelvin Sep 18, 2024
4662061
fix(mellow-react): add url back
DominusKelvin Sep 18, 2024
9ecf66e
feat(mellow-react): add User model
DominusKelvin Sep 18, 2024
4681f4c
feat(mellow-react): add policies
DominusKelvin Sep 18, 2024
8eee3b8
feat(mellow-react): register policy mappings
DominusKelvin Sep 18, 2024
dcd1199
feat(mellow-react): add test
DominusKelvin Sep 18, 2024
78e6523
feat(mellow-react): update jsconfig
DominusKelvin Sep 18, 2024
af373dd
feat(mellow-react): add progressbar color
DominusKelvin Sep 18, 2024
428de2f
feat(mellow-react): add GoogleButton
DominusKelvin Sep 18, 2024
e4236ff
feat(mellow-react): add homepage
DominusKelvin Sep 19, 2024
7fd0823
feat(mellow-react): setup tailwindcss
DominusKelvin Sep 19, 2024
b2b7b9c
chore(mellow-vue): revert to earliest version of prettier
DominusKelvin Sep 19, 2024
dc66763
feat(mellow-react): add GoogleButton.jsx
DominusKelvin Sep 19, 2024
8d78553
chore(mellow-react): update prettier-config.js
DominusKelvin Sep 19, 2024
c67c691
chore(mellow-react): remove typedoc
DominusKelvin Sep 19, 2024
2dee160
chore(mellow-vue): remove trailing space
DominusKelvin Sep 19, 2024
07de4eb
chore(mellow-vue): remove jsdoc
DominusKelvin Sep 19, 2024
948a5a1
chore(mellow-vue): prettier
DominusKelvin Sep 19, 2024
e93399e
chore(mellow-react): prettier
DominusKelvin Sep 19, 2024
31746e6
chore(mellow-react): prettier
DominusKelvin Sep 19, 2024
b9dc475
feat(mellow-react): work on InputBase component
DominusKelvin Sep 19, 2024
ab58142
feat(mellow-react): add InputText
DominusKelvin Sep 20, 2024
98eefd0
feat(mellow-react): add InputBase
DominusKelvin Sep 20, 2024
dc4d027
feat(mellow-react): add AppLayout
DominusKelvin Sep 20, 2024
06d1b73
feat(mellow-react): update homepage
DominusKelvin Sep 20, 2024
d1a7fc8
feat(mellow-react): rename to testing env
DominusKelvin Sep 20, 2024
1ce3cfe
fix(mellow-react): update environment
DominusKelvin Sep 20, 2024
2e2fe23
fix(mellow-vue): update type in InputEmail
DominusKelvin Sep 20, 2024
98e1392
feat(mellow-react): add InputEmail component
DominusKelvin Sep 20, 2024
2a19c59
feat(mellow-react): add InputPassword
DominusKelvin Sep 20, 2024
e098abf
feat(mellow-react): add InputButton
DominusKelvin Sep 20, 2024
7a16080
fix(mellow-react): remove unneeded markups
DominusKelvin Sep 20, 2024
fb001e0
fix(mellow-react): use ternary
DominusKelvin Sep 20, 2024
d5d0386
fix(mellow-react): passing in props
DominusKelvin Sep 20, 2024
5b46cdc
fix(mellow-vue): spread props
DominusKelvin Sep 20, 2024
03d3211
fix(mellow-react): remove manual value and onChange props
DominusKelvin Sep 20, 2024
efba971
fix(mellow-react): fix not passing the input value
DominusKelvin Sep 20, 2024
676a893
fix(mellow-react): resolve issue with check box
DominusKelvin Sep 20, 2024
0325037
feat(mellow-react): submit login form
DominusKelvin Sep 20, 2024
444843c
feat(mellow-react): add signup page
DominusKelvin Sep 20, 2024
0c4de36
feat(mellow-react): add check-email page
DominusKelvin Sep 20, 2024
3c360ac
feat(mellow-react): add success page
DominusKelvin Sep 20, 2024
bf4e16f
feat(mellow-react): add link-expired page
DominusKelvin Sep 20, 2024
f90149c
feat(mellow-vue): abstract style for inputs in input base
DominusKelvin Sep 20, 2024
c6a2de7
feat(mellow-vue): use components in forgot-password page
DominusKelvin Sep 20, 2024
9ede1cf
feat(mellow-react): add forgot-password page
DominusKelvin Sep 20, 2024
e357ca2
fix(mellow-vue): add email error
DominusKelvin Sep 20, 2024
ced9a4d
feat(mellow-react): add forgot-password page
DominusKelvin Sep 20, 2024
d296913
fix(mellow-react): fix wrong endpoint
DominusKelvin Sep 20, 2024
bd66dfa
feat(mellow-vue): proper usage of components
DominusKelvin Sep 20, 2024
c4a776a
feat(mellow-react): add and use label prop
DominusKelvin Sep 20, 2024
9224307
feat(mellow-react): add forms css
DominusKelvin Sep 20, 2024
36f9f6e
feat(mellow-react): add rest password page
DominusKelvin Sep 20, 2024
ee4400d
fix(mellow-react): remove wrong function call
DominusKelvin Sep 20, 2024
7cd8451
chore(mellow-react): remove component that no longer exist
DominusKelvin Sep 20, 2024
f78cd03
feat(mellow-react): add dashboard
DominusKelvin Sep 20, 2024
7d7a9be
feat(mellow-vue): move profile to dashboard
DominusKelvin Sep 20, 2024
ee25742
fix(mellow-vue): fix deprecation for back redirect usage
DominusKelvin Sep 20, 2024
bb7928b
chore(mellow-react): install sails-hook-organics
DominusKelvin Sep 20, 2024
cd07307
feat(mellow-react): fix depreaction warning for redirect usage
DominusKelvin Sep 20, 2024
0a1bb42
fix(mellow-react): rename dashboard to index
DominusKelvin Sep 20, 2024
101dfa2
feat(mellow-react): add custom configs
DominusKelvin Sep 20, 2024
1d515b5
feat(mellow-react): add email templates
DominusKelvin Sep 20, 2024
58dcd2d
feat(mellow-vue): go to dashboard/profile
DominusKelvin Sep 20, 2024
527c559
feat(mellow-vue): remove user/profile.vue
DominusKelvin Sep 20, 2024
35e4db7
feat(mellow-vue): remove unused config
DominusKelvin Sep 20, 2024
04327f9
feat(mellow-vue): use confirmPassword instead of passwordConfirmation
DominusKelvin Sep 20, 2024
a31491a
fix(mellow-react): use confirmPassword not passwordConfirmation
DominusKelvin Sep 20, 2024
871aa94
feat(mellow-react): use 'dashboard/profile'
DominusKelvin Sep 20, 2024
07248d8
fix(mellow-react): make it easy to merge classes
DominusKelvin Sep 20, 2024
7219d6c
feat(mellow-react): add profile page
DominusKelvin Sep 20, 2024
286bd38
feat(mellow-react): fix issues with updating fields
DominusKelvin Sep 20, 2024
b3fb75c
fix(mellow-react): changed to undefined for forms
DominusKelvin Sep 20, 2024
9737754
feat(mellow-vue): remove accessing user details with .value
DominusKelvin Sep 20, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(mellow-vue): move profile to dashboard
DominusKelvin committed Sep 20, 2024
commit 7d7a9bec13afbf71fb9f5213520d4df3b29942cf
163 changes: 163 additions & 0 deletions templates/mellow-vue/assets/js/pages/dashboard/profile.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<script setup>
import { ref } from 'vue'
import { Link, Head, usePage, useForm, router } from '@inertiajs/vue3'

import InputText from '@/components/InputText'
import InputPassword from '@/components/InputPassword'
import InputEmail from '@/components/InputEmail'
import InputButton from '@/components/InputButton'

import AppLayout from '@/layouts/AppLayout.vue'

defineOptions({
layout: AppLayout
})

const loggedInUser = ref(usePage().props.loggedInUser)

const form = useForm({
email: loggedInUser.value.email,
fullName: loggedInUser.value.fullName,
currentPassword: null,
password: null,
passwordConfirmation: null
})

const deleteAccountForm = useForm({
password: null
})

function updateProfile() {
form.patch(`/profile`, {
preserveScroll: true,
preserveState: true,
onError: (errors) => {
console.error('Update failed:', errors)
}
})
}

function deleteAccount() {
if (
confirm(
'Are you sure you want to delete your account? This action cannot be undone.'
)
) {
deleteAccountForm.delete('/profile')
}
}
</script>

<template>
<Head title="Profile | Mellow"></Head>

<div class="mx-auto space-y-8 px-4 md:w-4/12">
<section
class="rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg"
>
<header class="mb-6">
<h1 class="text-2xl">Profile Information</h1>
<p class="mt-2 text-gray-600">
Update your account's profile information and email address.
</p>
</header>

<form @submit.prevent="updateProfile" class="space-y-4">
<InputText v-model="form.fullName" />
<InputEmail v-model="form.email" />
<div class="flex items-center justify-end">
<InputButton
:processing="form.processing"
:disabled="form.processing"
>
Save changes
</InputButton>
</div>
<p class="text-right text-green-700" v-if="form.recentlySuccessful">
Profile updated successfully!
</p>
</form>
</section>

<section
class="rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg"
>
<header class="mb-6">
<h2 class="text-2xl">Change Password</h2>
<p class="mt-2 text-gray-600">
Ensure your account is using a long, random password to stay secure.
</p>
</header>

<form @submit.prevent="updateProfile" class="space-y-4">
<InputPassword
label="Current Password"
id="currentPassword"
v-model="form.currentPassword"
placeholder="Current Password"
/>
<InputPassword
label="New Password"
id="password"
v-model="form.password"
placeholder="New Password"
/>
<InputPassword
label="Confirm Password"
placeholder="Confirm Password"
id="passwordConfirmation"
v-model="form.passwordConfirmation"
>
<p class="text-red-500" v-if="form.errors.password">
{{ form.errors.password }}
</p>
</InputPassword>

<div class="flex items-center justify-end">
<InputButton
:processing="form.processing"
:disabled="form.processing"
>
Update Password
</InputButton>
</div>
<p class="text-right text-green-700" v-if="form.recentlySuccessful">
Profile updated successfully!
</p>
</form>
</section>

<section
class="rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg"
>
<header class="mb-6">
<h2 class="text-2xl">Delete Account</h2>
<p class="mt-2 text-gray-600">
Once your account is deleted, all of its resources and data will be
permanently deleted. Before deleting your account, please download any
data or information that you wish to retain.
</p>
</header>

<form @submit.prevent="deleteAccount" class="space-y-4">
<InputPassword required v-model="deleteAccountForm.password" />
<div class="flex items-center justify-end">
<InputButton
:processing="deleteAccountForm.processing"
:disabled="deleteAccountForm.processing"
class="border-red-600 bg-red-600"
>
Delete Account
</InputButton>
</div>
</form>
</section>

<InputButton
@click="router.delete('/logout')"
class="w-full border-red-600 bg-red-600"
>
Logout
</InputButton>
</div>
</template>