n8n/packages/editor-ui/src/modules/credentials.ts

178 lines
6.8 KiB
TypeScript
Raw Normal View History

:sparkles: Update credentials modal (#2154) * :zap: Generalize unique entity name generation * :zap: Standardize variable names * redo credentials * revert some changes, replace got with was * fix v-if order * fix v-if order * update linting * update gulpfile * update ssh display name * update height * update params * update info tip sizes * address design comments * update google button disabled * update icon size to 28px * update design issues * update info tab design * address design comments * update tab size * update run data spacing * address comments, update logo design * fix spacing issues * clean up store * fix create new bug * add loading state * rename prop * remove unused prop * fix select bug * remove label tag * update word break * build * address design comments * update font family of button * update menu opacity * update text * update title * address more comments * update oauth messages * add oauth validation * hide disabled state * update warning modal * show button on text input * clean up cred details * add validation errors * fix bug when deleting cred * Frontend hack to display test button * Created interfaces for testing and endpoint * Testing slack node credentials working * Adding test with node to endpoint for credential testing * Fixed linting and test detectability * Adding required for slack token * Added google sheets credential testing * update message * Adding suggestions by Ivan and Mutasem * Address comments * keep blurred when focused * update font weight of errors * add oauth banner * remove toast * Fixed code bug and added telegram credential testing * scroll to top on success * clean up duplication * Fixed telegram trigger node and added tests to typeform * refactor modal * add more validation support * refactor info tab * scroll to bottom on save, handle cred saving * refactor save button * save cred on valid * save cred on valid * scroll to top if has error * add targets on input labels * delete credentails input * revert fe changes * update validation logic * clean interface * test credentials * update banner design * show testing state * update x position * fix issues * fix focus issues * clean up validation behavior * make error relative * update banner component * update error spacing * don't close dialog * rename button * update how banners behave * if has unsaved changes first * move confirm message * add success banner * update time state * disable transitions * test on open * clean up banner behavior * update banner styling * capitalize * update error banner styling to handle long texts * avoid unnessary content jostling * add loading label * show validation warnings when opening modal * retest cred if not all props req * update scroll to auto * add error warning * update color saturation * set overflow to auto * fix bug to get credentials when connected * round down to minutes * change tab name * update casing oauth * disable credential testing if it has expressions * label same as title * add more space between close and save * remove check on making any changes * hide close on confirm modals * don't accept clicks outside dialog * fix build issues * undo test changes * fix table scrollbar logs * rename modals * fix bug with same name * refactor modal * fix tslint issue * refactor name * update name behavior * update monospace font * remove comment * refactor inputs * refactor error handling * reduce spacing changes * fix doc url oauth1 oauth2 * build * hide infotip if no inputs * address most comments * rename file * fix menu alignment * gst * update types Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: Omar Ajoue <krynble@gmail.com>
2021-09-11 01:15:36 -07:00
import { getCredentialTypes,
getCredentialsNewName,
getAllCredentials,
deleteCredential,
getCredentialData,
createNewCredential,
updateCredential,
oAuth2CredentialAuthorize,
oAuth1CredentialAuthorize,
testCredential,
} from '@/api/credentials';
import Vue from 'vue';
import { ActionContext, Module } from 'vuex';
import {
ICredentialMap,
ICredentialsResponse,
ICredentialsState,
ICredentialTypeMap,
IRootState,
} from '../Interface';
import {
ICredentialType,
ICredentialsDecrypted,
NodeCredentialTestResult,
INodeTypeDescription,
} from 'n8n-workflow';
import { getAppNameFromCredType } from '@/components/helpers';
const DEFAULT_CREDENTIAL_NAME = 'Unnamed credential';
const DEFAULT_CREDENTIAL_POSTFIX = 'account';
const TYPES_WITH_DEFAULT_NAME = ['httpBasicAuth', 'oAuth2Api', 'httpDigestAuth', 'oAuth1Api'];
const module: Module<ICredentialsState, IRootState> = {
namespaced: true,
state: {
credentialTypes: {},
credentials: {},
},
mutations: {
setCredentialTypes: (state: ICredentialsState, credentialTypes: ICredentialType[]) => {
state.credentialTypes = credentialTypes.reduce((accu: ICredentialTypeMap, cred: ICredentialType) => {
accu[cred.name] = cred;
return accu;
}, {});
},
setCredentials: (state: ICredentialsState, credentials: ICredentialsResponse[]) => {
state.credentials = credentials.reduce((accu: ICredentialMap, cred: ICredentialsResponse) => {
if (cred.id) {
accu[cred.id] = cred;
}
return accu;
}, {});
},
upsertCredential(state: ICredentialsState, credential: ICredentialsResponse) {
if (credential.id) {
Vue.set(state.credentials, credential.id, credential);
}
},
deleteCredential(state: ICredentialsState, id: string) {
Vue.delete(state.credentials, id);
},
enableOAuthCredential(state: ICredentialsState, credential: ICredentialsResponse) {
// enable oauth event to track change between modals
},
},
getters: {
allCredentialTypes(state: ICredentialsState): ICredentialType[] {
return Object.values(state.credentialTypes)
.sort((a, b) => a.displayName.localeCompare(b.displayName));
},
allCredentials(state: ICredentialsState): ICredentialsResponse[] {
return Object.values(state.credentials)
.sort((a, b) => a.name.localeCompare(b.name));
},
allCredentialsByType(state: ICredentialsState, getters: any): {[type: string]: ICredentialsResponse[]} { // tslint:disable-line:no-any
const credentials = getters.allCredentials as ICredentialsResponse[];
const types = getters.allCredentialTypes as ICredentialType[];
return types.reduce((accu: {[type: string]: ICredentialsResponse[]}, type: ICredentialType) => {
accu[type.name] = credentials.filter((cred: ICredentialsResponse) => cred.type === type.name);
return accu;
}, {});
},
getCredentialTypeByName: (state: ICredentialsState) => {
return (type: string) => state.credentialTypes[type];
},
getCredentialById: (state: ICredentialsState) => {
return (id: string) => state.credentials[id];
},
getCredentialsByType: (state: ICredentialsState, getters: any) => { // tslint:disable-line:no-any
return (credentialType: string): ICredentialsResponse[] => {
return getters.allCredentials.filter((credentialData: ICredentialsResponse) => credentialData.type === credentialType);
};
},
getNodesWithAccess (state: ICredentialsState, getters: any, rootState: IRootState, rootGetters: any) { // tslint:disable-line:no-any
return (credentialTypeName: string) => {
const nodeTypes: INodeTypeDescription[] = rootGetters.allNodeTypes;
return nodeTypes.filter((nodeType: INodeTypeDescription) => {
if (!nodeType.credentials) {
return false;
}
for (const credentialTypeDescription of nodeType.credentials) {
if (credentialTypeDescription.name === credentialTypeName ) {
return true;
}
}
return false;
});
};
},
},
actions: {
fetchCredentialTypes: async (context: ActionContext<ICredentialsState, IRootState>) => {
const credentialTypes = await getCredentialTypes(context.rootGetters.getRestApiContext);
context.commit('setCredentialTypes', credentialTypes);
},
fetchAllCredentials: async (context: ActionContext<ICredentialsState, IRootState>) => {
const credentials = await getAllCredentials(context.rootGetters.getRestApiContext);
context.commit('setCredentials', credentials);
},
getCredentialData: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
return await getCredentialData(context.rootGetters.getRestApiContext, id);
},
createNewCredential: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsDecrypted) => {
const credential = await createNewCredential(context.rootGetters.getRestApiContext, data);
context.commit('upsertCredential', credential);
return credential;
},
updateCredential: async (context: ActionContext<ICredentialsState, IRootState>, params: {data: ICredentialsDecrypted, id: string}) => {
const { id, data } = params;
const credential = await updateCredential(context.rootGetters.getRestApiContext, id, data);
context.commit('upsertCredential', credential);
return credential;
},
deleteCredential: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
const deleted = await deleteCredential(context.rootGetters.getRestApiContext, id);
if (deleted) {
context.commit('deleteCredential', id);
}
},
oAuth2Authorize: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsResponse) => {
return oAuth2CredentialAuthorize(context.rootGetters.getRestApiContext, data);
},
oAuth1Authorize: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsResponse) => {
return oAuth1CredentialAuthorize(context.rootGetters.getRestApiContext, data);
},
testCredential: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsDecrypted): Promise<NodeCredentialTestResult> => {
return testCredential(context.rootGetters.getRestApiContext, { credentials: data });
},
getNewCredentialName: async (context: ActionContext<ICredentialsState, IRootState>, params: { credentialTypeName: string }) => {
try {
const { credentialTypeName } = params;
let newName = DEFAULT_CREDENTIAL_NAME;
if (!TYPES_WITH_DEFAULT_NAME.includes(credentialTypeName)) {
const { displayName } = context.getters.getCredentialTypeByName(credentialTypeName);
newName = getAppNameFromCredType(displayName);
newName = newName.length > 0 ? `${newName} ${DEFAULT_CREDENTIAL_POSTFIX}` : DEFAULT_CREDENTIAL_NAME;
}
const res = await getCredentialsNewName(context.rootGetters.getRestApiContext, newName);
return res.name;
} catch (e) {
return DEFAULT_CREDENTIAL_NAME;
}
},
},
};
export default module;