poptong/music-admin
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🔧 웹훅 URL을 HTTPS로 수정
Some checks failed
🚀 Deploy - Demo / deployment (push) Has been cancelled
Details

Browse Source 
- 웹훅 URL을 https://admin.youtooplay.com/webhook로 변경
- Nginx 리버스 프록시 설정 파일 추가
- 배포 가이드 업데이트
This commit is contained in:
poptong
2025-10-01 01:47:51 +09:00
parent f331b52e64
commit 83b162d2bd
713 changed files with 98449 additions and 38378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
views/pages/account-settings/AccountSettingsAccount.vue Normal file
View File

@@ -0,0 +1,376 @@
<script lang="ts" setup>
import avatar1 from '@images/avatars/avatar-1.png'
const accountData = {
avatarImg: avatar1,
firstName: 'john',
lastName: 'Doe',
email: 'johnDoe@example.com',
org: 'ThemeSelection',
phone: '+1 (917) 543-9876',
address: '123 Main St, New York, NY 10001',
state: 'New York',
zip: '10001',
country: 'USA',
language: 'English',
timezone: '(GMT-11:00) International Date Line West',
currency: 'USD',
}
const refInputEl = ref<HTMLElement>()
const accountDataLocal = ref(structuredClone(accountData))
const isAccountDeactivated = ref(false)
const resetForm = () => {
accountDataLocal.value = structuredClone(accountData)
}
// changeAvatar function
const changeAvatar = (file: Event) => {
const fileReader = new FileReader()
const { files } = file.target as HTMLInputElement
if (files && files.length) {
fileReader.readAsDataURL(files[0])
fileReader.onload = () => {
if (typeof fileReader.result === 'string')
accountDataLocal.value.avatarImg = fileReader.result
}
}
}
// reset avatar image
const resetAvatar = () => {
accountDataLocal.value.avatarImg = accountData.avatarImg
}
const timezones = [
'(GMT-11:00) International Date Line West',
'(GMT-11:00) Midway Island',
'(GMT-10:00) Hawaii',
'(GMT-09:00) Alaska',
'(GMT-08:00) Pacific Time (US & Canada)',
'(GMT-08:00) Tijuana',
'(GMT-07:00) Arizona',
'(GMT-07:00) Chihuahua',
'(GMT-07:00) La Paz',
'(GMT-07:00) Mazatlan',
'(GMT-07:00) Mountain Time (US & Canada)',
'(GMT-06:00) Central America',
'(GMT-06:00) Central Time (US & Canada)',
'(GMT-06:00) Guadalajara',
'(GMT-06:00) Mexico City',
'(GMT-06:00) Monterrey',
'(GMT-06:00) Saskatchewan',
'(GMT-05:00) Bogota',
'(GMT-05:00) Eastern Time (US & Canada)',
'(GMT-05:00) Indiana (East)',
'(GMT-05:00) Lima',
'(GMT-05:00) Quito',
'(GMT-04:00) Atlantic Time (Canada)',
'(GMT-04:00) Caracas',
'(GMT-04:00) La Paz',
'(GMT-04:00) Santiago',
'(GMT-03:30) Newfoundland',
'(GMT-03:00) Brasilia',
'(GMT-03:00) Buenos Aires',
'(GMT-03:00) Georgetown',
'(GMT-03:00) Greenland',
'(GMT-02:00) Mid-Atlantic',
'(GMT-01:00) Azores',
'(GMT-01:00) Cape Verde Is.',
'(GMT+00:00) Casablanca',
'(GMT+00:00) Dublin',
'(GMT+00:00) Edinburgh',
'(GMT+00:00) Lisbon',
'(GMT+00:00) London',
]
const currencies = [
'USD',
'EUR',
'GBP',
'AUD',
'BRL',
'CAD',
'CNY',
'CZK',
'DKK',
'HKD',
'HUF',
'INR',
]
</script>
<template>
<VRow>
<VCol cols="12">
<VCard title="Account Details">
<VCardText class="d-flex">
<!-- 👉 Avatar -->
<VAvatar
rounded="lg"
size="100"
class="me-6"
:image="accountDataLocal.avatarImg"
/>
<!-- 👉 Upload Photo -->
<form class="d-flex flex-column justify-center gap-5">
<div class="d-flex flex-wrap gap-2">
<VBtn
color="primary"
@click="refInputEl?.click()"
>
<VIcon
icon="bx-cloud-upload"
class="d-sm-none"
/>
<span class="d-none d-sm-block">Upload new photo</span>
</VBtn>
<input
ref="refInputEl"
type="file"
name="file"
accept=".jpeg,.png,.jpg,GIF"
hidden
@input="changeAvatar"
>
<VBtn
type="reset"
color="error"
variant="tonal"
@click="resetAvatar"
>
<span class="d-none d-sm-block">Reset</span>
<VIcon
icon="bx-refresh"
class="d-sm-none"
/>
</VBtn>
</div>
<p class="text-body-1 mb-0">
Allowed JPG, GIF or PNG. Max size of 800K
</p>
</form>
</VCardText>
<VDivider />
<VCardText>
<!-- 👉 Form -->
<VForm class="mt-6">
<VRow>
<!-- 👉 First Name -->
<VCol
md="6"
cols="12"
>
<VTextField
:id="useId()"
v-model="accountDataLocal.firstName"
placeholder="John"
label="First Name"
/>
</VCol>
<!-- 👉 Last Name -->
<VCol
md="6"
cols="12"
>
<VTextField
:id="useId()"
v-model="accountDataLocal.lastName"
placeholder="Doe"
label="Last Name"
/>
</VCol>
<!-- 👉 Email -->
<VCol
cols="12"
md="6"
>
<VTextField
:id="useId()"
v-model="accountDataLocal.email"
label="E-mail"
placeholder="johndoe@gmail.com"
type="email"
/>
</VCol>
<!-- 👉 Organization -->
<VCol
cols="12"
md="6"
>
<VTextField
:id="useId()"
v-model="accountDataLocal.org"
label="Organization"
placeholder="ThemeSelection"
/>
</VCol>
<!-- 👉 Phone -->
<VCol
cols="12"
md="6"
>
<VTextField
:id="useId()"
v-model="accountDataLocal.phone"
label="Phone Number"
placeholder="+1 (917) 543-9876"
/>
</VCol>
<!-- 👉 Address -->
<VCol
cols="12"
md="6"
>
<VTextField
:id="useId()"
v-model="accountDataLocal.address"
label="Address"
placeholder="123 Main St, New York, NY 10001"
/>
</VCol>
<!-- 👉 State -->
<VCol
cols="12"
md="6"
>
<VTextField
:id="useId()"
v-model="accountDataLocal.state"
label="State"
placeholder="New York"
/>
</VCol>
<!-- 👉 Zip Code -->
<VCol
cols="12"
md="6"
>
<VTextField
:id="useId()"
v-model="accountDataLocal.zip"
label="Zip Code"
placeholder="10001"
/>
</VCol>
<!-- 👉 Country -->
<VCol
cols="12"
md="6"
>
<VSelect
:id="useId()"
v-model="accountDataLocal.country"
label="Country"
:items="['USA', 'Canada', 'UK', 'India', 'Australia']"
placeholder="Select Country"
/>
</VCol>
<!-- 👉 Language -->
<VCol
cols="12"
md="6"
>
<VSelect
:id="useId()"
v-model="accountDataLocal.language"
label="Language"
placeholder="Select Language"
:items="['English', 'Spanish', 'Arabic', 'Hindi', 'Urdu']"
/>
</VCol>
<!-- 👉 Timezone -->
<VCol
cols="12"
md="6"
>
<VSelect
:id="useId()"
v-model="accountDataLocal.timezone"
label="Timezone"
placeholder="Select Timezone"
:items="timezones"
:menu-props="{ maxHeight: 200 }"
/>
</VCol>
<!-- 👉 Currency -->
<VCol
cols="12"
md="6"
>
<VSelect
:id="useId()"
v-model="accountDataLocal.currency"
label="Currency"
placeholder="Select Currency"
:items="currencies"
:menu-props="{ maxHeight: 200 }"
/>
</VCol>
<!-- 👉 Form Actions -->
<VCol
cols="12"
class="d-flex flex-wrap gap-4"
>
<VBtn>Save changes</VBtn>
<VBtn
color="secondary"
variant="tonal"
type="reset"
@click.prevent="resetForm"
>
Reset
</VBtn>
</VCol>
</VRow>
</VForm>
</VCardText>
</VCard>
</VCol>
<VCol cols="12">
<!-- 👉 Deactivate Account -->
<VCard title="Deactivate Account">
<VCardText>
<div>
<VCheckbox
:id="useId()"
v-model="isAccountDeactivated"
label="I confirm my account deactivation"
/>
</div>
<VBtn
:disabled="!isAccountDeactivated"
color="error"
class="mt-3"
>
Deactivate Account
</VBtn>
</VCardText>
</VCard>
</VCol>
</VRow>
</template>

132
views/pages/account-settings/AccountSettingsNotification.vue Normal file
View File

@@ -0,0 +1,132 @@
<script lang="ts" setup>
const recentDevices = ref(
[
{
type: 'New for you',
email: true,
browser: true,
app: true,
},
{
type: 'Account activity',
email: true,
browser: true,
app: true,
},
{
type: 'A new browser used to sign in',
email: true,
browser: true,
app: false,
},
{
type: 'A new device is linked',
email: true,
browser: false,
app: false,
},
],
)
const selectedNotification = ref('Only when I\'m online')
</script>
<template>
<VCard title="Recent Devices">
<VCardText>
We need permission from your browser to show notifications.
<a href="javascript:void(0)">Request Permission</a>
</VCardText>
<VTable class="text-no-wrap">
<thead>
<tr>
<th scope="col">
Type
</th>
<th scope="col">
EMAIL
</th>
<th scope="col">
BROWSER
</th>
<th scope="col">
App
</th>
</tr>
</thead>
<tbody>
<tr
v-for="device in recentDevices"
:key="device.type"
>
<td>
{{ device.type }}
</td>
<td>
<VCheckbox
:id="useId()"
v-model="device.email"
/>
</td>
<td>
<VCheckbox
:id="useId()"
v-model="device.browser"
/>
</td>
<td>
<VCheckbox
:id="useId()"
v-model="device.app"
/>
</td>
</tr>
</tbody>
</VTable>
<VDivider />
<VCardText>
<VForm @submit.prevent="() => {}">
<p class="text-base font-weight-medium">
When should we send you notifications?
</p>
<VRow>
<VCol
cols="12"
sm="6"
>
<VSelect
:id="useId()"
v-model="selectedNotification"
mandatory
:items="['Only when I\'m online', 'Anytime']"
/>
</VCol>
</VRow>
<div class="d-flex flex-wrap gap-4 mt-4">
<VBtn type="submit">
Save Changes
</VBtn>
<VBtn
color="secondary"
variant="tonal"
type="reset"
>
Reset
</VBtn>
</div>
</VForm>
</VCardText>
</VCard>
</template>
<style lang="scss" scoped>
.v-table {
th {
text-align: start !important;
}
}
</style>

336
views/pages/account-settings/AccountSettingsSecurity.vue Normal file
View File

@@ -0,0 +1,336 @@
<script lang="ts" setup>
const isCurrentPasswordVisible = ref(false)
const isNewPasswordVisible = ref(false)
const isConfirmPasswordVisible = ref(false)
const currentPassword = ref('12345678')
const newPassword = ref('87654321')
const confirmPassword = ref('87654321')
const passwordRequirements = [
'Minimum 8 characters long - the more, the better',
'At least one lowercase character',
'At least one number, symbol, or whitespace character',
]
const serverKeys = [
{
name: 'Server Key 1',
key: '23eaf7f0-f4f7-495e-8b86-fad3261282ac',
createdOn: '28 Apr 2021, 18:20 GTM+4:10',
permission: 'Full Access',
},
{
name: 'Server Key 2',
key: 'bb98e571-a2e2-4de8-90a9-2e231b5e99',
createdOn: '12 Feb 2021, 10:30 GTM+2:30',
permission: 'Read Only',
},
{
name: 'Server Key 3',
key: '2e915e59-3105-47f2-8838-6e46bf83b711',
createdOn: '28 Dec 2020, 12:21 GTM+4:10',
permission: 'Full Access',
},
]
const recentDevicesHeaders = [
{ title: 'BROWSER', key: 'browser' },
{ title: 'DEVICE', key: 'device' },
{ title: 'LOCATION', key: 'location' },
{ title: 'RECENT ACTIVITY', key: 'recentActivity' },
]
const recentDevices = [
{
browser: 'Chrome on Windows',
device: 'HP Spectre 360',
location: 'New York, NY',
recentActivity: '28 Apr 2022, 18:20',
deviceIcon: { icon: 'bxl-windows', color: 'primary' },
},
{
browser: 'Chrome on iPhone',
device: 'iPhone 12x',
location: 'Los Angeles, CA',
recentActivity: '20 Apr 2022, 10:20',
deviceIcon: { icon: 'bx-mobile', color: 'error' },
},
{
browser: 'Chrome on Android',
device: 'Oneplus 9 Pro',
location: 'San Francisco, CA',
recentActivity: '16 Apr 2022, 04:20',
deviceIcon: { icon: 'bxl-android', color: 'success' },
},
{
browser: 'Chrome on macOS',
device: 'Apple iMac',
location: 'New York, NY',
recentActivity: '28 Apr 2022, 18:20',
deviceIcon: { icon: 'bxl-apple', color: 'secondary' },
},
{
browser: 'Chrome on Windows',
device: 'HP Spectre 360',
location: 'Los Angeles, CA',
recentActivity: '20 Apr 2022, 10:20',
deviceIcon: { icon: 'bxl-windows', color: 'primary' },
},
{
browser: 'Chrome on Android',
device: 'Oneplus 9 Pro',
location: 'San Francisco, CA',
recentActivity: '16 Apr 2022, 04:20',
deviceIcon: { icon: 'bxl-android', color: 'success' },
},
]
</script>
<template>
<VRow>
<!-- SECTION: Change Password -->
<VCol cols="12">
<VCard title="Change Password">
<VForm>
<VCardText>
<!-- 👉 Current Password -->
<VRow>
<VCol
cols="12"
md="6"
>
<!-- 👉 current password -->
<VTextField
:id="useId()"
v-model="currentPassword"
:type="isCurrentPasswordVisible ? 'text' : 'password'"
:append-inner-icon="isCurrentPasswordVisible ? 'bx-hide' : 'bx-show'"
label="Current Password"
placeholder="············"
@click:append-inner="isCurrentPasswordVisible = !isCurrentPasswordVisible"
/>
</VCol>
</VRow>
<!-- 👉 New Password -->
<VRow>
<VCol
cols="12"
md="6"
>
<!-- 👉 new password -->
<VTextField
:id="useId()"
v-model="newPassword"
:type="isNewPasswordVisible ? 'text' : 'password'"
:append-inner-icon="isNewPasswordVisible ? 'bx-hide' : 'bx-show'"
label="New Password"
autocomplete="on"
placeholder="············"
@click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 confirm password -->
<VTextField
:id="useId()"
v-model="confirmPassword"
:type="isConfirmPasswordVisible ? 'text' : 'password'"
:append-inner-icon="isConfirmPasswordVisible ? 'bx-hide' : 'bx-show'"
label="Confirm New Password"
placeholder="············"
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
/>
</VCol>
</VRow>
</VCardText>
<!-- 👉 Password Requirements -->
<VCardText>
<p class="text-base font-weight-medium mt-2">
Password Requirements:
</p>
<ul class="d-flex flex-column gap-y-3">
<li
v-for="item in passwordRequirements"
:key="item"
class="d-flex"
>
<div>
<VIcon
size="7"
icon="bxs-circle"
class="me-3"
/>
</div>
<span class="font-weight-medium">{{ item }}</span>
</li>
</ul>
</VCardText>
<!-- 👉 Action Buttons -->
<VCardText class="d-flex flex-wrap gap-4">
<VBtn>Save changes</VBtn>
<VBtn
type="reset"
color="secondary"
variant="tonal"
>
Reset
</VBtn>
</VCardText>
</VForm>
</VCard>
</VCol>
<!-- !SECTION -->
<!-- SECTION Two-steps verification -->
<VCol cols="12">
<VCard title="Two-steps verification">
<VCardText>
<p class="font-weight-semibold">
Two factor authentication is not enabled yet.
</p>
<p>
Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in.
<a
href="javascript:void(0)"
class="text-decoration-none"
>Learn more.</a>
</p>
<VBtn>
Enable 2FA
</VBtn>
</VCardText>
</VCard>
</VCol>
<!-- !SECTION -->
<VCol cols="12">
<!-- SECTION: Create an API key -->
<VCard title="Create an API key">
<VRow>
<!-- 👉 Choose API Key -->
<VCol
cols="12"
md="5"
order-md="0"
order="1"
>
<VCardText>
<VForm @submit.prevent="() => {}">
<VRow>
<!-- 👉 Choose API Key -->
<VCol cols="12">
<VSelect
:id="useId()"
label="Choose the API key type you want to create"
placeholder="Select API key type"
:items="['Full Control', 'Modify', 'Read & Execute', 'List Folder Contents', 'Read Only', 'Read & Write']"
/>
</VCol>
<!-- 👉 Name the API Key -->
<VCol cols="12">
<VTextField
:id="useId()"
label="Name the API key"
placeholder="Name the API key"
/>
</VCol>
<!-- 👉 Create Key Button -->
<VCol cols="12">
<VBtn
type="submit"
block
>
Create Key
</VBtn>
</VCol>
</VRow>
</VForm>
</VCardText>
</VCol>
</VRow>
</VCard>
<!-- !SECTION -->
</VCol>
<VCol cols="12">
<!-- SECTION: API Keys List -->
<VCard title="API Key List &amp; Access">
<VCardText>
An API key is a simple encrypted string that identifies an application without any principal. They are useful for accessing public data anonymously, and are used to associate API requests with your project for quota and billing.
</VCardText>
<!-- 👉 Server Status -->
<VCardText class="d-flex flex-column gap-y-4">
<div
v-for="serverKey in serverKeys"
:key="serverKey.key"
class="bg-var-theme-background pa-4"
>
<div class="d-flex align-center flex-wrap mb-3">
<h6 class="text-h6 mb-0 me-3">
{{ serverKey.name }}
</h6>
<VChip
label
color="primary"
size="small"
>
{{ serverKey.permission }}
</VChip>
</div>
<p class="text-base font-weight-medium">
<span class="me-3">{{ serverKey.key }}</span>
<VIcon
:size="18"
icon="bx-copy"
class="cursor-pointer"
/>
</p>
<span>Created on {{ serverKey.createdOn }}</span>
</div>
</VCardText>
</VCard>
<!-- !SECTION -->
</VCol>
<!-- SECTION Recent Devices -->
<VCol cols="12">
<!-- 👉 Table -->
<VCard title="Recent Devices">
<VDataTable
:headers="recentDevicesHeaders"
:items="recentDevices"
class="text-no-wrap rounded-0 text-sm"
>
<template #item.browser="{ item }">
<div class="d-flex">
<VIcon
start
:icon="item.deviceIcon.icon"
:color="item.deviceIcon.color"
/>
<span class="text-high-emphasis text-base">
{{ item.browser }}
</span>
</div>
</template>
<!-- TODO Refactor this after vuetify provides proper solution for removing default footer -->
<template #bottom />
</VDataTable>
</VCard>
</VCol>
<!-- !SECTION -->
</VRow>
</template>