Skip to content

Commit

Permalink
PUSH
Browse files Browse the repository at this point in the history 
-> Account setting page
  • Loading branch information
@NaysKutzu
NaysKutzu committed Dec 5, 2024
1 parent 3b1f31f commit ecd2802
Show file tree
Hide file tree
Showing 5 changed files with 231 additions and 43 deletions.
18 changes: 11 additions & 7 deletions backend/app/Api/User/Session.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,15 @@
$appInstance->BadRequest('Background is missing!', ['error_code' => 'BACKGROUND_MISSING']);
}

$session->setInfo(UserColumns::FIRST_NAME, $_POST['first_name'],true);
$session->setInfo(UserColumns::LAST_NAME, $_POST['last_name'],true);
$session->setInfo(UserColumns::EMAIL, $_POST['email'],false);
$session->setInfo(UserColumns::AVATAR, $_POST['avatar'],false);
$session->setInfo(UserColumns::BACKGROUND,$_POST['background'],false);
if ($_POST['email'] != $session->getInfo(UserColumns::EMAIL, false) && User::exists(UserColumns::EMAIL, $_POST['email'])) {
$appInstance->BadRequest('Email already exists!', ['error_code' => 'EMAIL_EXISTS']);
}

$session->setInfo(UserColumns::FIRST_NAME, $_POST['first_name'], true);
$session->setInfo(UserColumns::LAST_NAME, $_POST['last_name'], true);
$session->setInfo(UserColumns::EMAIL, $_POST['email'], false);
$session->setInfo(UserColumns::AVATAR, $_POST['avatar'], false);
$session->setInfo(UserColumns::BACKGROUND, $_POST['background'], false);

$appInstance->OK('User info updated successfully!', []);
} catch (Exception $e) {
Expand Down Expand Up @@ -141,10 +145,10 @@
$config = $appInstance->getConfig();

$appInstance->allowOnlyGET();

$session = new Session($appInstance);
if (isset($_GET['ip']) && $_GET['ip'] != '') {
$session->setInfo(UserColumns::LAST_IP, $_GET['ip'], false);
$session->setInfo(UserColumns::LAST_IP, $_GET['ip'], false);
}
$accountToken = $session->SESSION_KEY;
try {
Expand Down
13 changes: 12 additions & 1 deletion frontend/src/components/Dashboard/Account/Billing.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,17 @@ const saveChanges = async () => {
console.error('Error updating account:', error);
}
};
const resetFields = async () => {
form.company_name = Session.getInfo('company_name');
form.vat_number = Session.getInfo('vat_number');
form.address1 = Session.getInfo('address1');
form.address2 = Session.getInfo('address2');
form.city = Session.getInfo('city');
form.country = Session.getInfo('country');
form.state = Session.getInfo('state');
form.postcode = Session.getInfo('postcode');
};
</script>

<style scoped>
Expand Down Expand Up @@ -164,7 +175,7 @@ const saveChanges = async () => {
class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded text-sm font-medium transition-colors">
{{ t('account.pages.billing.page.form.update_button.label') }}
</button>
<button type="button"
<button @click="resetFields" type="button"
class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded text-sm font-medium transition-colors">
{{ t('account.pages.billing.page.form.update_button.reset') }}
</button>
Expand Down
144 changes: 109 additions & 35 deletions frontend/src/components/Dashboard/Account/Settings.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,98 @@
<script setup lang="ts">
import { ref } from 'vue';
import { reactive } from 'vue';
import LayoutAccount from './Layout.vue';
import TextInput from '@/components/ui/TextForms/TextInput.vue';
import CardComponent from '@/components/ui/Card/CardComponent.vue';
import Session from '@/mythicalclient/Session';
import { useI18n } from 'vue-i18n';
import Swal from 'sweetalert2';
import Auth from '@/mythicalclient/Auth';
const form = ref({
const { t } = useI18n();
const form = reactive({
firstName: Session.getInfo('first_name'),
lastName: Session.getInfo('last_name'),
email: Session.getInfo('email'),
avatar: Session.getInfo('avatar'),
background: Session.getInfo('background'),
});
document.title = t('account.pages.settings.page.title');
const saveChanges = async () => {
try {
const response = await Auth.updateUserInfo(
form.firstName,
form.lastName,
form.email,
form.avatar,
form.background
);
if (response.success) {
console.log('Account updated successfully');
const title = t('account.pages.settings.alerts.success.title');
const text = t('account.pages.settings.alerts.success.update_success');
const footer = t('account.pages.settings.alerts.success.footer');
Swal.fire({
icon: 'success',
title: title,
text: text,
footer: footer,
showConfirmButton: true
});
} else {
if (response.error_code == "EMAIL_EXISTS") {
const title = t('account.pages.settings.alerts.error.title');
const text = t('account.pages.settings.alerts.error.email');
const footer = t('account.pages.settings.alerts.error.footer');
Swal.fire({
icon: 'error',
title: title,
text: text,
footer: footer,
showConfirmButton: true
});
console.error('Error updating account:', response.error);
} else {
const title = t('account.pages.settings.alerts.error.title');
const text = t('account.pages.settings.alerts.error.generic');
const footer = t('account.pages.settings.alerts.error.footer');
Swal.fire({
icon: 'error',
title: title,
text: text,
footer: footer,
showConfirmButton: true
});
console.error('Error updating account:', response.error);
}
}
} catch (error) {
const title = t('account.pages.settings.alerts.error.title');
const text = t('account.pages.settings.alerts.error.generic');
const footer = t('account.pages.settings.alerts.error.footer');
Swal.fire({
icon: 'error',
title: title,
text: text,
footer: footer,
showConfirmButton: true
});
console.error('Error updating account:', error);
}
};
const resetFields = async () => {
form.firstName = Session.getInfo('first_name');
form.lastName = Session.getInfo('last_name');
form.email = Session.getInfo('email');
form.avatar = Session.getInfo('avatar');
form.background = Session.getInfo('background');
}
</script>

<style scoped>
Expand All @@ -34,85 +115,78 @@ const form = ref({
<LayoutAccount />

<!-- Settings Form -->
<CardComponent
cardTitle="Deactivate Account"
cardDescription="Once you deactivate your account, there is no going back. Please be certain."
>
<CardComponent :cardTitle="t('account.pages.settings.page.title')"
:cardDescription="t('account.pages.settings.page.subTitle')">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4">
<div>
<label class="block">
<span class="block text-sm font-medium text-gray-400 mb-1.5">First name</span>
<span class="block text-sm font-medium text-gray-400 mb-1.5">{{
t('account.pages.settings.page.form.firstName.label')}}</span>
<TextInput v-model="form.firstName" name="firstName" id="firstName" />
</label>
</div>
<div>
<label class="block">
<span class="block text-sm font-medium text-gray-400 mb-1.5">Email</span>
<span class="block text-sm font-medium text-gray-400 mb-1.5">{{
t('account.pages.settings.page.form.email.label') }}</span>
<TextInput type="email" v-model="form.email" name="email" id="email" />
</label>
</div>
<div>
<label class="block">
<span class="block text-sm font-medium text-gray-400 mb-1.5">Background</span>
<span class="block text-sm font-medium text-gray-400 mb-1.5">{{
t('account.pages.settings.page.form.background') }}</span>
<TextInput type="url" v-model="form.background" name="background" id="background" />
</label>
</div>
</div>
<div class="space-y-4">
<div>
<label class="block">
<span class="block text-sm font-medium text-gray-400 mb-1.5">Last name</span>
<span class="block text-sm font-medium text-gray-400 mb-1.5">{{
t('account.pages.settings.page.form.lastName.label') }}</span>
<TextInput type="text" v-model="form.lastName" name="lastName" id="lastName" />
</label>
</div>
<div>
<label class="block">
<span class="block text-sm font-medium text-gray-400 mb-1.5">Avatar</span>
<span class="block text-sm font-medium text-gray-400 mb-1.5">{{
t('account.pages.settings.page.form.avatar.label')}}</span>
<TextInput type="url" v-model="form.avatar" name="avatar" id="avatar" />
</label>
</div>
</div>
</div>
<br />
<div class="flex flex-wrap gap-3">
<button
type="button"
class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded text-sm font-medium transition-colors"
>
Save changes
<button @click="saveChanges" type="button"
class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded text-sm font-medium transition-colors">
{{ t('account.pages.settings.page.form.update_button.label') }}
</button>
<button
type="button"
class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded text-sm font-medium transition-colors"
>
Reset
<button @click="resetFields" type="button"
class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded text-sm font-medium transition-colors">
{{ t('account.pages.settings.page.form.update_button.reset') }}
</button>
</div>
</CardComponent>
<br />
<CardComponent
cardTitle="Deactivate Account"
cardDescription="Once you deactivate your account, there is no going back. Please be certain."
>
<CardComponent :cardTitle="t('account.pages.settings.page.delete.title')"
:cardDescription="t('account.pages.settings.page.delete.subTitle')">
<div class="space-y-4">
<p class="text-sm text-gray-300">
Once you deactivate your account, there is no going back. Please be certain.
{{ t('account.pages.settings.page.delete.lines.0') }}
</p>
<p class="text-sm text-gray-300">
Once you delete your account, there is a 30 days window for you to contact support to recover your
account. After 30 days, your account will be permanently disabled.
{{ t('account.pages.settings.page.delete.lines.1') }}
</p>
<p class="text-sm text-gray-300">
This means that your account will be marked as deleted BUT we reserve the right to keep all the data for
legal reasons. You may open a ticket for your data to be anonymized due to GDPR!
{{ t('account.pages.settings.page.delete.lines.2') }}
</p>
<br />
<button
type="button"
class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded text-sm font-medium transition-colors"
>
Deactivate account
<button type="button"
class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded text-sm font-medium transition-colors">
{{ t('account.pages.settings.page.delete.button.label') }}
</button>
</div>
</CardComponent>
Expand Down
60 changes: 60 additions & 0 deletions frontend/src/locale/en.yml
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
#-------------------------------------------------------------#
#
# Auth Pages (/auth/*)
#
# @public
#
#-------------------------------------------------------------#
auth:
logic:
errors:
Expand Down Expand Up @@ -154,6 +161,13 @@ auth:
login:
label: Remembered your password?
link: Login
#-------------------------------------------------------------#
#
# Global Errors Pages
#
# @public
#
#-------------------------------------------------------------#
errors:
forbidden:
title: 403 Forbidden
Expand All @@ -168,8 +182,54 @@ errors:
servererror:
title: 500 Server Error
message: An error occurred on our end. Please try again later.
#-------------------------------------------------------------#
#
# Account Settings (/account/*)
#
# @public
#
#-------------------------------------------------------------#
account:
pages:
settings:
alerts:
success:
title: Success
update_success: Account settings updated
footer: Your account settings have been updated
error:
title: Error
generic: An error occurred. Please try again later
email: Email already exists
footer: Please contact support for assistance
page:
title: Account
subTitle: Manage your account settings
form:
email:
label: Email
firstName:
label: First Name
lastName:
label: Last Name
avatar:
label: Avatar
background:
label: Background
update_button:
label: Save Changes
reset: Reset
delete:
title: "Deactivate Account"
subTitle: "Once you deactivate your account, there is no going back. Please be certain."
# You can not add more than 3 lines!
lines:
- "Once you deactivate your account, there is no going back. Please be certain."
- "Once you delete your account, there is a 30 days window for you to contact support to recover your account. After 30 days, your account will be permanently disabled."
- "This means that your account will be marked as deleted BUT we reserve the right to keep all the data for legal reasons. You may open a ticket for your data to be anonymized due to GDPR!"
button:
label: Deactivate Account
loading: Deactivating...
billing:
alerts:
success:
Expand Down
Loading

0 comments on commit ecd2802

Please sign in to comment.