7575 class =" mb-n2"
7676 @click:append =" apiKeyShow = !apiKeyShow"
7777 ></v-text-field >
78- <div class =" d-flex" >
78+ <div class =" d-flex flex-wrap " >
7979 <copy-button
80- :block =" $vuetify.breakpoint.mdAndDown"
81- :large =" $vuetify.breakpoint.mdAndDown"
8280 :value =" apiKey"
8381 color =" primary"
8482 copy-text =" Copy API Key"
9088 :href =" $store.getters.getAppData.documentationUrl"
9189 >Documentation</v-btn
9290 >
91+ <v-spacer ></v-spacer >
92+ <v-dialog
93+ v-model =" showRotateApiKey"
94+ overlay-opacity =" 0.9"
95+ max-width =" 550"
96+ >
97+ <template #activator =" { on , attrs } " >
98+ <v-btn
99+ :small =" $vuetify.breakpoint.mdAndDown"
100+ :text =" $vuetify.breakpoint.lgAndUp"
101+ color =" warning"
102+ v-bind =" attrs"
103+ v-on =" on"
104+ >
105+ <v-icon left >{{ mdiRefresh }}</v-icon >
106+ Rotate API Key
107+ </v-btn >
108+ </template >
109+ <v-card >
110+ <v-card-title class =" text-h5 text-break" >
111+ Are you sure you want to rotate your API Key?
112+ </v-card-title >
113+ <v-card-text >
114+ You will have to logout and login again on the
115+ <b >httpSMS</b > Android app with your new API key after you
116+ rotate it.
117+ </v-card-text >
118+ <v-card-actions class =" pb-4" >
119+ <v-btn
120+ color =" primary"
121+ :loading =" rotatingApiKey"
122+ @click =" rotateApiKey"
123+ >
124+ <v-icon left >{{ mdiRefresh }}</v-icon >
125+ Yes Rotate Key
126+ </v-btn >
127+ <v-spacer ></v-spacer >
128+ <v-btn text @click =" showRotateApiKey = false" >
129+ Close
130+ </v-btn >
131+ </v-card-actions >
132+ </v-card >
133+ </v-dialog >
93134 </div >
94135 <h5 id =" webhook-settings" class =" text-h4 mb-3 mt-12" >Webhooks</h5 >
95136 <p class =" text--secondary" >
345386 </v-row >
346387 </v-container >
347388 </div >
348- <v-dialog v-model =" showPhoneEdit" max-width =" 700px" >
389+ <v-dialog v-model =" showPhoneEdit" overlay-opacity = " 0.9 " max-width =" 700px" >
349390 <v-card >
350391 <v-card-title >Edit Phone</v-card-title >
351392 <v-card-text v-if =" activePhone" class =" mt-6" >
441482 </v-card-actions >
442483 </v-card >
443484 </v-dialog >
444- <v-dialog v-model =" showWebhookEdit" max-width =" 600px" >
485+ <v-dialog v-model =" showWebhookEdit" overlay-opacity = " 0.9 " max-width =" 600px" >
445486 <v-card >
446487 <v-card-title >
447488 <span v-if =" !activeWebhook.id" >Add a new  ; </span >
556597 </v-card-actions >
557598 </v-card >
558599 </v-dialog >
559- <v-dialog v-model =" showDiscordEdit" max-width =" 700px" >
600+ <v-dialog v-model =" showDiscordEdit" overlay-opacity = " 0.9 " max-width =" 700px" >
560601 <v-card >
561602 <v-card-title >
562603 <span v-if =" !activeDiscord.id" >Add a new  ; </span >
@@ -682,6 +723,7 @@ import {
682723 mdiContentSave ,
683724 mdiConnection ,
684725 mdiEye ,
726+ mdiRefresh ,
685727 mdiLinkVariant ,
686728 mdiEyeOff ,
687729 mdiSquareEditOutline ,
@@ -697,6 +739,7 @@ export default Vue.extend({
697739 return {
698740 mdiEye,
699741 mdiEyeOff,
742+ mdiRefresh,
700743 mdiArrowLeft,
701744 mdiAccountCircle,
702745 mdiShieldCheck,
@@ -709,6 +752,8 @@ export default Vue.extend({
709752 apiKeyShow: false ,
710753 showPhoneEdit: false ,
711754 showDiscordEdit: false ,
755+ showRotateApiKey: false ,
756+ rotatingApiKey: false ,
712757 activeWebhook: {
713758 id: null ,
714759 url: ' ' ,
@@ -1022,6 +1067,16 @@ export default Vue.extend({
10221067 })
10231068 },
10241069
1070+ rotateApiKey () {
1071+ this .rotatingApiKey = true
1072+ this .$store
1073+ .dispatch (' rotateApiKey' , this .$store .getters .getUser .id )
1074+ .finally (() => {
1075+ this .rotatingApiKey = false
1076+ this .showRotateApiKey = false
1077+ })
1078+ },
1079+
10251080 deleteWebhook (webhookId ) {
10261081 this .updatingWebhook = true
10271082 this .$store
0 commit comments