New UI For Settings Page (#22)

* New UI For Settings Page

* WIP UI improvements

Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>
This commit is contained in:
Chirag 2022-11-08 22:14:04 +05:30 committed by GitHub
parent d694c4d8ce
commit 4873dfe696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 133 additions and 141 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<button v-if="!to" :type="nativeType" :disabled="loading" :class="btnClasses" <button v-if="!to" :type="nativeType" :disabled="loading" :class="btnClasses"
@click="$emit('click',$event)" @click="onClick($event)"
> >
<template v-if="!loading"> <template v-if="!loading">
<span class="no-underline mx-auto"> <span class="no-underline mx-auto">
@ -158,6 +158,12 @@ export default {
'p-x': 'px-4' 'p-x': 'px-4'
} }
} }
},
methods: {
onClick(event) {
this.$emit('click',event)
}
} }
} }
</script> </script>

View File

@ -1,18 +1,18 @@
<template> <template>
<card title="Account" class="bg-gray-50 dark:bg-notion-dark-light"> <div>
<h3 class="text-lg font-semibold mb-4"> <h3 class="font-semibold text-2xl text-gray-900">Danger zone</h3>
Your Account <p class="text-gray-600 text-sm mt-2">
</h3> This will permanently delete your entire account. All your forms, submissions and workspaces will be deleted.
<span class="text-red-500">
<p class="text-gray-800 dark:text-gray-200"> This cannot be undone.
You can delete your account. All your data will be removed. <span class="font-semibold">This cannot be undone.</span> </span>
</p> </p>
<!-- Submit Button --> <!-- Submit Button -->
<v-button :loading="loading" class="mt-4" color="red" @click="alertConfirm('Do you really want to delete your account?',deleteAccount)"> <v-button :loading="loading" class="mt-4" color="red" @click="alertConfirm('Do you really want to delete your account?',deleteAccount)">
Delete my account Delete account
</v-button> </v-button>
</card> </div>
</template> </template>
<script> <script>

View File

@ -1,9 +1,13 @@
<template> <template>
<card title="Admin" class="bg-gray-50 dark:bg-notion-dark-light"> <div>
<h3 class="text-lg font-semibold mb-4"> <h3 class="font-semibold text-2xl text-gray-900">Admin settings</h3>
<small class="text-gray-600">Manage settings.</small>
<h3 class="mt-3 text-lg font-semibold mb-4">
Tools Tools
</h3> </h3>
<div class="flex flex-wrap mb-10"> <div class="flex flex-wrap mb-5">
<a href="/stats"> <a href="/stats">
<v-button class="mx-1" color="gray" shade="lighter"> <v-button class="mx-1" color="gray" shade="lighter">
Stats Stats
@ -25,11 +29,9 @@
/> />
<!-- Submit Button --> <!-- Submit Button -->
<v-button :loading="loading" class="mt-4 w-full"> <v-button :loading="loading" class="mt-4">Impersonate User</v-button>
Impersonate User
</v-button>
</form> </form>
</card> </div>
</template> </template>
<script> <script>

View File

@ -1,12 +1,17 @@
<template> <template>
<card title="Billing" class="bg-gray-50 dark:bg-notion-dark-light"> <div>
<v-button color="gray" shade="light" :loading="billingLoading" @click.prevent="openBillingDashboard"> <h3 class="font-semibold text-2xl text-gray-900">Billing details</h3>
Manage Subscription <small class="text-gray-600">Manage your billing.</small>
</v-button>
<v-button color="red" class="mt-3" @click.prevent="cancelSubscription"> <div class="mt-4">
Cancel Subscription <v-button color="gray" shade="light" :loading="billingLoading" @click.prevent="openBillingDashboard">
</v-button> Manage Subscription
</card> </v-button>
<v-button color="red" class="mt-3" @click.prevent="cancelSubscription">
Cancel Subscription
</v-button>
</div>
</div>
</template> </template>
<script> <script>

View File

@ -1,80 +1,38 @@
<template> <template>
<div class="flex flex-wrap mt-6 md:max-w-3xl w-full md:mx-auto"> <div class="bg-white">
<div class="w-full md:w-1/3 md:pr-4"> <div class="flex bg-gray-50">
<card :padding="false" class="bg-gray-50 dark:bg-notion-dark-light"> <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
<ul> <div class="pt-4 pb-0">
<li v-for="tab in tabs" :key="tab.route"> <div class="flex">
<router-link :to="{ name: tab.route }" <h2 class="flex-grow text-gray-900">
class="px-6 py-4 flex items-center text-gray-600 dark:text-gray-400 dark:hover:text-gray-300 hover:text-gray-900 hover:bg-gray-50 dark:hover:bg-gray-900 rounded" My Account
active-class="text-nt-blue bg-indigo-50 dark:bg-gray-800 hover:bg-blue-50" </h2>
> </div>
<template v-if="tab.route == 'settings.profile'"> <ul class="flex text-gray-500">
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <li>{{ user.email }}</li>
stroke="currentColor" </ul>
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</template>
<template v-else-if="tab.route == 'settings.account'">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7a4 4 0 11-8 0 4 4 0 018 0zM9 14a6 6 0 00-6 6v1h12v-1a6 6 0 00-6-6zM21 12h-6" />
</svg>
</template>
<template v-else-if="tab.route == 'settings.workspaces'">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
</template>
<template v-else-if="tab.route == 'settings.billing'">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
/>
</svg>
</template>
<template v-else-if="tab.route == 'settings.password'">
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</template>
<span class="ml-2">
{{ tab.name }}
</span>
</router-link>
</li>
<li v-if="user.admin">
<router-link :to="{ name: 'settings.admin' }"
class="px-6 py-4 flex items-center text-gray-600 dark:text-gray-400 dark:hover:text-gray-300 hover:text-gray-900 hover:bg-gray-50 dark:hover:bg-gray-900 rounded"
active-class="text-nt-blue bg-indigo-50 dark:bg-gray-800 hover:bg-blue-50"
>
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
<span class="ml-2">
Admin
</span>
</router-link>
</li>
</ul>
</card>
</div>
<div class="w-full md:w-2/3"> <div class="mt-4 border-b border-gray-200 dark:border-gray-700">
<transition name="fade" mode="out-in"> <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
<router-view /> <li class="mr-6" v-for="(tab, i) in tabsList" :key="i+1">
</transition> <router-link :to="{ name: tab.route }"
class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 border-transparent text-gray-500 hover:text-gray-600"
active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
>{{tab.name}}</router-link>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex bg-white">
<div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
<div class="mt-8 pb-0">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -85,19 +43,27 @@ import { mapGetters } from 'vuex'
export default { export default {
middleware: 'auth', middleware: 'auth',
data () {
return {
}
},
computed: { computed: {
tabs () { ...mapGetters({
user: 'auth/user'
}),
tabsList () {
const tabs = [ const tabs = [
{ {
name: 'Workspaces', name: 'Profile',
route: 'settings.workspaces'
},
{
name: this.$t('profile'),
route: 'settings.profile' route: 'settings.profile'
}, },
{ {
name: this.$t('password'), name: 'Workspace Settings',
route: 'settings.workspaces'
},
{
name: 'Password',
route: 'settings.password' route: 'settings.password'
}, },
{ {
@ -113,11 +79,18 @@ export default {
}) })
} }
if(this.user.admin){
tabs.push({
name: 'Admin',
route: 'settings.admin'
})
}
return tabs return tabs
}, }
...mapGetters({ },
user: 'auth/user'
}) methods: {
} }
} }
</script> </script>

View File

@ -1,24 +1,25 @@
<template> <template>
<card :title="$t('your_password')" class="bg-gray-50 dark:bg-notion-dark-light"> <div>
<form @submit.prevent="update" @keydown="form.onKeydown($event)"> <h3 class="font-semibold text-2xl text-gray-900">Password</h3>
<small class="text-gray-600">Manage your password.</small>
<form @submit.prevent="update" @keydown="form.onKeydown($event)" class="mt-3">
<alert-success class="mb-5" :form="form" :message="$t('password_updated')" /> <alert-success class="mb-5" :form="form" :message="$t('password_updated')" />
<!-- Password --> <!-- Password -->
<text-input class="mt-8" native-type="password" <text-input native-type="password"
name="password" :form="form" :label="$t('password')" :required="true" name="password" :form="form" :label="$t('password')" :required="true"
/> />
<!-- Password Confirmation--> <!-- Password Confirmation-->
<text-input class="mt-8" native-type="password" <text-input native-type="password"
name="password_confirmation" :form="form" :label="$t('confirm_password')" :required="true" name="password_confirmation" :form="form" :label="$t('confirm_password')" :required="true"
/> />
<!-- Submit Button --> <!-- Submit Button -->
<v-button :loading="form.busy" class="mt-4 w-full"> <v-button :loading="form.busy" class="mt-4">Update password</v-button>
{{ $t('update') }}
</v-button>
</form> </form>
</card> </div>
</template> </template>
<script> <script>

View File

@ -1,6 +1,9 @@
<template> <template>
<card title="Profile" class="bg-gray-50 dark:bg-notion-dark-light"> <div>
<form @submit.prevent="update" @keydown="form.onKeydown($event)"> <h3 class="font-semibold text-2xl text-gray-900">Profile details</h3>
<small class="text-gray-600">Update your username and manage your account details.</small>
<form @submit.prevent="update" @keydown="form.onKeydown($event)" class="mt-3">
<alert-success class="mb-5" :form="form" :message="$t('info_updated')" /> <alert-success class="mb-5" :form="form" :message="$t('info_updated')" />
<!-- Name --> <!-- Name -->
@ -10,11 +13,9 @@
<text-input name="email" :form="form" :label="$t('email')" :required="true" /> <text-input name="email" :form="form" :label="$t('email')" :required="true" />
<!-- Submit Button --> <!-- Submit Button -->
<v-button :loading="form.busy" class="mt-4 w-full"> <v-button :loading="form.busy" class="mt-4">Save changes</v-button>
{{ $t('update') }}
</v-button>
</form> </form>
</card> </div>
</template> </template>
<script> <script>

View File

@ -1,37 +1,41 @@
<template> <template>
<card title="Workspaces" class="bg-gray-50 dark:bg-notion-dark-light"> <div>
<h3 class="font-semibold text-2xl text-gray-900">Workspace settings</h3>
<small class="text-gray-600">Manage your workspaces.</small>
<div v-if="loading" class="w-full text-blue-500 text-center"> <div v-if="loading" class="w-full text-blue-500 text-center">
<loader class="h-10 w-10 p-5"/> <loader class="h-10 w-10 p-5"/>
</div> </div>
<div v-else> <div v-else>
<div v-for="workspace in workspaces" :key="workspace.id" <div v-for="workspace in workspaces" :key="workspace.id"
class="border border-nt-blue-light shadow rounded-md p-4 mb-5 max-w-sm w-full flex group mx-auto bg-white dark:bg-notion-dark items-center" class="mt-4 p-4 flex group bg-white hover:bg-gray-50 dark:bg-notion-dark items-center"
> >
<div class="flex space-x-4 flex-grow cursor-pointer" role="button" @click.prevent="switchWorkspace(workspace)"> <div class="flex space-x-4 flex-grow items-center cursor-pointer" role="button" @click.prevent="switchWorkspace(workspace)">
<img v-if="isUrl(workspace.icon)" :src="workspace.icon" :alt="workspace.name + ' icon'" <img v-if="isUrl(workspace.icon)" :src="workspace.icon" :alt="workspace.name + ' icon'"
class="rounded-full h-12 w-12" class="rounded-full h-12 w-12"
> >
<div v-else class="rounded-full bg-nt-blue-lighter h-12 w-12 text-2xl pt-2 text-center overflow-hidden" <div v-else class="rounded-2xl bg-gray-100 h-12 w-12 text-2xl pt-2 text-center overflow-hidden"
v-text="workspace.icon" v-text="workspace.icon"
/> />
<div class="flex-1 flex items-center space-y-4 py-1"> <div class="space-y-4 py-1">
<p class="font-bold truncate" v-text="workspace.name"/> <div class="font-bold truncate">{{workspace.name}}</div>
</div> </div>
</div> </div>
<div v-if="workspaces.length > 1" <div v-if="workspaces.length > 1"
class="block md:hidden group-hover:block text-red-500 p-2 rounded hover:bg-red-50" role="button" class="block md:hidden group-hover:block text-red-500 p-2 rounded hover:bg-red-50" role="button"
@click="deleteWorkspace(workspace)"> @click="deleteWorkspace(workspace)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/> d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg> </svg>
</div> </div>
</div> </div>
<div class="max-w-sm w-full mx-auto mt-4"> <v-button :loading="loading" class="mt-4" @click="workspaceModal=true">
<v-button :loading="loading" class="w-full" @click="workspaceModal=true"> <svg class="inline text-white mr-1 h-4 w-4" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
Create a new workspace <path d="M6.99996 1.16699V12.8337M1.16663 7.00033H12.8333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</v-button> </svg>
</div> Create new workspace
</v-button>
</div> </div>
<!-- Workspace modal --> <!-- Workspace modal -->
@ -65,7 +69,7 @@
</div> </div>
</modal> </modal>
</card> </div>
</template> </template>
<script> <script>